/* ===== SETUP ===== */

html {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smothing: antialiased !important;
}

body {
    background-color: #3d3d3d;
    background-color: -webkit-radial-gradient(circle, #5d5d5d, #3d3d3d); 
    background-color: -o-radial-gradient(circle,  #5d5d5d, #3d3d3d); 
    background-color: -moz-radial-gradient(circle,  #5d5d5d, #3d3d3d); 
    background-color: radial-gradient(circle,  #5d5d5d, #3d3d3d, #232323);
    margin:0;
    overflow-x:hidden;
}

@font-face {
    font-family: UniversHeader;
    src: url(../fonts/UniversLTStd-BoldCn.otf);
}

@font-face {
    font-family: UniversBody;
    src: url(../fonts/UniversLTStd.otf);
}

p {
    font-family: UniversBody, sans-serif;
    color:#d9d9d9;
    line-height:1.45;
    letter-spacing:.75;
    color:#d9d9d9;
}



h1 {
    font-family: UniversHeader, sans-serif;
    color:#ffa000;
    margin:50 0 20 0;
    //font-variant-caps:small-caps;
}

h2 {
    font-family: UniversHeader, sans-serif;
    color:#ffa000;
    margin:20 0 20 0;
}

a:link {color:#ffa000; text-decoration:none;}
a:hover {color:#b47100;}
a:visited {color:#ffa000;}



.lowlight {
    color:#a8a8a8;
}

.hilight {
    color:white;
}

.wrap {
    margin:auto;
    max-width: 80%;

}

@media only screen and (max-width: 700px){
    .wrap {
        max-width: 90%;
    }
}

@media only screen and (max-width: 500px){
    .wrap {
        max-width:99%;
    }
    #header {
        padding: 5 5 0 5;
    }
}

* {box-sizing: border-box;}

/* ===== HEADER ===== */

#header {
    padding: 12 5 8 5;
    background: black;
    border-bottom-style:solid;
    border-bottom-width: .5px;
    border-color: #ffa000;
    display:inline-block;
    width:100%;
    box-shadow: 0px 0px 50px #000000;
}

#subHeader {
    //background:black;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    display:inline-block;
}

.subheaderwrap {
    margin:auto;
    max-width:80%;
    text-align:left;
}

.subheaderwrap a{
    font-family: UniversBody, sans-serif;
    background-color:black;
    margin:0;
    padding:5;
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px;
}

.subheaderwrap a:hover {
    background-color:#3d3d3d;
}


#headerWrap {
    margin:auto;
    max-width: 95%;
    vertical-align:top;
}

#mdjlogo {
    display:inline-block;
    max-width:150;
    float:left;
}

#headerImage {
    background-image: url('../images/layout/headerImage.jpg');
    background-repeat:no-repeat;
    background-size:auto;
    background-position:top right;
    background-attachment:fixed;
    width: 100%;
    height:270px;
    text-align:right;
    vertical-align:bottom;
    position:relative;
    display:inline-block;
}

.headerItem {
    color:white;
    display:inline;
    position:absolute;
    bottom:0;
    right:0;
    vertical-align: bottom;
    width:100%;
    height:auto;
    text-align:right;
}

.portfolio {
    padding:0;
    margin:0;
    line-height:.45;
    font-family: UniversHeader, sans-serif;
    font-size:200;
    opacity:.20;
}

.namePlate {
    font-family: UniversHeader, sans-serif;
    padding-right:10%;
    margin:0;
    line-height:1.1;
    font-size:55;
    opacity:.9;
    background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,1) 100%);
    background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,1) 100%); 
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,1) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );

}

.jobtitle {
    font-family: UniversHeader, sans-serif;
    font-size:35;
    padding-right:5%;
    margin:0;
    line-height:.4;
    opacity:.70;
    color:#ffa000;
}

@media only screen and (max-width: 960px) and (min-width:501px){
    .portfolio {
        font-size:140;
    }
    
}

@media only screen and (max-width: 500px){
    .headerItem {
        text-align:center;
    }
    .portfolio {
        font-size:68;
        opacity:.80;
        padding:0;
    }
    .namePlate {
        font-size:41.5;
        line-height:1.2;
        padding:3 0 2 0;
        background:rgba(0, 0, 0, 0.75);
    }
    .jobtitle {
        padding-bottom:55;
        padding-right:0;
        font-size:37.5;
        opacity:.85;
        color:#ffa000;
        
    }
    
}
        


/* ===== NAVIGATION ===== */

ul.topnav {
    font-family:UniversHeader, sans-serif;
    display:inline-block;
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    background-color: #000;
    float:right;
}

ul.topnav li {float:left;}

ul.topnav li a {
    display: inline-block;
    color: #ffa000;
    text-align:center;
    padding: 12px 8px 5px 8px;
    text-decoration: none;
    font-size:18px;
    background-color:none;
}

ul.topnav li a:hover {background-color: #3d3d3d;}


/* ==== SLIDE OUT NAV ==== */

#slideoutbutton {
    display:none;
    color:#ffa000;
    padding: 12px 16px 5px 0px;
    font-size:18px;
    float:right;
    
}

.sidenav {
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 5; 
    top: 0;
    right: 0;
    background-color: #111; 
    overflow-x: hidden; 
    padding-top: 60px; 
    transition: 0.3s;
}

/* The navigation menu links */
.sidenav a {
    font-family:UniversHeader, sans-serif;
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #ffa000;
    display: block;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #b47100;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}


/* ==== END SLIDE OUT NAV ==== */


@media screen and (max-width:680px) {
    ul.topnav {
        display:none;
    }
    #slideoutbutton {
        display:inline-block;
        padding: 7px 16px 5px 0px;
    }
    .subheaderwrap {
        max-width:90%;
    }
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}


@media only screen and (max-width: 500px){
    #header {
        padding: 8 0;
    }
    #headerWrap {
        max-width:99%;
    }
    .subheaderwrap {
        max-width:99%;
    }
}

/* ===== WELCOME ===== */

#welcome {
    padding: 12 5 60 5;
    color: #ededed;
    background: black;
    box-shadow: 0px 0px 50px #000000;
}

#welcome p {
    font-family: UniversBody, sans-serif;
    color:#d9d9d9;
    line-height:1.45;
    letter-spacing:.75;
}

/* ===== MY WORK ===== */

#mywork {
    display:inline-block;
    padding: 12 5 60 5;
    color: white;
    text-align:
    
}




.workdesc {
    font-family: UniversHeader, sans-serif;
    font-size:20;
    padding-top:10px;
    margin-bottom:15px;
    width: 100%;
    color:#d0d0d0;
    text-align: center;
    display:none;
}

.responsive {
    margin:0 0;
    padding: 0;
    float: left;
    width: 33%;
}

.workSample {
    margin:0;
    max-width:100%;
    height:auto;
    opacity:.5;
    
    box-shadow: 0px 0px 50px #000000;
}

.workSample:hover {opacity:1;}

@media only screen and (max-width: 960px) and (min-width:501px){
    .responsive {
        width: 49%;
        margin-right:5px;
    }
    .workdesc {
        display:inline-block;
    }
    .workSample {
        opacity:1;
        box-shadow:none;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width:100%;
        margin:0;
    }
    .workdesc {
        display:inline-block;
    }
    .workSample {
        opacity:1;
        box-shadow:none;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}



//#myWork a:link { opacity: .5;}
//#myWork a:hover { opacity:1;}

/* ===== CONTACT FORM ===== */

#contact {
    display:inline-block;
    width:100%;
    background:black;
    box-shadow: 0px 0px 50px #000000;
    color:white;
}

.formEntry {
    
}

.contactMed {
    display:inline-block;
    vertical-align: top;
    width:49%;
}

#contactRight {
    text-align:center;
    width:100%;
    letter-spacing:.75;
}

input, textarea {
    background-color:#535353;
	padding: 10px;
	border: 1px solid #000000;
	width: 100%;
	color: #ffffff;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
    border-radius:10px;
    -moz-border-radius: 10px;
	-webkit-border-radius: 10px;
    opacity: 1;
}

textarea {
	height: 150px;
	max-width: 100%px;
	line-height: 18px;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
    background-color:#696969;
	border-color: 2px solid #ffa000;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;	
}

.form label {
    font-family:universHeader, sans-serif;
    margin-left:0;
	color: #ffa000;
}

.submit input {
	width: 100%; 
	height: 40px;
	background-color: #ff9f00; 
	color: black;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
    cursor:default;
    opacity:.8;
}

.submit input:hover {
    opacity:1;
}

.placeholder {
    font-family:UniversBody, sans-serif;

}

/* ===== SOCIAL MEDIA ===== */

.social {
    display:inline-block;
    max-width:100%;
    padding:10px;
    opacity:.5;
}

.social:hover {
    opacity:1;
}

.contactIconWrap {
    margin-bottom:25px;
    font-family: UniversHeader, sans-serif;
    color:white;
    letter-spacing: .75;
    width:100%;
    vertical-align:middle;
}

.contactIcon {
    margin:0 5;
    width:30px;
    height: auto;
    padding: 0 5;
}

@media only screen and (max-width: 960px) and (min-width:501px){
    .social {
        max-width:19%;
        display:inline-block;
        opacity:.75;
    }
    .contactMed {
        display:block;
        width:100%;
    }
}


@media only screen and (max-width: 500px){
    .social {
        max-width:17%;
        display:inline-block;
        opacity:.75;
    }
    .contactMed {
        display:block;
        width:100%;
    }
}


/* ===== WORK PAGES ===== */

.worknavwrap {
    width:90%;
    margin:auto;
    display:inline-block;
    background: rgba(0, 0, 0, 0.8);
}

ul.worknav {
    font-family:UniversHeader, sans-serif;
    display:inline-block;
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    float:right;
    background:black;
}

ul.worknav li {float:left; text-align:center;}

ul.worknav li a {
    display: inline-block;
    color: #ffa000;
    text-align:center;
    padding: 12px 12px 5px 12px;
    text-decoration: none;
    font-size:18px;
}

ul.worknav li a:hover {background-color: #3d3d3d;}

#subheaderImage {
    background-image: url('../images/layout/headerImage.jpg');
    background-repeat:no-repeat;
    background-size:auto;
    background-position:top right;
    background-attachment:fixed;
    width: 100%;
    height:100px;
    text-align:right;
    vertical-align:bottom;
    position:relative;
    display:inline-block;
    content:"";
}

#work {
    display:inline-block;
    width:100%;
    background:black;
    box-shadow: 0px 0px 50px #000000;
    color:white;
    padding: 0 0 40 0;
}

.workwrap {
    margin:auto;
    max-width: 80%;
}

#workcontainer {
    padding: 50 0 50 0;
    text-align:center;
    max-width:80%;
    background:rgba(0, 0, 0, 0.2);
    margin:auto;
}

.leftimage {
    max-width: 60%;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.5);
    opacity:.8;
    margin-bottom:5px;
}

.leftimagenoshadow {
    box-shadow:none;
}

.leftimage:hover {
    opacity:1;
}

.soloimage {
    display:inline-block;
    max-width: 30%;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.5);
    margin:0px auto 12px auto;
    vertical-align:top;
    opacity:.8;
}

.soloimage:hover {
    opacity:1;
}

.solowrap {
    display:inline-block;
    width:100%;
    vertical-align:top;
    margin-bottom:25px;
}

/*
.leftimage:hover {
    box-shadow: 0px 0px 25px rgba(255, 160, 0, 1);
}
*/

.workleft {
    display:inline-block;
    width:49%;
    vertical-align:top;
    text-align:right;
    padding:10 10 50 0;
}

.workright {
    display:inline-block;
    width:49%;
    vertical-align:top;
    padding:10px;
    text-align:left;
}

.worknav {
    display:inline-block;
    min-width: 20%;
    vertical-align:top;
}

.worknav ul {
    list-style:none;
}

.workdescription {
    font-family:UniversBody, sans-serif;
    max-width:50%;
    background-color: rgba(0, 0, 0, 0.35);
    padding:3 10;
    text-align:left;
}

.workdescriptioncenter {
    font-family:UniversBody, sans-serif;
    max-width:50%;
    margin:20 auto 25 auto;
    background-color: rgba(0, 0, 0, 0.35);
    padding:3 10;
    text-align:center;
}

.workdescriptionsolo {
    font-family:UniversBody, sans-serif;
    max-width:100%;
    margin:25 auto 25 auto;
    background-color: rgba(0, 0, 0, 0.35);
    padding:3 10;
    text-align:center;
}



@media only screen and (max-width: 960px) and (min-width:501px){
    .leftimage {
        max-width:100%;
    }
    .workdescription {
        max-width:100%;
    }
    .workdescriptioncenter {
        max-width:100%;
    }
    
    #workcontainer {
        max-width:90%;
    }
    .soloimage {
        max-width: 75%;
        opacity:1;
    }
}


@media only screen and (max-width: 500px){
    .workleft {
        display:block;
        width:100%;
        padding: 0;
    }
    .workright {
        display:block;
        width:100%;
        margin:0 0 25 0;
        padding:0;
    }
    .workdescription {
        max-width:100%;
        margin:0;
        text-align:center;
    }
    .leftimage {
        max-width:100%;
    }
    .workdescriptioncenter {
        max-width:100%;
    }
    #workcontainer {
        max-width:99%;
    }
    .soloimage {
        max-width:99%;
        opacity:1;
    }
}


/* ===== FOOTER ===== */

#footer {
    font-family: UniversBody, sans-serif;
    padding-top:50px;
    text-align:center;
    display:inline-block;
    color:#c0c0c0;
    width:100%;
    background:black;
    box-shadow: 0px 0px 50px #000;
    
}

#copyright p {
    font-family: UniversHeader, sans-serif;
    opacity:.5;
}

#copyright p:hover {
    opacity:1;
}

.issuuembed {
    width:50%;
    height:50%;
    
}