/* =========================================
   PARTICIPANT INTRO
========================================= */

.hg-participant-intro{
    width:100%;
    color:#ffffff;
    background:#355E3B;
    font-family:Arial, Helvetica, sans-serif;
}

/* =========================================
   HERO
========================================= */

.hg-participant-hero{
    position:relative;
    width:100%;
    min-height:0;
    display:block;
    padding:0;
    box-sizing:border-box;
}

/* =========================================
   CENTER CONTENT
========================================= */

.hg-participant-content{
    width:100%;
    max-width:700px;
    text-align:center;
}

.hg-participant-content h1{
    font-size:56px;
    margin:0 0 20px;
    color:#ffffff;
}

.hg-welcome{
    font-size:24px;
    color:#d7b56d;
    margin:0 0 20px;
}

.hg-description,
.hg-after-button{
    font-size:18px;
    line-height:1.8;
    color:#d9d9d9;
}


/* =========================================
   PARTICIPANT SIGN-UP AREA
========================================= */

.hg-participant-signup{
    position:relative;
    width:100%;
    max-width:100%;
    margin:0;
}

.hg-hockey-participate{
    width:100%;
    height:auto;
    display:block;
}

/* Make the hockey image clickable */

.hg-signup-link{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    display:block;
    z-index:2;
}

/* Sign Up button inside hockey image */

.hg-participant-signup-button{
    position:absolute;
    top:8%;
    left:48%;
    width:92%;
    height:auto;
    transform:translateX(-50%) scaleX(1.1);
    display:block;
}

/* =========================================
   BENEFITS
========================================= */

.hg-participant-benefits{
    width:100%;
    padding:20px 0 40px;
}

.hg-benefit{
    width:300px;
    margin:0 auto;
    padding:20px;
    background:transparent;
    text-align:center;
    box-sizing:border-box;
}

.hg-benefit h3{
    width:50%;
    margin:0 auto 20px;
    padding:12px 20px;
    background:#8B6B00;
    color:#ffffff;
    text-align:center;
    border-radius:6px;
}

.hg-benefit p{
    color:#cccccc;
    line-height:1.6;
}

/* =========================================
   MOBILE - VERTICAL
========================================= */

@media (max-width:768px) and (orientation:portrait){

    .hg-participant-hero{
        min-height:0;
        padding:0;
    }

    .hg-participant-content{
        width:100%;
        max-width:100%;
        padding:0 20px;
        box-sizing:border-box;
    }

    .hg-participant-content h1{
        font-size:34px;
    }

    .hg-welcome{
        font-size:20px;
    }

    .hg-description,
    .hg-after-button{
        font-size:16px;
    }

.hg-participant-signup{
    width:100%;
    max-width:100%;
    margin:0 auto 0;
    overflow:hidden;
}

.hg-hockey-participate{
    width:100%;
    height:75vh;
    object-fit:fill;
    object-position:center;
    display:block;
}

.hg-participant-signup-button{
    top:8%;        /* UP / DOWN */
    left:48%;       /* LEFT / RIGHT */
    width:102%;      /* BUTTON SIZE */
    height:347px;
    transform:translateX(-50%);
}

    .hg-participant-header{
        width:100%;
        height:135px;
        overflow:hidden;
    }

    .hg-participant-header img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;
        display:block;
    }
}


/* =========================================
   MOBILE - HORIZONTAL
========================================= */

@media (max-width:900px) and (orientation:landscape){

    .hg-participant-hero{
        min-height:0;
        padding:0;
    }

    .hg-participant-content{
        width:100%;
        max-width:100%;
        padding:0 20px;
        box-sizing:border-box;
    }

    .hg-participant-content h1{
        font-size:36px;
    }

    .hg-welcome{
        font-size:20px;
        margin-bottom:15px;
    }

    .hg-description,
    .hg-after-button{
        font-size:16px;
        line-height:1.6;
    }

    .hg-participant-signup{
        width:100%;
        max-width:100%;
        margin:0 auto 0;
        overflow:hidden;
    }

    .hg-hockey-participate{
        width:100%;
        height:150vh;
        object-fit:fill;
        object-position:center;
        display:block;
    }
   
.hg-signup-button{
    top:8%;        /* UP / DOWN */
    left:48%;       /* LEFT / RIGHT */
    width:101%;      /* BUTTON SIZE */
    height:410px;
    transform:translateX(-50%);
}

    .hg-participant-header{
        width:100%;
        height:100px;
        overflow:hidden;
    }

    .hg-participant-header img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;
        display:block;
    }
}