/*
*
* ==========================================
* FLIP CARD WITH TEXT
* ==========================================
*
*/

/* This is a 300px x 300px flip card with the front image defined on the page HTML */

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 200px;
  height: 200px;
  perspective: 1000px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* Do a horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}

/*
* ==========================================
* PARALLAX
* ==========================================
*/

.parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
  }

/*
* ==========================================
* TEXT OVERLAY
* ==========================================
*/

/* This allows designers to put text in front of a picture */

/* Image and text go inside this div */
.overlay-content {
    text-align: center;
    position: relative;
}

/* Use this div to lighten an image and put dark text overlayed */
.overlay-lighten {
    opacity: 0.3;
  }
  
/* Use this div to darken an image and put light text overlayed */
    .overlay-darken {
    filter: brightness(50%);
  }

/* Use this class in a div, h2, or p to center the overlayed text */
.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*
*
* ==========================================
* INTERACTIVE CARDS
* ==========================================
*
*/

.cardpage {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.cardbody{
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cardcontainer{
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 1100px;
}
.card{
    width: 300px;
    background: #e0e5ec;
    padding: 40px 30px;
    margin: 20px 10px;
    border-radius: 1rem;
    box-shadow: 5px 5px 10px rgba(163,177,198,.8),
                -9px -9px 16px 5px rgba(255,255,255,.5);
}
.card h4{
    padding: 10px;
    text-transform: uppercase;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
    box-sizing: border-box;
}
.card h5{
    text-align: center;
    color: #9b9b9b;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 1rem;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.card p{
    color: #696969;
    font-size: 1rem;
    font-weight: bold;
    padding: 10px 0;
    line-height: 1.5rem;
}
.card a{
    display: block;
    padding: 1.2rem;
    text-align: center;
    text-decoration: none;
        background-color: #e0e5ec; 
        border-style:hidden;
    color: #2E3B6A
    margin: 10px 0;
    font-size: 1rem;
    font-weight: bold;
    box-shadow: 3px 3px 10px rgba(163,177,198,.8),
                -5px -5px 16px 5px rgba(255,255,255,.5);
    border-radius: 100px;
}
.card a:hover{
    box-shadow: inset 5px 5px 10px rgba(163,177,198,.4),
            inset   -5px -5px 10px rgba(255,255,255,.4);
    background-color: #e0e5ec; 
}

/*
*
* ==========================================
* BUTTON HOVER EFFECTS
* ==========================================
*
*/

/* Fade */
.hover-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hover-fade:hover, .hover-fade:focus, .hover-fade:active {
  background-color: #008EE2;
  color: white;
}

/* Fade Red*/
.hover-fade-red {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hover-fade-red:hover, .hover-fade-red:focus, .hover-fade-red:active {
  background-color: #A63446;
  color: white;
}


/* Border Fade */
.hover-border-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  box-shadow: inset 0 0 0 4px   rgb(255, 255, 255, 0.0), 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}
.hover-border-fade:hover, .hover-border-fade:focus, .hover-border-fade:active {
  box-shadow: inset 0 0 0 4px #008EE2, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}



/* Glow */
.hover-glow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.hover-glow:hover, .hover-glow:focus, .hover-glow:active {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}


/* Shadow */
.hover-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.hover-shadow:hover, .hover-shadow:focus, .hover-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}