/*----------------------------------------------------------*/
/*DEFINED PUB COLORS*/
/*----------------------------------------------------------*/
/*
    green: 016F45;
    beige: FFE2A5;
    orange: F36E21;
    red: EF3E22;
*/

/*https://fonts.google.com/specimen/Alegreya?selection.family=Alegreya*/
@font-face {
    font-family: "Alegreya"; 
    src: url("../font/Alegreya-Regular.ttf"); 
}


/*----------------------------------------------------------*/
/*RESPONSIVE EXTENSIONS*/
/*----------------------------------------------------------*/
@media only screen and (max-width: 767px) {
    .sm-hidden {display: none;}
}

@media only screen and (min-width: 767px) {
    .md-hidden {display: none;}
}

.ratio-container {
    position: relative;
    padding-top: 100%;
    width: 100%;
}

.ratio-1-1 {
    padding-top: 100%;
}

.ratio-16-9 {
    padding-top: 56.25%;
}

.ratio-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


/*----------------------------------------------------------*/
/*GENERAL CSS*/
/*----------------------------------------------------------*/
body {
    font-family: 'Alegreya', serif;
    font-variant: small-caps;
    letter-spacing: 0.04em;
}

a {
    color: #F36E21;
}

a:hover { 
    color: #F36E21;
}

article {
    font-size: 1.3em;
    padding: 2em 0em;
    text-align: center;
}

.bumper{
    height: 1em;
}

.article-image {
    width: 100%;
    height: 100%;
    box-shadow: 0.1em 0.1em 0.4em 0em rgba(0, 0, 0, 0.4);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}

h2, h3 {
    width: 100%;
    text-align: center;
}

.full-height {
    height: 100%;
}

.logo-decoration {
    height: 1.5em;
    width: 100%;
    margin-bottom: 1em;
    background-image: url(../pics/pub/graphics/symbol_black.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.logo-decoration-white {
    height: 1.5em;
    width: 100%;
    margin-bottom: 1em;
    background-image: url(../pics/pub/graphics/symbol_white.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#card-style {
    font-size: 1.7em;
    height: 100%;
    color: #FFE2A5;
    background-color: #016F45;
    
    box-shadow: 
        0em 0em 4em 0em rgba(0, 0, 0, 0.7),
        inset 4em 0em 2em -4em hsl(188, 1%, 40%);
}

header {
    /*base for paralax scrolling*/
    position: fixed;
    
    /*cover just mostlyo f the website and be in the background*/
    width: 100%;
    height: 70%;
    z-index: -10;
    
    /*image props*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.content-layer {
    position: absolute;
    width: 100%;
    top: 70%;
}

.primary-content {
    position: relative;
    padding: 2em 0em;
    background-color: #fdf5e6;
    box-shadow: 0em 0em 2em 0em rgba(0, 0, 0, 0.7);
    z-index: 10;
}

.secondary-content {
    position: relative;
    padding: 2em 0em;
    color: #ffffff;
    background-color: #016F45;
    z-index: 5;
}


#logo-layer{
    position: absolute;
    width: 100%;
    height: 70%;
}

#logo {
    /*centers the logo and scales ist based on the given width*/
    height: 100%;

    /*image props*/
    background-image: url("../pics/pub/graphics/logo_transparent.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
}

/*----------------------------------------------------------*/
/*BRANDS*/
/*----------------------------------------------------------*/
#brands{
    padding: 2em 0em;
}

.brand-box {
    padding: 1em;
}

.beermat{
    width: 100%;
    height: 100%;
    padding: 0.5em;
    border-radius: 1em;
    /* Background pattern from Toptal Subtle Patterns
    https://www.toptal.com/designers/subtlepatterns/*/
    background-image: url(../pics/pub/graphics/paper3.jpg);
    background-size: 230%;
    box-shadow: 0.2em 0.2em 0.4em 0em rgba(0, 0, 0, 0.5);
}

.beermat-border{
    height: 100%;
    padding: 1.0em;
    border-radius: 1em;
    border-color: goldenrod;
    border-width: 2px;
    border-style: solid;
}

.brand {
    width: 100%;
    height: 100%;
    margin: auto;
    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.heineken {
    background-image: url(../pics/brands/heineken.png);
}

.guinness {
    background-image: url(../pics/brands/guinness.png);
}

.farny {
    background-image: url(../pics/brands/farny.png);
}

.kilkenny {
    background-image: url(../pics/brands/kilkenny2.png);
}

.traub {
    background-image: url(../pics/brands/traup.png);
}

.strongbow {
    background-image: url(../pics/brands/strongbow.png);
}

/*----------------------------------------------------------*/
/*MENU*/
/*----------------------------------------------------------*/
#menu-layer{
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 30;
}

#menu-bar{
    top: 0;
    position: sticky;
    width: 100%;
    background-color: black;
    background-color: #016F45;
    box-shadow: 0em 0em 2em 0em rgba(0, 0, 0, 1);
    z-index: 30;
}

.menu-element{
    text-align: center;
    padding: 0.5em;
    margin: 0;
}

#adress-info{
    margin-top: 2em;
}


/*----------------------------------------------------------*/
/*IMAGES*/
/*----------------------------------------------------------*/
.bgpic-outside-front { background-image: url(../pics/pub/images/largeDevice/outside/front.jpg); }
.bgpic-outside-logo { background-image: url(../pics/pub/images/largeDevice/outside/logo.jpg); }
.bgpic-outside-side { background-image: url(../pics/pub/images/largeDevice/outside/side.jpg); }

.bgpic-food-bbqburger { background-image: url(../pics/pub/images/largeDevice/food/bbqburger.jpg); }
.bgpic-food-burger { background-image: url(../pics/pub/images/largeDevice/food/burger.jpg); }
.bgpic-food-club { background-image: url(../pics/pub/images/largeDevice/food/clubsandwich.jpg); }
.bgpic-food-fish { background-image: url(../pics/pub/images/largeDevice/food/fish.jpg); }
.bgpic-food-pubspecial { background-image: url(../pics/pub/images/largeDevice/food/irishpubspecial.jpg); }
.bgpic-food-pommes { background-image: url(../pics/pub/images/largeDevice/food/pommes.jpg); }
.bgpic-food-toastedspecial { background-image: url(../pics/pub/images/largeDevice/food/toastedspecial.jpg); }
.bgpic-food-wings { background-image: url(../pics/pub/images/largeDevice/food/wings.jpg); }

.bgpic-up-bar1 { background-image: url(../pics/pub/images/largeDevice/upstairs/bar1.jpg); }
.bgpic-up-bar2 { background-image: url(../pics/pub/images/largeDevice/upstairs/bar2.jpg); }
.bgpic-up-bar3 { background-image: url(../pics/pub/images/largeDevice/upstairs/bar3.jpg); }
.bgpic-up-bar4 { background-image: url(../pics/pub/images/largeDevice/upstairs/bar4.jpg); }
.bgpic-up-entrance1 { background-image: url(../pics/pub/images/largeDevice/upstairs/entrance1.jpg); }
.bgpic-up-entrance2 { background-image: url(../pics/pub/images/largeDevice/upstairs/entrance2.jpg); }
.bgpic-up-furnace { background-image: url(../pics/pub/images/largeDevice/upstairs/furnace.jpg); }
.bgpic-up-room1 { background-image: url(../pics/pub/images/largeDevice/upstairs/room1.jpg); }
.bgpic-up-room2 { background-image: url(../pics/pub/images/largeDevice/upstairs/room2.jpg); }

.bgpic-cellar-bar1 { background-image: url(../pics/pub/images/largeDevice/cellar/bar1.jpg); }
.bgpic-cellar-bar2 { background-image: url(../pics/pub/images/largeDevice/cellar/bar2.jpg); }
.bgpic-cellar-bar3 { background-image: url(../pics/pub/images/largeDevice/cellar/bar3.jpg); }
.bgpic-cellar-bar4 { background-image: url(../pics/pub/images/largeDevice/cellar/bar4.jpg); }
.bgpic-cellar-longtable1 { background-image: url(../pics/pub/images/largeDevice/cellar/longtable1.jpg); }
.bgpic-cellar-longtable2 { background-image: url(../pics/pub/images/largeDevice/cellar/longtable2.jpg); }
.bgpic-cellar-longtable3 { background-image: url(../pics/pub/images/largeDevice/cellar/longtable3.jpg); }
.bgpic-cellar-room1 { background-image: url(../pics/pub/images/largeDevice/cellar/room1.jpg); }
.bgpic-cellar-room2 { background-image: url(../pics/pub/images/largeDevice/cellar/room2.jpg); }
.bgpic-cellar-stage1 { background-image: url(../pics/pub/images/largeDevice/cellar/stage.jpg); }
.bgpic-cellar-stage2 { background-image: url(../pics/pub/images/largeDevice/cellar/stage2.jpg); }
.bgpic-cellar-stairs { background-image: url(../pics/pub/images/largeDevice/cellar/stairs.jpg); }

@media only screen and (max-width: 576px) {
    .bgpic-outside-front { background-image: url(../pics/pub/images/smallDevice/outside/front.jpg); }
    .bgpic-outside-logo { background-image: url(../pics/pub/images/smallDevice/outside/logo.jpg); }
    .bgpic-outside-side { background-image: url(../pics/pub/images/smallDevice/outside/side.jpg); }

    .bgpic-food-bbqburger { background-image: url(../pics/pub/images/smallDevice/food/bbqburger.jpg); }
    .bgpic-food-burger { background-image: url(../pics/pub/images/smallDevice/food/burger.jpg); }
    .bgpic-food-club { background-image: url(../pics/pub/images/smallDevice/food/clubsandwich.jpg); }
    .bgpic-food-fish { background-image: url(../pics/pub/images/smallDevice/food/fish.jpg); }
    .bgpic-food-pubspecial { background-image: url(../pics/pub/images/smallDevice/food/irishpubspecial.jpg); }
    .bgpic-food-pommes { background-image: url(../pics/pub/images/smallDevice/food/pommes.jpg); }
    .bgpic-food-toastedspecial { background-image: url(../pics/pub/images/smallDevice/food/toastedspecial.jpg); }
    .bgpic-food-wings { background-image: url(../pics/pub/images/smallDevice/food/wings.jpg); }

    .bgpic-up-bar1 { background-image: url(../pics/pub/images/smallDevice/upstairs/bar1.jpg); }
    .bgpic-up-bar2 { background-image: url(../pics/pub/images/smallDevice/upstairs/bar2.jpg); }
    .bgpic-up-bar3 { background-image: url(../pics/pub/images/smallDevice/upstairs/bar3.jpg); }
    .bgpic-up-bar4 { background-image: url(../pics/pub/images/smallDevice/upstairs/bar4.jpg); }
    .bgpic-up-entrance1 { background-image: url(../pics/pub/images/smallDevice/upstairs/entrance1.jpg); }
    .bgpic-up-entrance2 { background-image: url(../pics/pub/images/smallDevice/upstairs/entrance2.jpg); }
    .bgpic-up-furnace { background-image: url(../pics/pub/images/smallDevice/upstairs/furnace.jpg); }
    .bgpic-up-room1 { background-image: url(../pics/pub/images/smallDevice/upstairs/room1.jpg); }
    .bgpic-up-room2 { background-image: url(../pics/pub/images/smallDevice/upstairs/room2.jpg); }

    .bgpic-cellar-bar1 { background-image: url(../pics/pub/images/smallDevice/cellar/bar1.jpg); }
    .bgpic-cellar-bar2 { background-image: url(../pics/pub/images/smallDevice/cellar/bar2.jpg); }
    .bgpic-cellar-bar3 { background-image: url(../pics/pub/images/smallDevice/cellar/bar3.jpg); }
    .bgpic-cellar-bar4 { background-image: url(../pics/pub/images/smallDevice/cellar/bar4.jpg); }
    .bgpic-cellar-longtable1 { background-image: url(../pics/pub/images/smallDevice/cellar/longtable1.jpg); }
    .bgpic-cellar-longtable2 { background-image: url(../pics/pub/images/smallDevice/cellar/longtable2.jpg); }
    .bgpic-cellar-longtable3 { background-image: url(../pics/pub/images/smallDevice/cellar/longtable3.jpg); }
    .bgpic-cellar-room1 { background-image: url(../pics/pub/images/smallDevice/cellar/room1.jpg); }
    .bgpic-cellar-room2 { background-image: url(../pics/pub/images/smallDevice/cellar/room2.jpg); }
    .bgpic-cellar-stage1 { background-image: url(../pics/pub/images/smallDevice/cellar/stage.jpg); }
    .bgpic-cellar-stage2 { background-image: url(../pics/pub/images/smallDevice/cellar/stage2.jpg); }
    .bgpic-cellar-stairs { background-image: url(../pics/pub/images/smallDevice/cellar/stairs.jpg); }
}