header {
    width: 100%;
    height: 220px;
    /* background:rgb(46,56,91); */
    background-color: white;
}

body {
  background-color: rgb(125,181,213);
  font-family: Verdana, Geneva, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6em
}

footer {
  background:rgb(46,56,91);
  color: #d5d5d5;
  padding-top: 2rem;
}

footer a{
  color: #d5d5d5;
}

hr {
  border-top: 1px solid #d5d5d5;
  width: 100%;
  margin-top: .8rem;
  margin-bottom: 1rem;
}

.social a {
  font-size: 4.5em;
  padding: 1em;
}

.fa-facebook {
  color: #3b5998;

}
.fa-twitter {
  color: #00aced;
}
.fa-instagram {
  color: #517fa4;
}
.fa-facebook:hover, 
.fa-twitter:hover, 
.fa-instagram:hover {
  color: #d5d5d5;
}
/* Begin CSS For Jumbotron and Navigational Control */


.logo_photo > img {
  margin-right: auto;
  margin-left: auto;
  display: block;
}

.clearfix:before, .clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

.container {
    width: 100%;
    margin: 0 auto;
}

.header-left, .header-right {
  width: 100%;  
}

.header-left > img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 15%;
  height: 15%;
}

.header-right {
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.header-right > nav > a {
    text-decoration: none;
    font-size: 25px;
    color: rgb(46,56,91);
}
nav > a {
    position: relative;
    display: inline-block;
    font-size: 13px;
    line-height: 40px;
    padding: 0 2em;
    -webkit-transition: all .3s ease;
}

nav > a:hover {
    background: rgb(117,213,239);
    color: rgb(46,56,91);
}

/* Portrait tablet to landscape and desktop */


    
    
/* Begin CSS For Main Part of Page Containing Carousel and Headings */

.welcome > h1, h4 {
  text-align: center;
  color: white;
}

.picturecontainer { 
    background-image: url(PP_Photos/PPFrontWindowFromInside.jpg); 
    background-repeat: no-repeat;
    background-size: 100%;
 }

.height {
  height: 500px;
  margin-bottom: 100px;
}

.mycarousel {
  margin-top: 50px;
  width: 100%;
  height: 100%;
}

.carousel-item > img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  height: 50%;
  width: 50%;
}

.card > img {
  height: 300px;
  max-width: 100%;

}

#bottom {
  box-sizing: border-box;
  padding: 25px 0;
  min-height: 0vh;
}

.hours {
  background-color: rgb(237,237,238);
  color: rgb(46,56,91);
  padding: 10px;
}

.hours > p {
  text-align: center;
}
.hours > h4 {
  color: rgb(46,56,91);
}

.hours > table {
  text-align: center;
  margin: auto;
}


.map > iframe {
  width: 100%; 
  height: 100%;
}

/* #bottom {
  background: #fff url(http://portfolio.queenofwhisks.com/demo/overlay/stripe-diagonal-broken.png);
} */

.ribbon-container {
  background: transparent !important;
  position: relative;
  z-index: 1;
}
.ribbon {
  background:rgb(46,56,91) url(http://portfolio.queenofwhisks.com/demo/overlay/noise.png);
  box-shadow: 2px 6px 12px rgba(0,0,0,0.5);
  font-family: Verdana, Geneva, sans-serif;
  font-size: 20px;
  line-height: 1.0;
  text-align: center;
  margin: 0 auto;
  padding: 0.25em 0;
  position: relative;
  width: 100%;
}
.ribbon:before,
.ribbon:after {
  border: 1.5em solid hsl(227, 32.8%, 26.9%);
  content: '';
  display: block;
  position: absolute;
  bottom: -1em;
  z-index: -1;
  color: rgb(117,213,239);
}
.ribbon:before {
  left: -2em;
  border-right-width: 1.5em;
  border-left-color: transparent;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.ribbon:after {
  right: -2em;
  border-left-width: 1.5em;
  border-right-color: transparent;
  box-shadow: -2px 2px 2px rgba(0,0,0,0.5);
}
.ribbon-content {
  border-top: 0.0625em dashed rgb(117,213,239);
  border-bottom: 0.0625em dashed rgb(117,213,239);
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.08), inset 0px -1px 1px rgba(255,255,255,0.08), 0px -1px 1px rgba(255,255,255,0.2), 0px 1px 1px rgba(0,0,0,0.08);
  display: block;
  padding: 0.6875em 0;
  color: rgb(117,213,239);
}
.ribbon-content:before,
.ribbon-content:after {
  content: '';
  display: block;
  position: absolute;
  border-style: solid;
  border-color: hsl(0, 100%, 100%) transparent transparent transparent;
  bottom: -1em;
  color: rgb(117,213,239);
}
.ribbon-content:before {
  left: 0;
  border-width: 1em 0 0 1em;
  color: rgb(117,213,239);
}
.ribbon-content:after {
  right: 0;
  border-width: 1em 1em 0 0;
  color: rgb(117,213,239);
}
.ribbon a {
  color: rgb(117,213,239);
  font-size: 25px;
  text-decoration: none;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.25);
}
.ribbon a:hover {
  color: rgb(117,213,239);
}
.underpage {
  background: #f4f4f4 url(http://portfolio.queenofwhisks.com/demo/overlay/noise-paper.png);
  box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.25);
  box-sizing: border-box;
  font-family: Garamond, 'Goudy Old Style', Times, 'Times New Roman', serif;
  line-height: 1.5;
  margin: 0 auto;
  padding: 4.5em 1.5em 1.5em;
  position: relative;
  top: -4em;
  width: 90%;
  z-index: -1;
  text-align: center;
}

.announce > h3 {
  color: hsl(227, 32.8%, 26.9%);
}

.buttons > a > button {
  height: 75px;
  width: 200px;
  background-color: rgb(125,181,213);
  color: hsl(227, 32.8%, 26.9%);
  margin: 30px;
  padding: 10px;
  font-size: 25px
  

}

.buttons > a > button:hover {
  background-color: hsl(227, 32.8%, 26.9%);
  color: rgb(117,213,239);
  -webkit-transition: all .3s ease;
}


.display-4 {
  color: white;
  padding: 10px;
}

.students {
  /* padding: 10px; */
  padding-top: 10px;
  padding-bottom: 20px;
  margin-top: 30%;
}

.cards {
  height: 100%;
  border: 1px solid grey;
  border-radius: 5px;
  background-color: white;

}

.cards > img {
  width: 100%;
  height: 55%;

}
.logo > img {
  width: 50%;
  height: 50%;
}

.header-right > nav > ul > li > a {
    text-decoration: none;
    font-size: 25px;
    color: rgb(46,56,91);
}
nav > ul > li > a {
    position: relative;
    display: inline-block;
    font-size: 13px;
    line-height: 40px;
    padding: 0 2em;
    -webkit-transition: all .3s ease;
}

nav > ul > li > a {
  width: 100%;
  text-align: center;
}

nav > ul > li > a:hover {
    background: rgb(117,213,239);
    color: rgb(46,56,91);
}

















  


/* Landscape phones and down */
@media screen and (max-width: 480px) {
    .header-left > img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 40%;
    height: 40%;
    
  }

  .header-right {
      width: 100%;
      text-align: center;
  }

  
  .header-right > nav > a {
      text-decoration: none;
      font-size: 15px;
      color: rgb(46,56,91);
  }
  nav > a {
      position: relative;
      display: inline-block;
      font-size: 13px;
      line-height: 40px;
      padding: 0 2em;
      -webkit-transition: all .3s ease;
  }

  nav > a:hover {
      background: rgb(117,213,239);
      color: rgb(46,56,91);
      font-size: 15px;
  }

  .header-right > nav > ul > li > a {
      text-decoration: none;
      font-size: 25px;
      color: rgb(46,56,91);
  }

  nav > ul > li > a {
      position: relative;
      display: inline-block;
      font-size: 13px !important;
      line-height: 40px;
      padding: 0 2em;
      -webkit-transition: all .3s ease;
  }

  nav > ul > li > a {
    width: 100%;
    text-align: center;
  }

  nav > ul > li > a:hover {
      background: rgb(117,213,239);
      color: rgb(46,56,91);    
  }

  
  .hours {
      background-color: rgb(237,237,238);
      color: rgb(46,56,91);
      /* padding: 10px; */
      margin-right: 5px;
      margin-left: 5px;
  }

  .map > iframe {
    width: 100%;
    height: 100%;
    position: relative;
    top: 5px;
  }

  .announcement_div {
    display: none;
  }
}

  @media screen and (min-width: 768px) and (max-width: 979px) {

  }



/* Small monitor */
@media screen and (max-width: 979px){
   

}
 


/* Landscape phone to portrait tablet */