@import url('https://fonts.googleapis.com/css2?family=Montserrat:');
body {
    padding:0;
    margin:0;
    font-family: 'Montserrat', sans-serif; 
}
header .bannerBack {
    background-color: rgb(90,132,196);
    /*background-color: rgb(24,107,153);
    background-color: rgb(244,144,78);*/
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    height: 75px;
    font-size: 26px;
}
header .bannerBack a {
    color: #fff;
}
header .bannerBack p {
    padding:0 15px;
}
.top {
    background-image: url(/img/HHD-Website-Banner-2026.jpg)!important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 568px!important;  
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.top img {
    margin-top: -26%;
    background: #ffffff;
}
 @media screen and (max-width: 1024px) {
     .top img {
    margin-top: -50%;
}
     
}
 @media screen and (max-width: 768px) {
     .top img {
    margin-top: -55%;
}
     .bottom {
         margin-top:-87px;
     }
}
.bottom {
    display: flex;
    flex-direction: row;
}
.colLeft {
    flex-direction: column;
    width: 75vw;
}
.colRight {
    flex-direction: column;
    margin:0 auto;
    padding-top:25px;
}
.headline-box {
    background-color: #192e56;
    margin:-50px 0 0 0;
    padding: 2px 50px;
}
.content {
    max-width: 800px;
    margin: 0 auto; 
}
.content img {
    max-width: 850px;
    width:100%;
    height: auto;
}
.headline-box h1,h3 {
    color:#fff;
    text-align: center; 
}

.headline-box h1 {
    font-size: 95px;
    line-height: 105px;
    font-weight: bold;
}
.headline-box h3 {
    font-size: 29px;
    line-height: 40.5px;
    margin-bottom: 50px;
}
.livestream-box {
    background-color: #fff;
    max-width: 1000px;
    margin:50px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.livestream-box .inner {
    max-width: 600px;
    padding: 0 50px;
}
.livestream-box h3 {
    color:#192e56;
    font-size: 29px;
    margin: 10px 50px;
    line-height: 40.5px;
}
.livestream-box p {
    font-size: 26px;
    line-height: 34px;
    margin: 0 auto;
}
.livestream-box a {
    color:#192e56;
    text-decoration: none;
}
.livestream-box a.alternate-font {
    color:#5a84c4;/* cranberry color 750D28 */
    text-decoration: none;
}
a:hover {
    color:#6e6e6e;
}
a.alternate-font:hover {
    color:#6e6e6e;
}
.colRight img {
    margin: 25px 0 60px 0;
    display: flex;
    flex-direction: column;
}
.colMobile {
    display: none;
}
.media {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.media a, .media h6 {
    color: #5a84c4;
    margin-top: 5%;
}
 @media screen and (max-width: 1000px) {
     .top img {
         width: 400px;
     }
     .bottom {
         flex-direction: column;
         margin-top:-46px;
     } 
     header .bannerBack {
         height: 100px;
        font-size: 22px;
         padding: 0 25px;
         width: 100%;
     }   
     .colLeft {
         width: 100%;
     }
     .headline-box h1 {
         font-size: 4em;
         line-height: 1.1em;
     }
     .headline-box h3, .livestream-box h3 {
         font-size: 1.7em;
         line-height: 1.2em;
     }
     .livestream-box p {
         font-size: 1.5em;
         line-height: 1.4em;
     }
     .inner {
         margin-top: 15px;
     }
     .colRight {
         display: none;
     }
     .colMobile {
         display: inline;
         margin: 0 auto;
         margin-bottom: 50px;
         width:100%;
     }
     .colMolbile img {
         height: auto;
         width: 100%;
     }
}
 @media screen and (max-width: 768px) {
     .bottom {
         margin-top:-87px;
     }
}

 @media screen and (max-width: 600px) {
     .top img {
         max-width: 300px;
         width: 100%;
         margin-top:-71%;
     }
     .bottom {
         margin-top:-125px;
     }
}
 @media screen and (max-width: 425px) {
     .top {
         height: 450px!important;
     }
     .headline-box {
         margin:-19px 0 0 0!important;
     }
}