/* colors 
	dark grey: #282828;
	orange: #ef4136;
*/

/* fonts */
@font-face {
	font-family: openSansBold;
	src: url(../fonts/open_sans/OpenSans-Semibold.ttf);
}

@font-face {
	font-family: openSans;
	src: url(../fonts/open_sans/OpenSans-Light.ttf);
}

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

/* basics */

body {
	font-size: 14pt;
	font-family: openSans, sans-serif;
	color: #282828;
	text-align: left;
	margin: 0 auto;
}

.title {
	text-align: center;
	font-size: 50pt;
	font-family: openSansBold, sans-serif;
	text-transform: uppercase;
}

a {
	text-decoration: none;
}

a:hover {
	transition: .5s;
}

p {
	margin-left: 9%;
	margin-right: 9%;
}

section {
	padding: 1% 0;
}

ul {
	list-style-type: none;
}

/* navigation styles */
.mainnav {
	width: 100%;
	text-align: center;
	font-family: openSansBold;
	margin-top: 4%;
}

.menu{
    list-style-type: none;
    margin: 0 auto;
    padding: 0 0 0 40px;
    overflow: hidden;
}

.menu li {
	display: inline-block;
    margin: 10px 50px 10px 50px;
}

.subnav {
	width: 60%;
	text-align: center;
	margin: auto;
}

#workssubnav {
	width: 60%;
	text-align: center;
	margin: auto;
	color: #fff;
}

#workssubnav a {
	color: #fff;
}

/* home styles */

#home {
	background: #fff url(../media/bg.jpg) no-repeat top left;
	background-attachment: fixed;
	background-size: cover;
	position: left;
	height: 100vh;
	color: #fff;
}

#logo {
	margin: auto;
	display: block;
	padding-top: 75px;
}

#subtitle {
	text-align: center;
	font-size: 35pt;
	font-family: cabana, sans-serif;
	letter-spacing: 10px;
}

#down, #down a {
	display: block;
	margin: 0 auto;
	font-family: cabana;
	text-align: center;
	font-size: 30pt;
	color: #fff;
}

#down a:hover {
	color: #fff;
	opacity: 0.3;
}

/* about styles */

#me {
    width: 15%;
    display: block;
    margin: auto;
    padding: 5px;
}

#about {
	background-color: #fff;
}

a {
	color: #ef4136;
}

a:hover {
	color: #000;
	opacity: 0.3;
}

/* works styles */
#works {
	background: #ef4136;
	color: #fff;
}

#pics {
	text-align: center;
}

#pics img {
	display: inline-block;
	margin: auto;
	margin: .5%;
}

/*extended works styles*/
div.img {
    margin: 0 15%;
    padding: 20px;
    text-align: center;
}

.greydout {
  -webkit-opacity: 0.75;
  -moz-opacity: 0.75;
  opacity: 0.75;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.greydout:hover {
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
}

#arrow {
	margin: 0 0 0 90%;
}

.gpic {
	width: 40%;
    float: left;
    padding: 0;
    margin-right: 5%;
}

.gpic2 {
	width: 60%;
    float: left;
    padding: 0;
    margin-right: 5%;
}

.back {
	color: grey;
	text-decoration: none;
}

.img {
	text-align: justify;
}

.img a {
	display: inline-block;
	vertical-align: center;
}

.thumbnail {
	position: relative;
	width: 200px;
	height: 200px;
	overflow: hidden;
	display: inline-block;
}

.thumbnail img {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 100%;
	width: auto;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.thumbnail img.portrait {
	width: 100%;
	height: auto;
}

.modalDialog {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	opacity: 0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}

.modalDialog:target {
	opacity: 1;
	pointer-events: auto;
}

.modalDialog > div {
	width: auto;
	height: 100%;
	position: relative;
	padding: 5px 20px 13px 20px;
	background: #FFFFFF;
	overflow: auto;
}

.close {
	color: #000000;
	line-height: 25px;
	position: absolute;
	right: 8px;
	text-align: center;
	top: 8px;
	width: 24px;
	text-decoration: none;
	font-size: 2em;
}

.close:hover {
	color: grey;
}

.desc {
	padding: 0;
	text-align: left;
	overflow: auto;
}

.title {
	margin: 2% 0;
}

/* contact styles */
#contact {
	background: #fff;
	text-align: center;
}

#icons img{
	padding: 10px;
}

/* capstone styles */

.cs {
	font-size: 72pt;
	text-align: center;
	margin: 3% 9%;
}

#collab {
	text-align: center;
	font-size: 20pt;
}

#homepagepic {
	width: 75%;
	padding: 5% 13%;
}

/* studio c styles */

#role {
	text-align: center;
	font-style: italic;
}

/* footer styles */
footer {
	display: block;
	color: #fff;
	background-color: #282828;
	padding: 15px 0 15px 15px;
	font-size: 16px;
	margin-top: 4%;
}