body {
	background: url("img/bg.gif") no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;    background-color: white;
	font-family: "proxima-soft",sans-serif;
	font-style: normal;
	font-weight: 200;
	margin: 0;
	font-size: 12px;
	}

a {
	cursor: pointer;
	}

a:link {
	color: black;
	text-decoration: none;
	}

a:visited{color: black; text-decoration: none;}
a:active{color: black; text-decoration: none;}
a:hover{color: black; text-decoration: none;}

img {
	width: 100%;
	height: auto;
	max-width: 1500px;
	}

#shell {
	width: auto;
	height: auto;
	margin: 0;
	}

#container {
	margin: 10px 0px 10px 160px;
	width: auto;
	height: auto;  
	}

#sidenav {
	float: left;
	width: 150px;
	height:100%;
	margin: 0;
	position: fixed;
	top: 0;
	}

ul {
	list-style: none;
	text-decoration: none;
	margin: 0;
	padding: 0;
	text-decoration: none;
	}

li {
	margin: 0;
	padding: 0;
	}

#banner {
	background-color: white;
	float: left;
	width: 150px;
	height: 90px;
	margin: 0;
	text-align: center;
	vertical-align: middle;
	color: #333;
	padding-top: 55px;
	opacity: 1;
	-webkit-transition: .4s ease-in-out opacity;
	-moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
    line-height: 18px;
	}

#banner:hover {
	background-color: white;
	float: left;
	width: 150px;
	height: 90px;
	margin: 0;
	padding-top: 55px;
	text-align: center;
	vertical-align: middle;
	color: #333;
	opacity: .25;
    line-height: 18px;
	}

#name {
	text-align: center;
	vertical-align: middle;
	color: #333;
	opacity: 1;
	-webkit-transition: .4s ease-in-out opacity;
	-moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
    font-family: "rift-soft",sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	}
	
#name:hover {
	text-align: center;
	vertical-align: middle;
	color: #333;
	opacity: .25;
	}
	
#roles {
	margin: 0;
	text-align: center;
	vertical-align: middle;
	color: #333;
	padding-bottom: 5px;
	opacity: 1;
	-webkit-transition: .4s ease-in-out opacity;
	-moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
    font-family: "proxima-soft",sans-serif;
	font-style: normal;
	font-weight: 200;
	font-size: 12px;
	}

#roles:hover {
	text-align: center;
	vertical-align: middle;
	color: #333;
	opacity: .25;
	}

.avail {
	background-color: #333;
	color: white;
	float: left;
	width: 150px;
	height: 50px;
	margin: 0;
	text-align: center;
	vertical-align: middle;
	line-height: 50px;
	opacity: 1;
	-webkit-transition: .4s ease-in-out opacity;
	-moz-transition: .4s ease-in-out opacity;
	-o-transition: .4s ease-in-out opacity;
	transition: .4s ease-in-out opacity;
	font-family: "proxima-soft",sans-serif;
	font-style: normal;
	font-weight: 200;
	}

.avail:hover {
	float: left;
	width: 150px;
	height: 50px;
	margin: 0;
	text-align: center;
	vertical-align: middle;
	line-height: 50px;
	opacity: .25;
	}
	
.unavail {
	background-color: red;
	color: maroon;
	float: left;
	width: 150px;
	height: 50px;
	margin: 0;
	text-align: center;
	vertical-align: middle;
	line-height: 50px;
	opacity: 1;
	-webkit-transition: .4s ease-in-out opacity;
	-moz-transition: .4s ease-in-out opacity;
	-o-transition: .4s ease-in-out opacity;
	transition: .4s ease-in-out opacity;
	font-family: "proxima-soft",sans-serif;
	font-style: normal;
	font-weight: 200;
	}

.unavail:hover {
	float: left;
	width: 150px;
	height: 50px;
	margin: 0;
	text-align: center;
	vertical-align: middle;
	line-height: 50px;
	opacity: .25;
	}

.info {
	width: 280px;
	padding: 5px 0 10px 0;
	}

.info a {
	text-decoration: none;
	}

.photo {
	margin: 0 10px 10px 0;
	height: auto;
	width: 300px;
	opacity: 1;
	-webkit-transition: .4s ease-in-out opacity;
	-moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
    float: left;
	}

.photo:hover {
	opacity: .5;
	transition: opacity .4s ease-in-out;
	-moz-transition: opacity .4s ease-in-out;
	-webkit-transition: opacity .4s ease-in-out;
	}

#work {
	width: auto;
	height: auto;
	margin: 10px 10px 10px 160px;
	max-width: 1000px;
	}

#work img {
	width: 100%;
	height: auto;
	padding-bottom: 10px;
	}

#work a:link {
	text-decoration: underline;
	}
	
#work a:hover {
	text-decoration: none;
	}
	
#work a:visited {
	text-decoration: underline;
}

#bio {
	width: auto;
	height: auto;
	margin: 10px 10px 10px 160px;
	max-width: 600px;
	}

#bio li {
	display: inline;
	padding-right: 8px;
}

#bio a:link {
	color: #666;
	text-decoration: underline;
	}

#bio a:hover {
	text-decoration: none;
	}
	
#bio a:visited {
	color: #666;
	text-decoration: underline;
	}

#summary {
	width: auto;
	height: auto;
    margin: 10px 10px 10px 160px;
    max-width: 920px;
	}
	
#summary a:link {
	text-decoration: underline;
	}

#summary a:hover {
	text-decoration: none;
	}
	
#summary a:visited {
	text-decoration: underline;
}

#randomz {
	width: auto;
	max-width: 1000px;
	height: auto;
	margin: 10px 10px 10px 160px;
	}

#randomz img {
	max-width: 1000px;
	height: auto;
	padding-bottom: 10px;
	float: left;
	}

#randomz a:link {
	text-decoration: underline;
	}
	
#randomz a:hover {
	text-decoration: none;
	}
	
#randomz a:visited {
	text-decoration: underline;
}

.drakeheadlines {
	font-family: "rift-soft",sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 14px;
	color: #333;
}

.bodycopy {
	font-family: "proxima-soft",sans-serif;
	font-style: normal;
	font-weight: 200;
	font-size: 12px;
	color: #666;
	line-height: 16px;
}

.bodysub {
	font-family: "proxima-soft",sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 12px;
	color: #666;
	line-height: 16px;
}

#socialz li {
    padding: 0 10px 0 0;
    float: left;
    font-size: 12px;
    color: #666;
}

#socialz a:link {
	color: #666;
	text-decoration: underline;
    line-height: 18px;
	}

#socialz a:visited{color: #666; text-decoration: none;}
#socialz a:active{color: #666; text-decoration: none;}
#socialz a:hover{color: #666; text-decoration: none;}

#socialside li {
    padding: 0;
    float: left;
    margin: 5px -30px 0 50px;
    font-size: 16px;
    color: #999;
}

#socialside a:link {
	color: #333;
	text-decoration: none;
	opacity: 1;
	-webkit-transition: .4s ease-in-out opacity;
	-moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
    line-height: 14px;
	}

#socialside a:visited{color: #333; text-decoration: none;}
#socialside a:active{color: #333; text-decoration: none;}
#socialside a:hover{color: #333; text-decoration: none; opacity: .25;}

/* Generous Sliders*/

#genrs_slider_1 {
	margin-right: 10px;
    margin-bottom: 10px;
    width: 300px;
    height: auto;
}

#genrs_slider_2 {
	margin-right: 10px;
    margin-bottom: 10px;
    width: 300px;
    height: auto;
}

#genrs_slider_3 {
	margin-right: 10px;
    margin-bottom: 10px;
    width: 300px;
    height: auto;
}

#genrs_slider_4 {
	margin-right: 10px;
    margin-bottom: 10px;
    width: 300px;
    height: auto;
}

#genrs_slider_5 {
	margin-right: 10px;
    margin-bottom: 10px;
    width: 300px;
    height: auto;
}

/* iPhone 6 */

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) {

#container {
    margin: 290px 0px 0 0;
    width: auto;
    height: auto;
}

#sidenav {
    position: fixed;
    top: 0;
    z-index: 1;
}

#name {
    text-align: center;
    vertical-align: middle;
    color: #333;
    opacity: 1;
    -webkit-transition: .4s ease-in-out opacity;
    -moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
    font-family: "rift-soft",sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 40px;
}

.photo {
    margin: 0 0 20px 20px;
    height: auto;
    width: 47%;
    opacity: 1;
    -webkit-transition: .4s ease-in-out opacity;
    -moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
    float: left;
}

#banner {
    background-color: white;
    float: left;
    width: 100%;
    height: 122px;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    color: #333;
    padding-top: 48px;
    opacity: 1;
    -webkit-transition: .4s ease-in-out opacity;
    -moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
    line-height: 44px;
    position: fixed;
}

#banner:hover {
    background-color: white;
    float: left;
    width: 100%;
    height: 122px;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    color: #333;
    padding-top: 48px;
    opacity: 1;
    -webkit-transition: .4s ease-in-out opacity;
    -moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
    line-height: 44px;
    position: fixed;
}

.avail {
    background-color: #333;
    color: white;
    float: left;
    width: 100%;
    height: 100px;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    line-height: 100px;
    opacity: 1;
    -webkit-transition: .4s ease-in-out opacity;
    -moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
    font-family: "proxima-soft",sans-serif;
    font-style: normal;
    font-weight: 200;
    position: fixed;
    font-size: 32px;
    margin-top: 170px;
}

.avail:hover {
    background-color: #333;
    color: white;
    float: left;
    width: 100%;
    height: 100px;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    line-height: 100px;
    opacity: 1;
    -webkit-transition: .4s ease-in-out opacity;
    -moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
    font-family: "proxima-soft",sans-serif;
    font-style: normal;
    font-weight: 200;
    position: fixed;
    font-size: 32px;
    margin-top: 170px;
}


#roles {
    margin: 0;
    text-align: center;
    vertical-align: middle;
    color: #333;
    padding-bottom: 5px;
    opacity: 1;
    -webkit-transition: .4s ease-in-out opacity;
    -moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
    font-family: "proxima-soft",sans-serif;
    font-style: normal;
    font-weight: 200;
    font-size: 32px;
}

#roles:hover {
    margin: 0;
    text-align: center;
    vertical-align: middle;
    color: #333;
    padding-bottom: 5px;
    opacity: .25;
    -webkit-transition: .4s ease-in-out opacity;
    -moz-transition: .4s ease-in-out opacity;
    -o-transition: .4s ease-in-out opacity;
    transition: .4s ease-in-out opacity;
    font-family: "proxima-soft",sans-serif;
    font-style: normal;
    font-weight: 200;
    font-size: 32px;
}

#socialside {
	display: none;
}

.info {
    width: 100%;
    padding: 20px 0 10px 0;
    text-align: center;
}

.drakeheadlines {
    font-family: "rift-soft",sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 40px;
    color: #333;
}

.bodycopy {
    font-family: "proxima-soft",sans-serif;
    font-style: normal;
    font-weight: 200;
    font-size: 32px;
    color: #666;
    line-height: 35px;
}

#summary {
    width: 90%;
    height: auto;
    margin: 300px 10px 10px 50px;
    text-align: center;
}

#bio {
    width: 90%;
    height: auto;
    margin: 300px 10px 10px 50px;
    text-align: center;
    max-width: 90%;
}


#work {
    width: 95%;
    height: auto;
    margin: 40px 0 20px 30px;
    text-align: center;
}

#randomz {
    width: 95%;
    height: auto;
    margin: 40px 0 20px 26px;
    text-align: center;
}

/* Generous Sliders*/

#genrs_slider_1 {
	margin-right: 10px;
    margin-bottom: 10px;
    width: 50%;
    height: auto;
    z-index: 0;
}

#genrs_slider_2 {
	margin-right: 10px;
    margin-bottom: 10px;
    width: 50%;
    height: auto;
    z-index: 0;
}

#genrs_slider_3 {
	margin-right: 10px;
    margin-bottom: 10px;
    width: 50%;
    height: auto;
    z-index: 0;
}

#genrs_slider_4 {
	margin-right: 10px;
    margin-bottom: 10px;
    width: 50%;
    height: auto;
    z-index: 0;
}

#genrs_slider_5 {
	margin-right: 10px;
    margin-bottom: 10px;
    width: 50%;
    height: auto;
    z-index: 0;
}


#socialz li {
    padding: 10px 37px 0 0;
    font-size: 32px;
    color: #666;
    margin-left: 25px;
}

#socialz a:link {
	color: #666;
	text-decoration: underline;
    line-height: 18px;
}

#socialz a:visited{color: #666; text-decoration: none;}
#socialz a:active{color: #666; text-decoration: none;}
#socialz a:hover{color: #666; text-decoration: none;}

.info {
    width: 100%;
    padding: 15px 0 10px 0;
    text-align: center;
}



}