.maincontent {
    position: relative;
    max-width: 100%;
}

.clip-header{
background-image:url('/imageserver/UserMedia/bartlettsons/deck-hero.jpg');
background-size:cover;
background-position:bottom;
background-repeat:no-repeat;
width:100%;
height:600px;
overflow:hidden;
position:relative;
z-index:1;
     -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 77% 97%, 61% 100%, 45% 96%, 30% 100%, 12% 96%, 0% 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 77% 97%, 61% 100%, 45% 96%, 30% 100%, 12% 96%, 0% 100%);
}

.hero-text {
position:relative;
z-index:2;
padding-top:10%;
padding-left:5%;
width:60%;
color:#ffffff;
text-shadow: 2px 2px 2px rgba(0,0,0,0.40);
}
.card {
box-shadow: 5px 5px 5px 3px rgba(0,0,0,0.1);
padding: 20px;
width: 95%;
margin: 0 auto;
transition:0.5s;
}

.card-title{
     text-align:center;
}

.card:hover {
transform: translateY(-15px);
background:var(--accent-color);
color: #fff;
}

.card img {
width: 400px;

}

.card-body{
margin-bottom: 20px;
height: 80px;
}

.card-footer{

text-align: center;
}

a.btn.btn-primary {    padding: 16px 28px;    border-radius: 0;    background: #5f6d79;    border: none;   box-shadow: 0 4px 5px -3px #333;    transition: 0.5s;    font-weight: bold;transition: ease-out 0.4s;}
a.btn.btn-primary:hover {    box-shadow: inset 0 0 0 50px #2d2d2d; }


a.btn.btn-secondary{
padding: 16px 28px;    border-radius: 0;    background-color:#5AA1D1;    border: none;   box-shadow: 0 4px 5px -3px #333;    transition: 0.5s;    font-weight: bold;transition: ease-out 0.4s; color:white;
}

a.btn.btn-secondary:hover{
box-shadow: inset 0 0 0 50px #4F8EB8;
color:white;
}