@font-face
{
    font-family: alef;
    src: url(fonts/alef/alef-regular.ttf);
    font-weight : normal;
}

@font-face
{
    font-family: alef;
    src: url(fonts/alef/alef-bold.ttf);
    font-weight : bold;
}

html{
    overflow-y: scroll;
}

        body{
            padding:0px;
            margin:0px;
            font-family: 'Open Sans', sans-serif;
            font-size:14px;
            color:#272727;
            background-color:black;
        }

.upcoming-shows-button:hover,
.upcoming-shows-button {
    float: left;
    color: white;
    background-color: #f22f40;
    font-family: 'Roboto Slab', serif;
    font-size:20px;
    height:50px;
    padding:11px;
    box-sizing:border-box;
    text-decoration:none;
}

.normal .block{
    min-height:100vh;
}

.normal .data {
    max-width: 530px;
    margin: auto;
    text-align: left;
    padding: 20px;
}

        .topmenu {
            display:none;
        }

        .topmenu > div:hover::before{
            content : "";
            position:absolute;
            left:0px;
            right:0px;
            bottom:0px;
            top:0px;
            background-color:rgba(255,255,255,0.5);
        }



        .topmenu img{
            width:100%;
        }

        .menu-button{
            cursor:pointer;
        }

        .normal .data{
            padding-top:60px;
        }

        .shows table{
            width:100%;
            margin:auto;
        }

        .shows{
            color:#fefefe;
            font-family: alef;
        }

        .shows th,
        .shows td
        {
            text-align:center;
        }

        .normal h1{
            color:#ffffff;
            margin-bottom:20px;
        }

        .shows h1{

            font-family: alef;
        }

        .shows tr td:first-child{
            color:#5ecc72;
        }

        .shows a,.shows a:hover{
            color:#5ecc72;
            text-decoration:underline;
        }

        .topmenu .text{
            position:absolute;
            bottom:11px;
            left:15px;
            right:15px;
            text-align:left;
            color:white;
            font-size:20px;
            text-shadow:1px 1px 1px 1px black;
            display:none;
            font-family: 'Roboto Slab', serif;
        }

        .maindiv-text:hover{
            border:1px solid white;
            padding:5px;
            padding-right:10px;
            padding-left:10px;
        }

        .popup{
            position:fixed;
            left:0px;
            right:0px;
            bottom:0px;
            top:0px;
            border:0px solid red;
            z-index:99999;
            background-color:rgba(0,0,0,0.8);
        }

        .popup-close{
            cursor:pointer;
            color:white;
            font-size:18px;
        }

        .popup-close img{
            margin-left:5px;
        }
        
        .black{
            color:#272727;
        }

        a,
        a:hover{
            color:#272727;
        }

        .part{
            width:100%;
            background-image:url(images/background_scratch.png);
            background-size:cover;
            box-sizing:border-box;
        }

        .row{
            margin:0px;
        }

        .row > div{
            height:100%;
            padding:0px;
        }

        .block{
            border:0px solid red;
            height:100%;
        }

        .divbg{
            background-size:cover;
        }

        .text-container{

            display:table;

        }

        .padder{
            padding-left:10px;
            padding-right:10px;
            padding-bottom:10px;
        }

        .text{
            display:table-cell;
            vertical-align:middle;
        }

        h1{
            font-family: 'Roboto Slab', serif;
            font-weight:500;
        }


        h2{
            font-family: 'Roboto Slab', serif;
            font-weight:500;
            color:#272727;
        }

        h3{
            font-family: 'Roboto Slab', serif;
            color:#272727;
        }

        [data-goto]{
            cursor:pointer;
        }

    h1{
        font-size:18px;
    }

    h2{
        font-size:18px;
        line-height:24px;
    }
    h3{
        font-size:14px;
        line-height:20px;
    }

    .img-inline{
        width:100%;
    }

    a.bottom-menu-item:hover{
        color:white;
    }

    .bottom-menu-item{
        display:inline-block;
        margin-right:10px;
        color:white;
        padding-top:10px;
        padding-bottom:10px;
        padding-left:10px;
        padding-right:10px;
    }

    .main-logo{
        max-width:80%;
        margin-top:65px;
    }

@media (min-width: 768px) {

    .topmenu .text{
        display:none;
    }

    .padder{
        padding-left:10%;
        padding-right:10%;
    }

    .text-container{
        height:100vh;
    }

    h1{
        font-size:22px;
    }

    h2{
        font-size:23px;
        line-height:33px;
    }
    h3{
        font-size:18px;
        line-height:28px;
    }

    .block{
        min-height:100vh;
    }


}

@media (min-width: 992px ) {

    .topmenu .text{
        display:block;
        font-size:16px;
    }

    .main-logo{
        max-width:40%;
    }

    [data-goto]{
        display:inline-block;
    }

    .row,
    .part,
    .block{
        min-height:100vh;
    }

    h1{
        font-size:48px;
    }


    h2{
        font-size:26px;
        line-height:36px;
    }
    h3{
        font-size:16px;
        line-height:26px;
    }

}

@media (min-width: 1200px ) {

    .topmenu .text{
        display:block;
        font-size:20px;
    }

    .main-logo{
        max-width:80%;
    }


    h2{
        font-size:36px;
        line-height:46px;
    }
    h3{
        font-size:18px;
        line-height:28px;
    }
}