/*	
 *	GENERAL
 ------------------------------------------------------ */

/* border-box */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/* clearfix */
.group:before,
.group:after { content: " "; display: table; }
.group:after { clear: both; }


body {
	color: #fff;
	background: #2f313c;
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	text-align: center;
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
	transition: .2s all ease-in-out;
}

img {
	width: 100%;
	max-width: 100%;
	vertical-align: middle;
}

.menu {
	margin: 0;
	list-style: none;
	padding-left: 0;
}

.menu li,
.menu a {
	display: inline-block;
}

.container {
	margin: 0 auto;
	max-width: 64em;
	padding: 0 1em;
}

::selection {
    background-color: #FCBD24;
    color: #fff;
}

::-moz-selection {
    background-color: #FCBD24;
    color: #fff;
}




/*	
 *	UI ELEMENTS
 ------------------------------------------------------ */

.btn {
	font-size: 1.0625em; /* 17/16 */
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	display: inline-block;
	margin: 2.125em 0; /* 34/16 */
	padding: 1.25em 1.5em; /* 20/16 */ /* 24/16 */
	border-radius: 0.375em; /* 6/16 */
	background-color: rgb(84, 87, 102);
	background-color: rgba(84, 87, 102, 1);
}

.btn:hover,
.btn:focus {
	background-color: rgba(84, 87, 102, 0.9);	
}

.btn-red {
	background-color: rgb(253, 104, 91);
	background-color: rgba(253, 104, 91, 1);
}

.btn-red:hover,
.btn-red:focus {
	background-color: rgba(253, 104, 91, 0.9);
}

.btn-green {
	background-color: rgb(57, 174, 144);
	background-color: rgba(57, 174, 144, 1);
}

.btn-green:hover,
.btn-green:focus {
	background-color: rgba(57, 174, 144, 0.9);
}

.btn-white {
	background-color: rgb(255, 255, 255);
	background-color: rgba(255, 255, 255, 1);
}

.btn-white:hover,
.btn-white:focus {
	background-color: rgba(255, 255, 255, 0.9);
}

.btn-yellow {
	background-color: rgb(254, 205, 94);
	background-color: rgba(254, 205, 94, 1);
	text-shadow: 1px 1px 0 #E2B843;
}

.btn-yellow:hover,
.btn-yellow:focus {
	background-color: rgba(254, 205, 94, 0.9);
}




/*	
 *	HEADER
 ------------------------------------------------------ */

.site-header {
	background: #fff;
	border-bottom: 1px solid #63C5DB;;
}

.blog    .site-header { border-bottom: 1px solid #0682A8; }
.contact .site-header { border-bottom: 1px solid #E44B3E; }
.gallery .site-header { border-bottom: 1px solid #E2B843; }

nav a,
nav strong {
	font-size: 0.825em; 
	text-align: center;
	display: inline-block;
	padding: 1.825em 0.625em;
}

nav a {
	color: #777;
}

nav a:hover,
nav a:focus {
	color: #9f9f9f;
}

nav strong {
	color: #E08800;
	font-weight: normal;
}




/*	
 *	MAIN
 ------------------------------------------------------ */

main    	  { background: #8FD2D1; }
.blog main	  { background: #019DCD; }
.contact main {	background: #FD685B; }
.gallery main {	background: #FFD256; }

.shadow 		 { text-shadow: -1px 1px 0px #63C5DB; }
.blog .shadow 	 { text-shadow: -1px 1px 0px #0682A8; }
.contact .shadow { text-shadow: -1px 1px 0px #E44B3E; }
.gallery .shadow { text-shadow: -1px 1px 0px #E2B843; }


.content {
	padding-top: 5em; /* 80/16 */
	padding-bottom: 5em; 
}

h1, h2, h3 {
	margin: 0;
	line-height: 1;
}

h1 {
	font-size: 4.6875em; /* 75/16 */
	text-transform: uppercase;
	margin-bottom: 0.3em; 
}

h2 {
	font-size: 1.5em; /* 24/16 */
	line-height: 1.3333333333333333em; /* 32/24 */
	font-weight: normal;
}

h3 {
	font-size: 1.4em;
}

.small {
	font-size: 0.75em; /* 12/16 */
	line-height: 1.5em; /* 18/12 */
	margin: 0;
}


/* HOMEPAGE */

.home article {
	padding-bottom: 0;
}

.bigass {
	max-width: 100%;
	height: auto;
	border-radius: .75em .75em 0 0;
	vertical-align: bottom;
	margin-top: 2.75em;
	position: relative;
	z-index: 1;
	top: .425em;
	transition: .2s top ease-in-out;
}

.bigass:hover {
	top: 0;
}


/* GALLERY */

.image-grid {
	margin-top: 3em;
}

.image-grid img {
	border-radius: .25em;
}

.gallery-img {
	float: left;
	width: 49%;
	margin: 0.5%;
}


/* BLOG */

.post-list {
	width: 70%;
	margin: 5.35em auto 0;
	text-align: left;
}

.post {
	margin: 4em 0;
	line-height: 1.725;
}

.post-title {
	color: #fff;
	font-size: 1.925em;	 
	margin-bottom: 1.125em;
	text-transform: none;
}

.post p {
	color: rgba(255, 255, 255, 0.9);
}

.load-older {
	margin-top: 0;
}


/* CONTACT */

input:not([type="submit"]), 
textarea {
	color: #fff;
	font-size: 0.9em;
	font-family: 'Montserrat', sans-serif;

	border: 2px solid rgba(0, 0, 0, 0.1);
	background-color: rgba(255,255,255,0.05);
	border-radius: 0.333em;
	outline: none;

	display: block;
	padding: 0.6em;
	margin-top: 0.35em;
	max-width: 100%;
	width: 100%;

}

input:not([type="submit"]):focus,
textarea:focus {
	border-color: rgba(255,255,255,0.5);
}

.contact-form {
	max-width: 35em;
	margin: 4.5em auto 0;
	text-align: left;
}

.contact-form label {
	font-size: 1.1em;
	display: block;
	margin-bottom: 1.35em;
	font-weight: normal;
}

.contact-form .btn {
	border: none;
	cursor: pointer;
	font-size: 0.9em;
	padding: 0.9em 2.15em;
	margin: 0;
}




/*	
 *	FOOTER
 ------------------------------------------------------ */

.pre-footer {
	background: #363842;
	padding: 4.25em 0 4.5em;
	position: relative;
	z-index: 2;
}

.pre-footer p {
	color: #e4e6e7;
	font-size: 1.1em;
	line-height: 1.625em;
	margin: 1.65em 0 1.75em;
}

.pre-footer .btn {
	margin: 0;
	padding: 1.05em 1.375em; 
	border-radius: 0.3em;
	font-size: .875em;
}

.site-footer {
	color: #8c95ad;
	padding: 1.85em 0;
}

.site-footer a {
	border-bottom: 1px solid #383F4D;
}

.site-footer a:hover
.site-footer a:focus {
	color: #8c95ad;
}

.site-footer span {
	color: #4E5666;
	padding-left: 1em;
}




/*	
 *	MEDIA QUERIES
 ------------------------------------------------------ */

@media (max-width: 40em) {

	.pre-footer, 
	main {
		font-size: 85%;
	}

	.post-list {
		width: 100%;
	}

	main h2 br, 
	.pre-footer p br {
		display: none;
	}

	.gallery-img {
		float: none;
		width: 100%;
		margin: 0.5em 0;
	}
	
}