/* 
----------------------------------------------
Banner and title panel styles
----------------------------------------------
*/

#bannerPanel
{
    overflow: hidden;
    position: relative;
    width: 100%;
}

#logo
{
    position: absolute;
    width: auto;
    right: var(--margin);
    top: var(--margin);
    cursor: pointer;
}

#imagePanel
{
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("img/background_strip.jpg");
    background-repeat: repeat-x;
    width: 100%;
}

#imageFrame
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

#imageFrame2
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

#titlePanel
{
    position: relative;
}

#overlay
{
    position: absolute;
    height: auto;    
}

#title
{
    position: absolute;
    color: var(--valeRed);
    -webkit-text-stroke: 1px white;
    text-shadow: 0px 0px 20px black;
}

@media screen and (orientation: landscape)
{
    #bannerPanel
    {
        height: 450px;
    }
    
    #logo
    {
        height: 70px;
    }
    
    #title
    {
        left: calc(50vw - 450px);
        top: -15px;
        width: 100%;
        font-size: calc(var(--fontBasis) * 4);        
    }

    #imagePanel
    {
        height: 100%;
    }
    
    #imageFrame, #imageFrame2
    {
        height: 30%;
        width: 100%;
        object-fit: fill;
        border: 1px yellow;
    }
    
    #overlay
    {
        top: 40px;
        right: calc(50vw - 450px);
        width: 600px;
    }

    #titlePanel
    {
        margin-top: -5em;
        margin-bottom: 0;
    }

    #titlePanel p
    {
        width: 50%;
    }
        
    #titlePanel p br
    {
        display: none;
    }    
}

@media screen and (orientation: portrait)
{
    #bannerPanel
    {
        height: 78.2vw;
    }

    #logo
    {

        height: 8vh;
    }
    
    #title
    {
        left: var(--margin);
        top: 15vw;
        width: 100%;
        font-size: calc(var(--fontBasis) * 3);           
    }
    
    #imagePanel
    {
        height: 78.2vw;
    }
    
    #imageFrame
    {
        height: auto;
    }
    
    #overlay
    {
        top: 10vw;
        right: 5vw;
        width: 85vw;
    }
    
    #titlePanel
    {
        margin-top: -20vw;
    }  
}


#strapPanel p
{
    position: relative;
    color: var(--valeRed);
    font-size: calc(var(--fontBasis) * 1.5);
}

#strapPanel
{
    margin-bottom: 0;
}

@media screen and (orientation: portrait)
{
    #strapPanel
    {
        margin-top: -20vw;
    }
}

@media screen and (orientation: landscape)
{
    #strapPanel
    {
        margin-top: -80px;
    }

    #strapPanel br
    {
        display: none;
    }
}