@import url('https://fonts.googleapis.com/css?family=Amatic+SC|Annie+Use+Your+Telescope|Shadows+Into+Light|Creepster');



/* CSS Document */



/* ------ TAG SELECTORS ------ */



html {
	background-color:#354f2c;
}
html,
body {
    width:100%;
    margin:0;
    padding:0;
}
body {
    overflow-x:hidden;
    font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
	background-color: rgba(123,152,113,1);
	background-position:center;
	background-repeat:no-repeat;
	background-size:auto;
	background-image:url('../img/blood_spatter/blood1.png');
		background-image:url("../img/blood_spatter/blood1.png"), -moz-linear-gradient(top, rgba(123,152,113,1) 0%, rgba(82,102,75,1) 100%);
		background-image:url("../img/blood_spatter/blood1.png"), -webkit-linear-gradient(top, rgba(123,152,113,1) 0%,rgba(82,102,75,1) 100%);
		background-image:url("../img/blood_spatter/blood1.png"), linear-gradient(to bottom, rgba(123,152,113,1) 0%,rgba(82,102,75,1) 100%);
		filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b9871', endColorstr='#52664b',GradientType=0 );
}
header {
	margin:0 auto;
	padding:40px 0 20px 0;
	text-align:center;
}
nav {
	margin:0 auto;
	font-size:0px;
}
nav div:nth-of-type(odd) {
	-webkit-transform: rotate(0.5deg);
	 	-moz-transform: rotate(0.5deg);
		-ms-transform: rotate(0.5deg);
		-o-transform: rotate(0.5deg);
		transform: rotate(0.5deg);
	
}
nav div:nth-of-type(even) {
	-webkit-transform: rotate(-1deg);
	 	-moz-transform: rotate(-1deg);
		-ms-transform: rotate(-1deg);
		-o-transform: rotate(-1deg);
		transform: rotate(-1deg);
	
}
nav div:nth-of-type(3n+0) {
	-webkit-transform: rotate(-0.75deg);
	 	-moz-transform: rotate(-07.5deg);
		-ms-transform: rotate(-0.75deg);
		-o-transform: rotate(-0.75deg);
		transform: rotate(-0.75deg);
}
nav div:nth-of-type(4n+0) {
	-webkit-transform: rotate(-0.5deg);
	 	-moz-transform: rotate(-0.5deg);
		-ms-transform: rotate(-0.5deg);
		-o-transform: rotate(-0.5deg);
		transform: rotate(-0.5deg);
	
}
nav div:nth-of-type(6n+0) {
	-webkit-transform: rotate(-1deg);
	 	-moz-transform: rotate(-1deg);
		-ms-transform: rotate(-1deg);
		-o-transform: rotate(-1deg);
		transform: rotate(-1deg);
}
footer {
	margin:55px auto 0 auto;
	color:#ffefbc;
	overflow:hidden;
	display:table;
	border-bottom:none;
	padding-bottom:10px;
	-webkit-border-top-left-radius: 8px;
		-webkit-border-top-right-radius: 8px;
		-moz-border-radius-topleft: 8px;
		-moz-border-radius-topright: 8px;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	-webkit-box-shadow:0px 7px 15px -1px rgba(0,0,0,0.75);
		-moz-box-shadow:0px 7px 15px -1px rgba(0,0,0,0.75);
		box-shadow:0px 7px 15px -1px rgba(0,0,0,0.75);
	background: rgb(53,79,44);
		background: -moz-linear-gradient(top, rgba(53,79,44,1) 0%, rgba(34,50,28,1) 100%);
		background: -webkit-linear-gradient(top, rgba(53,79,44,1) 0%,rgba(34,50,28,1) 100%);
		background: linear-gradient(to bottom, rgba(53,79,44,1) 0%,rgba(34,50,28,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#354f2c', endColorstr='#22321c',GradientType=0 );
}
h1 {
	font-family:'Creepster', cursive;
	font-size:90px;
	letter-spacing:1px;
	padding:0;
	margin:0;
	line-height:90px;
	font-weight:normal;
	text-transform:uppercase;
	color:#d30037;
	text-shadow:0px 4px 0 #fdf181, -2px -2px 0 #fdf181, 2px -2px 0 #fdf181, -2px 2px 0 #fdf181, 2px 2px 0 #fdf181, 0 8px 8px rgba(0,0,0,0.75);
	text-decoration: none;-webkit-transition:all 200ms ease-in-out;
		-moz-transition:all 200ms ease-in-out;
		-ms-transition:all 200ms ease-in-out;
		-o-transition:all 200ms ease-in-out;
		transition:all 200ms ease-in-out;
}
h2 {
	font-family:'Amatic SC', cursive;
	font-size:80px;
	padding:0;
	margin:0;
	line-height:0;
	font-weight:bold;
	letter-spacing:10px;
}
a img {
	border:none;
}



/*------  GLOBAL STYLES ------ */



.album {
	font-size:1em;
	background-color:#000;
	display:inline-block;
	position:relative;
	-webkit-box-shadow:0px 7px 31px -1px rgba(0,0,0,0.75);
		-moz-box-shadow:0px 7px 31px -1px rgba(0,0,0,0.75);
		box-shadow:0px 7px 31px -1px rgba(0,0,0,0.75);
	-webkit-transition:all 200ms ease-in-out;
		-moz-transition:all 200ms ease-in-out;
		-ms-transition:all 200ms ease-in-out;
		-o-transition:all 200ms ease-in-out;
		transition:all 200ms ease-in-out;
}
.album:hover {
	cursor:pointer;
	-webkit-box-shadow:0px 4px 12px -1px rgba(0,0,0,0.75);
		-moz-box-shadow:0px 4px 12px -1px rgba(0,0,0,0.75);
		box-shadow:0px 4px 12px -1px rgba(0,0,0,0.75);	
}
.album img {
	width:100%;
	height:100%;
}
.album:hover img {
	filter: blur(1px);
	opacity:0.5;
}
.album h2 {
	display:inline-table;
	position:absolute;
	color:#ffefbc;
	text-shadow:0 4px 6px #000;
	top:50%;
	left:25%;
	opacity:0;
	-webkit-transition:all 200ms ease-in;
		-moz-transition:all 200ms ease-in;
		-ms-transition:all 200ms ease-in;
		-o-transition:all 200ms ease-in;
		transition:all 200ms ease-in;
}
.album:hover h2 {
	opacity:1;
}
.socialSharingContainer {
    margin:30px auto 6px auto;
    width:386px;
}
.socialLabel {
    vertical-align:middle; 
    text-align: left; 
    padding-right:14px;
    margin-top:-6px;
    font-family:'Amatic SC', cursive;
	font-size:38px;
    color:#ffefbc;
    float:left;
}
.footerText {
	display:table-cell;
	width:60%;
	padding:40px 60px 45px 60px;
}
footer h3 {
	font-family:'Amatic SC', cursive;
	font-size:80px;
	margin:0;
	padding:0;
	font-weight:normal;
}
footer p {
	font-family:'Annie Use Your Telescope', cursive;
	font-size:28px;
	margin:10px 0 0 0;
	letter-spacing: 1px;
}
footer i {
	padding-left:30px;
}
.footerIcons {
	position:relative;
	width:30%;
	display:table-cell;
	text-align:right;
	vertical-align:middle;
	padding:40px 60px 45px 60px;
}
.footerIcons img {
	position:absolute;
	display:block;
	-webkit-transition: all 200ms ease-in;
		-moz-transition: all 200ms ease-in;
		-ms-transition: all 200ms ease-in;
		-o-transition: all 200ms ease-in;
		transition: all 200ms ease-in;
}
.footerIcons svg {
    fill:#ffefbc;
    height:80px;
    width:80px;
    -webkit-transition: all 200ms ease-in;
		-moz-transition: all 200ms ease-in;
		-ms-transition: all 200ms ease-in;
		-o-transition: all 200ms ease-in;
		transition: all 200ms ease-in;
}
.footerIcons svg:hover {
    fill:#fdf181;
}
.footerIcons .facebookLink {
    position:absolute;
    top:95px;
    right:160px;
}
.footerIcons .instagramLink {
    position:absolute;
    top:95px;
    right:60px;
}
footer a {
	text-decoration: none;
}
footer a:hover {
	text-decoration: none;
}



/* 
	--------> RESPONSIVE STYLES
*/



/* ------ DESKTOP - LARGE ------ */

@media(min-width:1200px){
	
	header,
	nav,
	footer {
		width:1149px;
	}
	.album {
		margin:25px;
		width:333px;
		height:333px;
	}
	.footerIcons img {
		left:-200px;
		top:45px;
	}
    
}

/* ------ DESKTOP - MEDIUM ------ */

@media(min-width:992px) and (max-width:1199px){
	
	body {
		background-image:url('../img/blood_spatter/blood2.png');
			background-image:url("../img/blood_spatter/blood2.png"), -moz-linear-gradient(top, rgba(123,152,113,1) 0%, rgba(82,102,75,1) 100%);
			background-image:url("../img/blood_spatter/blood2.png"), -webkit-linear-gradient(top, rgba(123,152,113,1) 0%,rgba(82,102,75,1) 100%);
			background-image:url("../img/blood_spatter/blood2.png"), linear-gradient(to bottom, rgba(123,152,113,1) 0%,rgba(82,102,75,1) 100%);
	}
	header,
	nav,
	footer {
		width:984px;
	}
	.album {
		margin:20px;
		width:288px;
		height:288px;
	}
	footer h3 {
		font-size:70px;
	}
	.footerIcons img {
		left:-140px;
		top:45px;
		width:200px;
	}

}

/* ------ DESKTOP - SMALL ------ */

@media (min-width:960px) and (max-width:991px) {
	
	body {
		background-size: auto 100%;
		background-image:url('../img/blood_spatter/blood3.png');
			background-image:url("../img/blood_spatter/blood3.png"), -moz-linear-gradient(top, rgba(123,152,113,1) 0%, rgba(82,102,75,1) 100%);
			background-image:url("../img/blood_spatter/blood3.png"), -webkit-linear-gradient(top, rgba(123,152,113,1) 0%,rgba(82,102,75,1) 100%);
			background-image:url("../img/blood_spatter/blood3.png"), linear-gradient(to bottom, rgba(123,152,113,1) 0%,rgba(82,102,75,1) 100%);
	}
	header,
	footer {
		width:946px;
	}
	nav {
		width:766px;
	}
	.album {
		margin:25px;
		width:333px;
		height:333px;
	}
	.footerIcons {
		width:31%
	}
	.footerIcons img {
		left:-95px;
		top:190px;
		width:200px;
		-moz-transform: scaleY(-1);
			-o-transform: scaleY(-1);
			-webkit-transform: scaleY(-1);
			transform: scaleY(-1);
			filter: FlipV;
			-ms-filter: "FlipV";
	}
	
}

/* ------ MOBILE - LARGE ------ */

@media(max-width:959px) {
	
	body {
		background-size:auto 100%;
			background-image:url('../img/blood_spatter/blood3.png');
			background-image:url("../img/blood_spatter/blood3.png"), -moz-linear-gradient(top, rgba(123,152,113,1) 0%, rgba(82,102,75,1) 100%);
			background-image:url("../img/blood_spatter/blood3.png"), -webkit-linear-gradient(top, rgba(123,152,113,1) 0%,rgba(82,102,75,1) 100%);
			background-image:url("../img/blood_spatter/blood3.png"), linear-gradient(to bottom, rgba(123,152,113,1) 0%,rgba(82,102,75,1) 100%);
	}
	header,
    nav,
    section {
		width:94%;
	}
	footer {
		width:100%;
		margin-top:50px;
		-webkit-border-top-left-radius:0;
			-webkit-border-top-right-radius:0;
			-moz-border-radius-topleft:0;
			-moz-border-radius-topright:0;
			border-top-left-radius:0;
			border-top-right-radius:0;
	}
	h1 {
		font-size:80px;
		line-height:80px;
	}
	.album {
		margin:20px 2% 20px 2%;
		width:29%;
		height:auto;
	}
	footer h3 {
		font-size:60px;
	}
	.footerIcons img {
		left:-84px;
		top:50px;
		width:200px;
	}
    .footerIcons .facebookLink {
        position:absolute;
        top:105px;
        right:150px;
    }
    .footerIcons .instagramLink {
        position:absolute;
        top:105px;
        right:60px;
    }
    
}

/* ------ MOBILE - MEDIUM ------ */

@media(max-width:767px) {
	
	body {
		background-image:none;
		background: rgb(123,152,113,1);
			background:-moz-linear-gradient(top, rgba(123,152,113,1) 0%, rgba(82,102,75,1) 100%);
			background:-webkit-linear-gradient(top, rgba(123,152,113,1) 0%,rgba(82,102,75,1) 100%);
			background:linear-gradient(to bottom, rgba(123,152,113,1) 0%,rgba(82,102,75,1) 100%);
			filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b9871', endColorstr='#52664b',GradientType=0 );
	}
	header {
		padding:25px 0 10px 0;
	}
	h1 {
		font-size:70px;
		line-height:70px;
	}
	.album {
		margin:20px 2% 20px 2%;
		width:46%;
		height:auto;
	}
	footer {
		margin-top:30px;
	}
	.footerText {
		display:block;
		width:92%;
		padding:30px 4% 20px 4%;
	}
	.footerIcons {
		position:static;
		width:92%;
		display:block;
		text-align:center;
		vertical-align:inherit;
		padding:0 4% 30px 4%;
	}
	.footerIcons img {
		display:none;
	}
    .footerIcons .facebookLink {
        position:relative;
        top:0;
        right:10px;
    }
    .footerIcons .instagramLink {
        position:relative;
        top:0;
        right:-10px;
    }
}

/* ------ MOBILE - SMALL ------ */

@media(max-width:480px) {

	.album {
		display:block;
		margin:20px auto 50px auto;
		width:100%;
		max-width:333px;
		height:auto;
	}
    .socialSharingContainer {
        width:92%;
        margin-bottom:40px;
    }
    .socialLabel {
        float:none;
        margin-bottom:4px;
    }
	footer h3 {
		font-size:50px;
	}
	footer p {
		font-size:24px;
		margin:10px 0 0 0;
	}  

}

/* ------ MOBILE - X-SMALL ------ */

@media(max-width: 344px) {
	
	h1 {
		font-size:70px;
		line-height:70px;
	}
	
}

/* ------ STYLES FOR IE 10 & 11 ------ */


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  

    .socialSharingContainer {
        display:none;
    }
    
}