#page-hero 
{
    background-position: center;
    background-size: cover;
    position: relative;
    padding: 1rem;
    
    background-image: linear-gradient(150deg, rgb(0, 176, 255) 0%, #3B9DFF 50%, rgb(0, 78, 226) 100%);
    
    clip-path: polygon( 100% calc(100% - 40px), calc(50% - 50px) calc(100% - 40px), 50% 100%, calc(50% + 50px) calc(100% - 40px), 0 calc(100% - 40px), 0 0, 100% 0 );
    
    min-height: 490px;
}

.ts-tablet-only #page-hero
{
    min-height: 700px;
}

.ts-mobile-only #page-hero
{
    min-height: 615px;
}

h1.page-hero
{
    font-size: 3rem !important;
    color: rgb(255, 255, 255);
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    width: 100%;
    line-height: 1.2em;
}

#page-hero img
{
    width: 100%; 
    max-width: 430px;
}

.ts-mobile-only #page-hero img
{
    /*display:none;*/
    max-width: 340px;
}

h4.page-hero
{
    color: rgb(255, 255, 255);
    font-size: 1.5rem;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    line-height: 1.3em;
    width: 100%;
}

.triangle
{
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-left-width: 45px;
    border-right-width: 45px;
    border-top: 45px solid #227cf3;
    margin: auto;
    margin-top: -3px;
}

.ts-tablet-only .triangle
{
    border-left-width: 35px;
    border-right-width: 35px;
    border-top: 35px solid #1e76f0;
}

.ts-mobile-only .triangle
{
    border-left-width: 25px;
    border-right-width: 25px;
    border-top: 25px solid #0e61e9;
}