/*******************************************
	THE YACHT HARBOUR ASSOCIATION
    Overrides for Marina Award Pages
    Developed 15/08/2017
    Justin Kercher / Apollo Internet Media
********************************************/        

body { background-color: #dedede; height: auto; }

/* page specific */
.sponsor-logo { max-height: 80px; }

#award-banner { position: relative; }
    #award-banner:after { content: ""; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: rgba(0,0,0,0.3); z-index: 10; }
    #award-banner img:nth-child(2) { display: none; position: absolute; top: 30px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 100; }
    #award-banner > #award-banner-content { position: relative; color: #fff; background-color: #003399; padding: 15px; z-index: 100; }
    #award-banner > #award-banner-content * { color: #fff !important; }  

/* overrides */
.container { background-color: #fff; }

#site-footer { margin-top: 15px; min-height: 0px !important; }


/* Invalid award panel */
.panel-invalid > .panel-heading { background-color: #810000 !important; color: #fff; }

#site-header { padding-top: 0px !important; background-color: #293b6b; color: #fff; margin-top: 15px; }
    #site-header h1 { color: inherit; }

@media (min-width: 768px) {
    #award-banner > #award-banner-content { position: absolute; left: 50%; top: 50%; max-width: 100%; width: 100%; color: #fff; background-color: transparent;
                                            -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; }
}

@media (min-width: 992px ) {
    #site-header h1 { margin-top: 10px; }
    #award-banner img:nth-child(2) { display: block;}

    .sponsor-logo { max-height: none; }

    /* Align middle */
    #site-header .row { display: flex; flex-direction: row; }
        #site-header .row > div { display: flex; align-items: center; float: none !important; }
        #site-header .row > div > .text-center { display: block; width: 100%; }

}


@media (min-width: 1200px ) {
    #site-header h1 { margin-top: 13px; }
}