body 
  {
      font: 400 15px medium-content-serif-font;
      line-height: 1.8;
      color:#223A5E;
  }

  /*The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized*/
  h2 
  {
      font-size: 24px;
      text-transform: uppercase;

      color:000;
      font-weight: 600;
      margin-bottom: 30px;
  }

  h4 
  {
      font-size: 19px;
      line-height: 1.375em;
      color: 000;
      font-weight: 400;
      margin-bottom: 30px;
  }

h5 
  {
      font-size: 50px;
      line-height: 1.375em;
      color: #fff;
      font-weight: 400;
      margin-bottom: 50px;
  }

  .jumbotron 
  {
      background-color:#223A5E;
      color: #fff;
      padding: 10px 10px;
      font-family:medium-content-serif-font;
      /*background-size: cover;*/
  }

  

  .container-fluid 
  {
      padding: 50px 50px;

  }

  .bg-grey 
  {
      background-color: #f6f6f6;
  }

  .logo-small 
  {
    color:#55B4B0;
    font-size: 50px;
  }

  .logo 
  {
      color:#55B4B0;
    
      font-size: 200px;
  }

  .thumbnail 
  {
      padding: 0 0 15px 0;
      border: none;
      border-radius: 0;
  }

  .thumbnail img 
  {
      width: 100%;
      height: 100%;
      margin-bottom: 10px;
  }
  
  /*The overflow property specifies what happens if content overflows an element's box.*/
.hovereffect 
{
  width: 100%;
  height: 100%;
  float: left;
  /*the image will float to the left in the paragraph, and the text in the paragraph will wrap around the image.*/
  overflow: hidden;
  /*  The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position*/
  position: relative;
  text-align: top;
  cursor: default;
  /*The cursor property specifies the type of cursor to be displayed when pointing on an element.*/
}
/*WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome.*/
.hovereffect .overlay 
{
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  /*background-color: rgba(75,75,75,0.7);*/
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
/*The :hover selector is used to select elements when you mouse over them.*/
.hovereffect:hover .overlay 
{
  background-color: rgba(48, 152, 157, 0.4);

}

/*Displays an element as a block element (like <p>)*/
.hovereffect img 
{
  display: block;
  position: relative;
}

.hovereffect h2 
{
  text-transform: uppercase;
  color: #fff;
  text-align: top;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transform: translateX(1145px);
  -ms-transform: translateY(1145px);
  transform: translateX(1145px);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  visibility: none;
}
/*The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.*/
.hovereffect:hover h2 
{
  -webkit-transform: translateX(5px);
  -ms-transform: translateX(5px);
  transform: translateX(5px);
  margin:0px;

}
/*The opacity property specifies the transparency of an element. The lower the value, the more transparent:
The text-decoration property specifies the decoration added to text.*/
.hovereffect p.info 
{
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff;
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  font-weight: normal;
  margin: 7px;
}
/*Em values define your fonts relative size to help them resize relative to the browser's default font size or the website's font size.*/
.hovereffect:hover p.info 
{
  opacity: 1.5;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.hovereffect p.info:hover 
{
  box-shadow: 0 0 5px #fff;
}

  .carousel-control.right, .carousel-control.left 
  {
      background-image: none;
      color: #223A5E;
  }

  .carousel-indicators li 
  {
      border-color: #223A5E;
  }

  .carousel-indicators li.active 
  {
      background-color: #223A5E;
  }

  .item h4 
  {
      font-size: 19px;
      line-height: 1.375em;
      font-weight: 400;
      font-style: medium-content-serif-font;
      margin: 70px 0;
  }

  .item span 
  {
      font-style: normal;
  }
  /*The transition property is a shorthand property used to represent up to four transition-related longhand properties:
  transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]*/
  .panel 
  {
      border: 1px solid #f4511e; 
      border-radius:0 !important;
      transition: box-shadow 0.5s;
  }

  .panel:hover 
  {
      box-shadow: 5px 0px 40px rgba(0,0,0, .2);
  }

  .panel-footer .btn:hover 
  {
      border: 1px solid #f4511e;
      background-color: #fff !important;
      color: #f4511e;
  }

  .panel-heading 
  {
      color: #fff !important;
      background-color: #f4511e !important;
      padding: 25px;
      border-bottom: 1px solid transparent;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
  }

  .logo-img {
    float: left;
    position: relative;
    margin: 1px 10px 1px 1px;
    height: 100%;
    width:30%;

}

  .panel-footer 
  {
      background-color: white !important;
  }

  .panel-footer h3 
  {
      font-size: 32px;
  }

  .panel-footer h4 
  {
      color: #aaa;
      font-size: 14px;
  }

  .panel-footer .btn 
  {
      margin: 15px 0;
      background-color: #f4511e;
      color: #fff;
  }

   .carousel-inner img 
   {
      /*-webkit-filter: grayscale(90%);
      /*filter: grayscale(90%); /* make all photos black and white */ 
      width: 60%;
      height:50%; /* Set width to 100% */
      margin: auto;
      object-fit: contain;
      max-width: none;
      color: #DFE2DB;
      padding: 0px;

  }
  .carousel {
    background-color: #DFE2DB;
    color: #000000;
  
    
}


  .carousel-caption h3
  {
      color: #000 !important;
      max-width: 550px;
      padding: 0 100px;
      margin:20 auto;
      margin-top: 50px;
      text-align:center;
  }

  @media (max-width: 600px) 
  {
    .carousel-caption 
    {
      display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
    }
  }

  .navbar 
  {
      margin-bottom: 0;
      background-color: #55B4B0;
      z-index: 9999;
      border: 0;
      font-size: 12px !important;
      line-height: 1.42857143 !important;
      letter-spacing: 4px;
      border-radius: 0;
      font-family: sans-serif;
  }
/*In an HTML page, the natural stacking order (i.e. the order of elements on the Z axis) is determined by a number of factors.*/
  .navbar li a, .navbar .navbar-brand 
  {
      color: #fff !important;
  }

  .navbar-nav li a:hover, .navbar-nav li.active a 
  {
      color: #f4511e !important;
      background-color: #fff !important;
  }

  .navbar-default .navbar-toggle 
  {
      border-color: transparent;
      color: #fff !important;
  }

  footer .glyphicon 
  {
      font-size: 20px;
      margin-bottom: 20px;
      color: #55B4B0;
  }

  .slideanim {visibility:hidden;}
  /*Using the CSS property/value pair of visibility: hidden hides an element from the browser. however, that hidden element still takes up space in the layout. It's like you have basically made the element invisible, but it still remains in place and takes up the space it would have taken up had it been left alone.*/

  .slide 
  {
      animation-name: slide;
      -webkit-animation-name: slide;
      animation-duration: 1s;
      -webkit-animation-duration: 1s;
      visibility: visible;
  }

  @keyframes slide 
  {
    0% 
    {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% 
    {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  @-webkit-keyframes slide 
  {
    0% 
    {
      opacity: 0;
      -webkit-transform: translateY(70%);
    } 
    100% 
    {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
  }
  @media screen and (max-width: 768px) 
  {
    .col-sm-4 
    {
      text-align: center;
      margin: 25px 0;
    }
    .btn-lg 
    {
        width: 100%;
        margin-bottom: 35px;
    }
  }
  @media screen and (max-width: 480px) 
  {
    .logo 
    {
        font-size: 150px;
    }
  }



  .person {
      border: 10px solid transparent;
      margin-bottom: 25px;
      width: 80%;
      height: 80%;
      opacity: 0.7;
  }
  .person:hover {
      border-color: #f1f1f1;
  }