/* Committee Collaps */
.wrapper{
    width:100%;
}
@media(max-width:992px){
    .wrapper{
        width:100%;
    }
}
.panel-heading {
    padding: 0;
    border:0;
}
.panel-title>a, .panel-title>a:active{
    display:block;
    padding:15px;
    color:#555;
    font-size:16px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:1px;
    word-spacing:3px;
    text-decoration:none;
    background: #dddddd;
}
.panel-heading  a:before {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: right;
    transition: all 0.5s;
}
.panel-heading.active a:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

.panel-body
{
    padding: 20px;
}


/* Committee Collaps */

















body {
    background-color: lightgrey;
}

/* Transistion both your normal and hovered elements to allow for smooth flow when unhovered */

.card {
    background: white;
    margin-top: 40px;
    height: 400px;
    transition: 0.6s all ease;
    margin-left: auto;
    margin-right: auto;
}

/* I used background url to allow me to change the height and width without needing extra css */

.cardTop {
    transition: 0.4s all ease;
    height: 65%;

}

.cardBottom {
    height: 35%;
    text-wrap: normal;
    transition: 0.4s all ease;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgb(176 186 255) 100%);
}

.cardText {
    min-height: 100%;
    padding: 20px;
}

.cardTitle {
    font-size: 24px;
    font-weight: 700;
    color: #032b45;
    font-family: 'GoogleSans';
    text-align: center;
}

.cardInfo {
    padding-top: 10px;
    font-size: 18px;
    font-weight: 500;
    color: black;
    font-family: 'GoogleSans';
    text-align: center;
}


/* Hidding the entire so anything we put in will only show on hover */

.cardHoverText {
    visibility: hidden;
    text-align: center;
}

/* Hover affects */

.card:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

/* Using className + hover followed by child element allows you to change child elements when parent is hovered */

.card:hover .cardHoverText {
    visibility: visible;
    transition: 0.4s all ease;
    transition-delay: 0.1999s;
}

.card:hover .cardBottom {
    transition: 0.4s all ease;
    height: 65%;
    opacity: 1;
}

.card:hover .cardTop {
    height: 35%;
    opacity: 0.8;
    transition: 0.4s all ease;
}