/* banners */


.banner{
	background-color:rgba(0,0,0,0.3);
	background-image:url('../img/background.jpg');
	background-size:cover;
	background-blend-mode: color;

    
    .middle{
        height:100vh;
        display:flex;
        flex-direction:column;
        width:100%;
        justify-content:center;
        align-items:center;
        text-align: center;
        .logo{
            
            margin-bottom:30px;
            text-align:center;
            img{
                width:550px;
                height:auto;
                @media screen and (max-width:$phone){
                    width:100%;
                }
            }
        }
        p{
            font-size:22px;
            margin-top:0;
            font-weight:normal;
       
        }
        @media screen and (max-width:$tablet_large_landscape){
            height:600px;
            padding-top:100px;
        }
        @media screen and (max-width:$tablet_small_portrait){
            height:600px;
            padding-top:100px;
        }
        @media screen and (max-width:$phone){
            height:500px;
            padding-top:80px;
            width:80%;
            margin-left:auto;
            margin-right:auto; 
        }
    }

    &.inner {
        &.about{
            background-image:url(../img/marilena-cafe-about.jpg);
            background-blend-mode: inherit;
            background-position:50%;           
            @media screen and (max-width:$phone){
                height:550px;
            }
        }
        &.press{
            background-image:url(../img/marilena-cafe-press.jpg);
            background-blend-mode: inherit;
            @media screen and (max-width:$phone){
                height:550px;
                background-position:50%;
            }
        }
        &.private__dining{
            background-image:url(../img/marilena-private-dining-banner.jpg);
            background-blend-mode: inherit;
            @media screen and (max-width:$phone){
                height:550px;
                background-position:50%;
            }
        }
        .middle{
            height:700px;
            @media screen and (max-width:$tablet_large_landscape){
                height:400px;
                padding-top:100px;
            }
            
            @media screen and (max-width:$phone){
                height:200px;
                padding-top:80px;
            }
        }
        @media screen and (max-width:$tablet_large_landscape){
            height:500px;
        }
        
        @media screen and (max-width:$phone){
            height:280px;
        }

    }
    @media screen and (max-width:$phone){
        background-position:85%;
    }
    
    
}