*{
    font-family:Tahoma, Geneva, Sans-Serif;
    word-break:break-word;
}
body{
    background-color:#000066;
    background-image:url("../images/background.jpg");
    background-attachment:fixed;
    background-size:cover;
    margin:0;
    padding:0;
}
#work img{
    transition:0.2s ease-in-out;
    -ms-transition:0.2s ease-in-out;
    -webkit-transition:0.2s ease-in-out;
    -moz-transition:0.2s ease-in-out;
    -o-transition:0.2s ease-in-out;
    width:200px;
    height:200px;
    opacity:0.75;
}
#work img:hover{
    transition:0.2s ease-in-out;
    -ms-transition:0.2s ease-in-out;
    -webkit-transition:0.2s ease-in-out;
    -moz-transition:0.2s ease-in-out;
    -o-transition:0.2s ease-in-out;
    opacity:1;
}
[id*="-lightbox"]{
    background:rgba(0, 0, 0, 0.8);
    width:100%;
    height:100%;
    margin:0;
    padding:20px;
    position:fixed;
    z-index:500;
    top:0;
    color:#FFFFFF;
    overflow-y:scroll;
}
#close{
    color:#FFFFFF;
    font-weight:400;
    
}
#close:hover{
    text-decoration:underline;
    cursor:pointer;
}
[id*="-lightbox"] img{
    width:33.333333%;
}
[id*="-lb"]{
    transition:0.2s ease-in-out;
    -ms-transition:0.2s ease-in-out;
    -webkit-transition:0.2s ease-in-out;
    -moz-transition:0.2s ease-in-out;
    -o-transition:0.2s ease-in-out;
    opacity:1;
}
[id*="-lb"]:hover{
    opacity:0.75;
    cursor:pointer;
    transition:0.2s ease-in-out;
    -ms-transition:0.2s ease-in-out;
    -webkit-transition:0.2s ease-in-out;
    -moz-transition:0.2s ease-in-out;
    -o-transition:0.2s ease-in-out;
}
img{
    max-width:100%;
}
.quarter{
    float:left;
    width:25%;
}
.third{
    float:left;
    width:33.333333%;
}
.half{
    float:left;
    width:50%;
}
.two-thirds{
    float:left;
    width:66.666666%;
}
.three-quarters{
    float:left;
    width:75%;
}
header{
    color:#FFFFFF;
    font-size:20px;
    padding:30px 0px;
    height:300px;
    text-align:center;
}
#name{
    font-weight:900;
}
#name span{
    font-weight:100;
}
nav{
    padding:20px;
    font-size:20px;
    text-align:center;
    background:#FFFFFF;
    margin-top:160px;
    z-index:150;
    box-shadow:0px 2px 3px rgba(0, 0, 0, 0.4);
}
.nav-scrolled, header{
    position:fixed;
    margin-top:0 !important;
    top:0 !important;
    width:100%;
}
.main-scrolled{
    padding-top:250px !important;
}
.nav-scrolled{
    padding-left:0;
    padding-right:0;
}
nav ul{
    list-style-type:none;
    padding:0;
    margin:0;
}
nav ul li{
    display:inline;
    padding:0px 15px;
}
nav ul li a{
    color:#000000;
    transition:0.2s ease-in-out;
    -ms-transition:0.2s ease-in-out;
    -webkit-transition:0.2s ease-in-out;
    -moz-transition:0.2s ease-in-out;
    -o-transition:0.2s ease-in-out;
}
nav ul li a:hover{
    transition:0.2s ease-in-out;
    -ms-transition:0.2s ease-in-out;
    -webkit-transition:0.2s ease-in-out;
    -moz-transition:0.2s ease-in-out;
    -o-transition:0.2s ease-in-out;
    color:#444444;
    text-decoration:none;
}
nav, #main{
    position:relative;
}
#main{
    background:#DDDDDD;
}
#welcome,#work,#about,#contact{
    padding:0px 50px;
}
h1,h2,h3,h4,h5,h6,p{
    max-width:95%;
    margin-left:2.5%;
}
a{
    text-decoration:none;
    color:blue;
    transition:0.2s ease-in-out;
    -ms-transition:0.2s ease-in-out;
    -webkit-transition:0.2s ease-in-out;
    -moz-transition:0.2s ease-in-out;
    -o-transition:0.2s ease-in-out;
}
a:hover{
    color:#0066ff;
    transition:0.2s ease-in-out;
    -ms-transition:0.2s ease-in-out;
    -webkit-transition:0.2s ease-in-out;
    -moz-transition:0.2s ease-in-out;
    -o-transition:0.2s ease-in-out;
}
.centertext{
    text-align:center !important;
}
.righttext{
    text-align:right !important;
}
.lefttext{
    text-align:left !important;
}
header, nav, #main, #welcome, #work, #about, #contact, footer{
    clear:both;
}
footer{
    background:rgba(0, 0, 0, 0.75);
    color:#FFFFFF;
    text-align:center;
    padding:25px;
}
h1, h2, h3, h4, h5, h6{
    text-align:center;
}
table{
    border:1px solid navy;
    min-width:50%;
    max-width:90%;
    margin:auto;
}
thead{
    background:#FFFFFF;
    text-align:center;
    font-size:1.125em;
}
tbody tr{
    background:#AAAAAA;
}
tbody tr:nth-child(even){
    background:#CCCCCC;
}
td{
    padding:10px;
    border:1px solid navy;
}
#spacer{
    padding:10px;
}
#welcome, #work, #about, #contact{
    padding:20px;
}
#welcome{
    background:transparent;
}
#work{
    background:#999999;
    background-image:url("../images/guitar-reflection-lighter.jpg");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}
#about{
    background:#FEFEFE;
}
#contact{
    background:#DDDDDD;
}
#social{
    background:rgba(0, 0, 0, 0.5);
    text-align:center;
    margin:auto;
    padding:50px 0px;
    background-image:url("../images/bass-jordan.jpg");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}
#social img{
    max-width:10%;
    padding:0 30px;
}
#social img:hover{
    opacity:0.75;
}
#reset{
    clear:both;
    padding:0;
    margin:0;
}
input[type="text"], textarea{
    width:200px;
    text-align:center;
    padding:10px;
}
button, input[type="button"], input[type="submit"]{
    height:50px;
    width:125px;
    padding:5px;
    border:1px solid #000044;
    background:rgba(0, 0, 0, 0.1);
    transition:0.2s ease-in-out;
    -ms-transition:0.2s ease-in-out;
    -webkit-transition:0.2s ease-in-out;
    -moz-transition:0.2s ease-in-out;
    -o-transition:0.2s ease-in-out;
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover{
    border:1px solid #0066ff;
    background:rgba(0, 0, 0, 0.3);
    cursor:pointer;
    transition:0.2s ease-in-out;
    -ms-transition:0.2s ease-in-out;
    -webkit-transition:0.2s ease-in-out;
    -moz-transition:0.2s ease-in-out;
    -o-transition:0.2s ease-in-out;
}
@media screen and (max-width:768px){
    table{
        width:90% !important;
    }
    .third, .quarter{
        width:50% !important;
    }
    .two-thirds, .three-quarters{
        width:100% !important;
    }
}
@media screen and (max-width:600px){
    header{
        font-size:1em;
        padding:40px 0;
    }
}
@media screen and (max-width:480px){
    table{
        width:100% !important;
        font-size:0.85em;
    }
    #social img{
        max-width:15% !important;
        padding:20px !important;
    }
    nav ul li{
        font-size:0.85em;
        padding:0 5px;
    }
    #welcome, #work, #about, #contact{
        padding:20px 10px !important;
    }
    h1, h2, h3, h4, h5, h6, p{
        max-width:98% !important;
        margin-left:1% !important;
    }
    .quarter, .third, .half, .two-thirds, .three-quarters{
        clear:both;
        float:initial;
        width:100% !important;
    }
    p{
        font-size:14px;
    }
}