html { font-size: 14px; }

a { text-decoration: none;}
.container { max-width: 960px; margin: 0 auto; }
.image-container { max-width: 300px; max-height: 300px; overflow: hidden; }
.image-container img { width: 100%; }
.fa { color: #fff;}
.f-container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }

header {
  background-color: #ea8aaf; color: #fff; height: 3rem; line-height: 3rem; vertical-align: middle;
  font-size: 1.2rem; font-weight: 600; font-family: sans-serif;
}
header a {color: #fff; padding: 0 1rem; }
header a:hover { color: #ddd; }
header .container { display:flex; justify-content: space-between; align-items: center;}
header .fa {  }
header .fa:hover { color: #ddd; }

.header-image {
  background-image: url(../images/header-pic.jpg);
  background-size: cover;
  background-position: center;
  height: 30rem;
}

.header-image .headline{
  border: #fff 2px solid;
  padding: 2rem;
  font-size: 5rem;
  font-weight: 200;
  color: #fff;
  text-align: center;
  font-family: Verdana;
}

/*#content { margin-top: 2rem; }*/

#introduction { font-family:sans-serif; padding: 1rem; line-height: 1.5rem; color: #666;}
#introduction p { margin-top: 1rem; }

.contacts { padding: 1rem; line-height: 1.5rem; color: #666;}
.contacts a{ color: #666;}
.contacts a:hover {color: #dd9ba6}
.contacts .button { background-color: #F6E1E8; width: 270px; padding: 10px; margin: 5px 0; text-align: center; }
.contacts .button i { padding:0 10px; color: #666;}
.contacts span.highlight { color:#dd9ba6; font-weight:bold; }

.items { display: flex; justify-content: space-around;; align-items: center;}
.items .item { margin: 1rem; }
.item .title { position: relative; top: -3.2rem; margin-bottom: -3.2rem; height: 3rem; background-color: #EFC9D6; text-align: center; vertical-align: middle;
  font-size: 1.3rem; line-height: 3rem; color: #fff; font-weight: 400; opacity: 0.8;}
.item .buttons {display:flex; justify-content: space-around;}
.item .buttons div { border: #EFC9D6 solid 1px; width: 100%; text-align: center;
  line-height: 3rem; height: 3rem; color:#dd9ba6;}
.item .buttons div { color: #dd9ba6; cursor:pointer; }
.item .buttons div:hover { cursor: pointer; background-color: #EFC9D6; color: #fff; text-decoration: none;}

footer { height: 5rem; display: flex; align-items: center; justify-content: flex-start;
  background-color: #EFC9D6; opacity: 0.5;}
footer .container { width: 960px;}
footer .container div { padding: 1rem; }

@media only screen and (max-width: 550px) {
  .items { display: flex; flex-wrap: wrap; justify-content: center; }
  .header-image .headline { border: 0px; }

  .item .title { top: -3rem; margin-bottom: -3rem; }
  .contacts .button { margin: 5px auto; }
}




  /*box-shadow: 0 1px 3px rgba(black, 0.2);*/

.come-in {
  transform: translateY(150px);
  animation: come-in 0.8s ease forwards;
}
.come-in:nth-child(odd) {
  animation-duration: 0.6s;
}
.already-visible {
  transform: translateY(0);
  animation: none;
}

@keyframes come-in {
  to { transform: translateY(0); }
}


/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* The actual popup (appears on top) */
.popup .popuptext {
    font-size: 0.8rem;
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 5;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
    line-height: 1.5rem;
    text-align: left;
    padding: 1rem;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}