* {
    box-sizing: border-box;
}

body {
    /*font-family: GoldenNautilus, Arial, Helvetica, sans-serif;*/
    font-family: 'Barlow Condensed', sans-serif;
    color: #ffffff;
    background-color: #000000;
}

/* Style the header */
header {
    background-color: #000;
    text-align: center;
    font-size: 5px;
    color: white;
    height: 20vh;
}

.warning{
    color: red;
}

#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 120px;
    height: 120px;
    margin: -76px 0 0 -76px;
    border: 10px solid #ffffff;
    border-radius: 50%;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

    #loader div {
        position: absolute;
        top: 48px;
        left: -6px;
        height: 3px;
        border-radius: 2px;
    }
#star_1 {
    transform: rotate(0deg) translateY(18px);
    background: #ffffff;
    width: 110px;
}

#star_2 {
    transform: rotate(-288deg) translateY(18px);
    background: #ffffff;
    width: 110px;
}

#star_3 {
    transform: rotate(216deg) translateY(18px);
    background: #ffffff;
    width: 110px;
}

#star_4 {
    transform: rotate(288deg) translateY(18px);
    background: #ffffff;
    width: 110px;
}

#star_5 {
    transform: rotate(-216deg) translateY(18px);
    background: #ffffff;
    width: 110px;
}


@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}



/* Add a black background color to the top navigation */
.topnav {
    padding-left: calc(50vw - 20vh - 325px);
    background-color: #000;
    overflow: hidden;
}

    /* Style the links inside the navigation bar */
    .topnav a {
        float: left;
        display: block;
        text-align: center;
        text-decoration: none;
        color: white;
        background-color: #000;
        height: calc(20vh - 10px);
    }

        /* Change the color of links on hover */
        .topnav a.toplink:hover {
            background-color: #333;
            color: #EEE;
        }
        /* Change the color of links on hover */
        .topnav a.toplink2:hover {
            background-color: #333;
            color: #EEE;
        }

        /* Add a color to the links */
        .topnav a.toplink {
            padding-top: 10vh;
            text-align: center;
            font-size: 16px;
            width: calc((100% - 38vh) / 8);
            max-width: 75px;
        }
        /* Add a color to the links */
        .topnav a.toplink2 {
            padding-top: 10vh;
            text-align: center;
            font-size: 16px;
            width: calc((100% - 38vh) / 16);
            max-width: 75px;
        }

.en {
    font-size: 16px;
    padding-left: 0px;
}

.jp {
    font-size: 12px;
    padding-left: 0px;
}

.lang_en .jp {
    display: none;
}

.lang_ja .en {
    display: none;
}

/* Style the tab */
.tab {
    overflow: hidden;
    background-color: #00000080;
}

    /* Style the buttons that are used to open the tab content */
    .tab button {
        background-color: #000;
        text-align: center;
        text-decoration: none;
        color: white;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
    }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #333;
            color: #EEE;
        }

        /* Create an active/current tablink class */
        .tab button.active {
            background-color: #222;
        }

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* Hide the link that should open and close the topnav on small screens */

.topnav a.logo_small {
    display: none;
}

.topnav a.logo_small2 {
    display: none;
    height: 2.5vh;
}

.topnav .icon {
    font-size: 35px;
    display: none;
}

.album {
    clear: left;
    display: block;
    width: 100%;
}
.albumdescr {
    clear: left;
    display: block;
    width: 100%;
}
.albumcover {
    padding-left: 10px;
    float: left;
    display: block;
    width: 40%;
}

.tracklist {
    padding-left: 10px;
    float: left;
    display: block;
    width: 55%;
}

.frame_content {
    display: -webkit-flex;
    display: flex;
}
.barbleft {
    width: 80px;
    height: 25.6px;
    padding-left: 10px;
    padding-right: 10px;
}
.date_label {
}

.barbright {
    width: 100%;
    height: 25.6px;
    padding-left: 10px;
    padding-right: 10px;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.live_content, .flyer, .map {
    text-align: center;
    padding: 5px;
}

.news_content, .music_content, .band_content {
    padding-left: 10px;
}
/* Container for flexboxes */
section {
    display: -webkit-flex;
    display: flex;
    height: 70vh;
}
    /* Style the content */
    article {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: #222;
    padding: 10px;
}
.mainframe {
    width: 100%;
    height: 100%;
}

.sns_container {
    padding: 0px;
    width: 270px;
    height: 70vh;
    background-color: black;
    text-align: center;
}

.fb-page, .twit-page {
    width: 250px;
    height: 250px;
    background-color: black;
    padding: 0px;
}

label {
    padding-top: 10px;
}

/* Style the footer */
footer {
    background-color: #111;
    padding: 10px;
    text-align: center;
    color: white;
    height: 5vh;
}
/* Change the color of links on hover */
.bottomnav a.bottomlink img:hover, .topnav a.logo_small2 img:hover {
    -webkit-filter: sepia(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: sepia(100%); /* FF 35+ */
}


/* Style the button that is used to open and close the collapsible content */
.collapsible {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 5px;
    width: 20vw;
    min-width: 75px;
    border: solid;
    text-align: center;
    outline: none;
    font-size: 15px;
}
.reservebut {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 5px;
    width: 10vw;
    min-width: 100px;
    border: solid;
    text-align: center;
    outline: none;
    font-size: 15px;
}

/* Style the button that is used to open and close the collapsible content */
.membercollapsible {
    width:100%;
}

    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover .reservebut:hover {
    background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #00000000;
}

/* Style the collapsible content. Note: hidden by default */
.membercontent {
    width: 100%;
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #00000000;
    text-align: center;
}
    .membercontent.p {
        text-align: center;
    }

.bandcontent {
    width: 100%;
    padding: 0 18px;
    overflow: hidden;
    background-color: #00000000;
    text-align: center;
}

    .bandcontent.p {
        text-align: center;
    }

.membercontent2 {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #00000000;
    text-align: center;
}
    .membercontent2.p {
        text-align: center;
    }

.membercontainter {
    display: inline-block;
    width: 30vw;
    vertical-align: top;
    text-align: center;
}
.photo_content {
    display: inline-block;
    width: 20vw;
}

.memberpic {
    width: 100%;
}

.bandcontainter {
    display: inline-block;
    width: 100vw;
    vertical-align: top;
    text-align: center;
}


.gallery_picture {
    display: inline-block;
    justify-content: center;
    width: auto;
    height: 150px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    border: none;
    overflow: hidden;
}
.gallery_picture:hover {
    opacity: 0.7;


}

    



.pupimg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

    .pupimg:hover {
        opacity: 0.7;
    }



/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Add Animation */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

    .close:hover,
    .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}


/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 650px) {
    section {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    .membercontainter {
        width: calc(100vw - 20px);
    }
    .memberpic {
        width: 50%;
    }


    .music_content {
        padding-left: 0px;
        text-align: center;
    }

    .albumcover.albumcover {
        margin-left: 30%;
        margin-right: 30%;
        padding-left: 0;
        width: 40%;
    }

    .tracklist {
        padding-left: 0px;
        text-align: center;
        display: inline;
        width: 100%;
    }

}

/* When the screen is less than 600 pixels wide, hide all links, Show the link that contains should open and close the topnav */
@media screen and (max-width: 650px) {
    .topnav {
        padding-left: calc(50vw - 19.25vh);
    }

        .topnav a:not(.logo_small, logo_small2) {
            display: none;
            padding: 10px;
            text-align: center;
            width: auto;
            height: auto;
            max-width: none;
        }

        .topnav a.logo_small {
            text-align: center;
            display: block;
        }

        .topnav a.icon {
            float: right;
            display: block;
            padding-top: 5vh;
            height: calc(20vh - 10px);
        }


    .sns_container {
        display: none;
    }

    .collapsible {
        width: 40vw;
    }

}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 650px) {
    .topnav.responsive {
        position: relative;
        padding-left: 0px;
    }

        .topnav.responsive a.icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a:not(.logo, logo_small2) {
            float: none;
            display: block;
        }

        .topnav.responsive a.logo_small2 {
            width: 50vw;
            height: 3.5vh;
            padding: 0px;
            display: inline;
        }

}