/* Card Based Layout - Base styles */

body {
	background: hsl(360, 100%, 100%);
}

.masthead {
	background: hsl(0, 0%, 20%);
}

.site-title {
	color: white;
}

.card {
	background: white;
	margin-top: 1em;
	margin-bottom: 2em;	
}

.card a {
	color: black;
	text-decoration: none;
}

.card a:hover {
	box-shadow: 3px 3px 8px hsl(0, 0%, 70%);
}

.card-content {
	padding: 1.4em;
}

.card-content h2 {
	margin-top: 0;
	margin-bottom: .5em;
	font-weight: normal;
}

.card-content p {
	font-size: 95%;
}

.thumbnail {
	display: block;
	/*position: relative;
	top: 1em;
	right: -2.1em;
	left: 2.1em;
	*/
	padding: 1em 2em .25em 1.4em;
	width: 50%;
	}
	
.imgPortfolio img {
	display: block;
	width: 170%;
	}

/* Flexbox stuff */

@media screen and (min-width: 40em) {
	
    .cards {
        display: flex;
		display: -webkit-flex;
		display: -ms-flexbox;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: .25em;
    }

    .card {
        display: flex;
		display: -webkit-flex;
		display: -ms-flexbox;
      	flex: 0 1 calc(50% - .5em);
		/*width: calc(50% - .5em);*/
		margin-top: .75em;
        margin-bottom: 1em;
    }

}

@media screen and (min-width: 60em) {
    .cards {
        margin-top: inherit;
    }
    
    .card {
        flex: 0 1 calc(33% - 1em);
		/*width: calc(33% -1em);*/
		margin-top: 1em;
        margin-bottom: 2em;
    }
}