/*** Illustrious 1.0 ***/

html{height:100%;width:100%;}
body {
	background: url(../img/background.jpg) repeat #000000;
}

p, h1, h2, h3, h4, li, input, label, textarea, button {
	font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a {
	color: #7A9EC8;
	text-decoration: none;
}

	a:hover {
		color: #4D6F97;
		text-decoration: none;
	}


/* Top */

.top {
	padding: 100px 0;
}

.userimage {
	text-align: right;
}

	.userimage img {
	width: 200px;
	height: 200px;
	border: 10px solid rgba(233,243,255,0.45);
	}

.userdetails {
	text-align: left;
}

	.userdetails h1 {
	color: #FFF;
	text-shadow: 0 -1px 1px #0E1119;
	font-size:70px;
	}

		.userdetails h1 a {
			color: #FFF;
			text-decoration: underline;
		}

	.userdetails p {
		color: #D3D3D3;
		text-shadow: 0 -1px 1px #1B2338;
	}

		.userdetails p a {
			color: #D3D3D3;
			text-decoration: underline;
		}

@media (max-width: 992px) {
	.userimage, .userdetails {
		text-align: center;
	}
	.userdetails h1 {
	text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;

	font-size:40px;
	}
}

/* Middle */

.middle * {
	-webkit-transition:top 0.3s ease, right 0.3s ease;
	   -moz-transition:top 0.3s ease, right 0.3s ease;
	    -ms-transition:top 0.3s ease, right 0.3s ease;
	     -o-transition:top 0.3s ease, right 0.3s ease;
	        transition:top 0.3s ease, right 0.3s ease;
}
.box {
	border: 10px rgba(233,243,255,0.45) solid;
	border-radius: 6px;
	margin: 10px 0;
	overflow: hidden;
}
.box2 {
	border: 10px rgba(233,243,255,0.45) solid;
	border-radius: 6px;
	margin: 10px 0;
	overflow: hidden;
}

	.box-expanded {
		display: none;
	}

	.box-inner {
		background: #112;
	}
	.box-inner2 {
		background: #112;
	}

	.box-expand, .box-collapse {
		content: ' ';
		width: 62px;
		height: 62px;
		margin-bottom: -62px;
		right: -62px;
		top: -62px;
		position: relative;
		float: right;
	}

	.box-expand {
		background: url(../img/box-open.png) no-repeat;
	}

		.box-inner:hover .box-expand {
			right: -1px;
			top: -1px;
		}

	.box-collapse {
		background: url(../img/box-close.png) no-repeat;
		cursor: pointer;
	}

		.box-collapse-active {
			right: -1px;
			top: -1px;
		}

	.box .collapsed {
		text-align: center;
		padding: 45px 0;
	}


		.box .collapsed i {
			font-size: 40px;
		}

		.box .collapsed h2 {
			font-size: 26px;
			margin: 0;
			line-height: 40px;
		}

	.box .expanded {
		display: none;
	}

/* mobile */
@media (max-width: 992px) {
	.box .collapsed i {
		float: left;
		padding: 0 0 0 50px;
	}
}

.content {
	padding: 40px;
}

	.content > .row {
		margin: 30px 0;
	}

	.content h2 {
		margin: 0;
		text-align: left;
		font-size: 26px;
		color: #4D6F97;
		padding-bottom: 10px;
	}

	.content p {
		text-align: justify;
	}

	.content .text {
		border-left: 1px solid #D1D1D1;
	}

/* mobile */
@media (max-width: 992px) {
	.content {
	padding: 10px;
}
	.content .text {
		border-top: 1px solid #D1D1D1;
		border-left: 0;
		padding-top: 5px;
	}

	.content h2 {
		text-align: center;
	}
	.content > .row {
		margin: 5px 0;
	}
}

/* about panel */

.content .text {
	color: #C6D5DF;
}

.content h3 {
	text-align: center;
	color: #B4B4B4;
}

.items {
	list-style: none;
	padding: 0;
}

	.items li {
		font-size: 26px;
		padding-bottom: 5px;
	}

	.items i {
		width: 35px;
	}

/* portfolio panel */

.portfolio > div {
	padding: 15px;
}

.portfolio > h2, .contact > h2 {
	text-align: center;
	border-bottom: 1px solid #D1D1D1;
	margin-bottom: 25px;
}

.portfolio-item {
	box-shadow: 0 0 5px #C7C7C7;
	background-color: #3A5473;
}

	.portfolio-item p {
	padding: 10px;
	color: #FFFEF4;
	}

	.portfolio-item h4 {
	color: #9CB3CD;
	text-align: center;
	}

	.portfolio-item img {
		display: block;
		margin:auto;
		width: 267px;
		height: 400px;
	}

	.portfolio-item:hover a h4 {
		text-decoration: underline;
	}

/* contact panel */

.contact {
	color: #C6D5DF;
}

.contact label {
	color: #8BA5C4;
	font-weight: normal;
}

.contact .form {
	border-right: 1px solid #D1D1D1;
	padding: 25px;
}

.contact textarea {
	margin-bottom: 15px;
	height: 150px;
	resize: vertical;
}

/* mobile */
@media (max-width: 992px) {
	.contact .form {
		border-bottom: 1px solid #D1D1D1;
		border-right: 0;
	}
	.portfolio-item img {
		width: 200px;
		height: 300px;
	}
}

/* address */

.address {
	padding: 25px;
}

.address-lines {
	padding-top: 75px;
}

/* social icons */

.social {
	text-align: center;
	padding: 100px 0;
}

	.social ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.social li {
		display: inline-block;
		position: relative;
		top: 10px;
		margin: 5px;

		transition: top 0.3s ease;
	}

		.social li:hover {
			top: 0;
		}

	.social a {
		display: inline-block;
		font-size: 26px;
		width: 50px;
		color: #fff;
		height: 50px;
		border-radius: 50%;
		line-height: 50px;
	}

.social .twitter {
	background-color: #33CCFF;
}

.social .facebook {
	background-color: #3B5998;
}

.social .linkedin {
	background-color: #4875B4;
}

.social .github {
	background-color: #3D3D3D;
}

.social .google-plus {
	background-color: #C63D2D;
}

/* Base */

.footnote {
	text-align: center;
	margin-bottom: 25px;
	color: #D3D3D3;
	text-shadow: 0 -1px 1px #1B2338;
}

	.footnote a {
		color: #D3D3D3;
		text-decoration: underline;
	}


/* goodreads */
.gr-box {
	width: 85%;
	border: medium solid #BAD0E5;
	background-color: #000000;
	height: 700px;
}
 #goodreads-widget {
	font-family: georgia, serif;
	padding-right: 18px;
	padding-left: 18px;
	width: 575px;
	height: 300px;
  }
  #goodreads-widget h1 {
    font-weight:normal;
    font-size: 16px;
    border-bottom: 1px solid #BBB596;
    margin-bottom: 0;
  }
  #goodreads-widget a {
    text-decoration: none;
    color:#f0f0f0;
  }
  iframe{
    background-color: #000000;
  }
  #goodreads-widget a:hover { text-decoration: underline; }
  #goodreads-widget a:active {
    color:#f0f0f0;
  }
  #gr_footer {
	width: 100%;
	border-top: 1px solid #DBD4B1;
	text-align: right;
  }

  #goodreads-widget .gr_branding{
    color: #DBD4B1;
    font-size: 11px;
    text-decoration: none;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  @media (max-width: 750px) {
.gr-box {
	width: 90%;
	height: 900px;
}
	 #goodreads-widget {
	font-family: georgia, serif;
	padding-right: 10px;
	padding-left: 10px;
	width: 425px;
	height:400px;
  }
  }
   @media (max-width: 450px) {
.gr-box {
	width: 95%;
	height: 1250px;
}
	 #goodreads-widget {
	font-family: georgia, serif;
	padding-right: 10px;
	padding-left: 10px;
	width: 300px;
	height:600px;
  }
}
.fb-like {
	color:#f0f0f0;
}