@import url('reset.css');

/* General Demo Style */
body{
	background-color:#000;
	color:#fff;
	font-size:12px;
	transition: background-color 1.0s ease;
}

body.bodycolor-0 {
	background-color:#000000;
}

body.bodycolor-1 {
	background-color:#111111;
}


body.bodycolor-2 {
	background-color:#222222;
}


body.bodycolor-3 {
	background-color:#121212;
}


body.bodycolor-4 {
	background-color:#212121;
}


a{
	color:#fff;
	text-decoration:none;
}
.clr{
    display: block;
    content: "";
    clear: both;
}
h1, h5{
	font-size:40px;
	font-weight:normal;
	text-transform:uppercase;
	color:#fff;
	text-shadow:1px 1px 1px #000;
	word-spacing:10px;
	line-height: 40px;
	padding: 10px 5px 0px 0px;
}
h1 span, h5{
	font-size:18px;
	color:#c08763;
	font-family:Georgia, serif;
	font-style:italic;
	text-transform:none;
	word-spacing:0px;
	white-space: nowrap;
}
h2{

}
pre{
	padding:15px;
	white-space:pre-wrap;
}

.content{
    position: fixed;
    width: 50%;
    z-index: 100;
    left: 25%;
    top: 25%;
    background-color: rgba(0,0,0,0.7);
}
.inner{
	padding: 10px;
    line-height: 20px;
    font-size: 20px;
    min-height: 20px;
    font-size: 21px;
    letter-spacing: 2px;
    color: #e80000;
    font-family: 'Bitter', serif;
}

.inner h2 {
	font-size: 30px;
}

.am-container {
	padding: 5%;
	font-size: 0;
	display: inline-flex;
	flex-wrap: wrap;
	

}

.am-container div {
    width: 20%;
    font-size: 0;
}

img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    width: 98%;
    height: auto;
    border: 0;
    opacity: 0;
    font-size: 0;
    padding: 1%;
    
}

#preload{
	display: none;
}


@media screen and (max-width: 640px) {
	.content{
		left:5%;
		width: 90%;
	}

	.am-container {
		padding: 2%;
	}

	.am-container div {
		width: 25%;
	}

	img {
		width: 96%;
		padding: 2%;
	}

	.inner{ 
		font-size:18px;
	}

	.portraits:last-child {
  		display: none !important;
	}

}


#copyright{
	text-align: center;
    padding: 0 10px 8px;
    font-size: 9px;
    color: #999;
}