@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
h1, h2, h3, h4, h5, h6, a, p, span {
    color: #fff;
}
.address{
    color: #11D1EE; 
    text-decoration: underline;
}
i{
    font-size:16px;
    color:#fff
}
.title{
    display: flex;
    justify-content: left;
}
.navigation{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.current{
    border-bottom: solid 2px;
    display: inline;
    padding-bottom: 3px;
}
.icons{
        display: flex;
        flex-direction: column;
        justify-content: center;
}

@media only screen and (max-width: 600px) {
    .title{
        display: flex;
        justify-content: center;
    }
    .navigation{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .nav{
        display: flex;
        justify-content: center;
    }
    .tabs{
        display: flex;
        justify-content: center;
    }
    .icons{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
}

.main_container{
    display: flex;
    flex-direction: column;

}
.about_container{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items:center;
    padding: 1rem;
}

.band_description{
    width: 50%;
    max-width: 700px;
}

.image_container{
    width: 50%;
    max-width: 700px;
}


.info_container{
    display: flex;
    flex-direction: column;
    
    align-items: center;
    width: 100%;
    padding: 1rem;

}
@media only screen and (max-width: 700px) {
    .about_container{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .band_description{
        width: 100%;
    }
    .image_container {
        width: 100%;
    }
    .info_container{
        align-items: center;
        width: 100%;
        padding: 0rem;
    }
}

.show_list{
    display: flex;
    justify-content: space-around;
}

.show_container{
    display: flex;
    flex-direction: row;
    padding: 2rem;
}
.calendar{
    width: 70px;
    height: 70px;

    background-color:rgb(190, 96, 8);

    font-family: Arial, Helvetica, sans-serif;
}
.show_info{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.video_container {
    width: 560px; 
    height: 315px; 

    padding: 1rem;
}

.demo_list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.demo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    height: auto;
}

@media only screen and (max-width: 700px) {
    .video_container {
        width: 300px; 
        height: 160px; 
    
        padding: 1rem;
    }
    .demo{
        width: 90%;
    }
}

.song_list{
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 1rem;
}

.song{
    text-align: center;
}
.song_key{
    border-bottom: solid 2px;
    display: inline;
    color: rgb(190, 96, 8);
}




input, textarea{
    font-size: 14px;
    border-style: solid;
    border-radius: 0fr;
}
input:focus, textarea:focus {
    outline: none;
}
textarea{
    width: 500px;
}
button{
    background: none;
    border-color: #fff;
}

._12 {
    font-size: 1.2em;
}
._14 {
    font-size: 1.4em;
}
ul {
    padding:0;
    list-style: none;
}
.footer-social-icons {
    width: 350px;
    display:block;
    margin: 0 auto;
}
.social-icon {
    color: #fff;
}
ul.social-icons {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
}
.social-icons li {
    vertical-align: top;
    display: inline;
    height: 100px;
    padding: 5px;
}
.social-icons a {
    color: #fff;
    text-decoration: none;
}
.fa-facebook {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
    display: none;
}
.fa-facebook:hover {
    background-color: #3d5b99;
}
.fa-twitter {
    padding:10px 12px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-twitter:hover {
    background-color: #00aced;
}
.fa-instagram {
    padding:10px 12px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-instagram:hover {
    background-color: #760b85;
}
.fa-youtube {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-youtube:hover {
    background-color: #e64a41;
}