.image {
	border-radius: 8px;
	border: 0;
	display: inline-block;
	position: relative;
}

.image img {
	border-radius: 8px;
	display: block;
}

.image.left, .image.right {
	max-width: 40%;
}

.image.left img, .image.right img {
	width: 100%;
}

.image.left {
	float: left;
	margin: 0 1.5em 1em 0;
	top: 0.25em;
}

.image.right {
	float: right;
	margin: 0 0 1em 1.5em;
	top: 0.25em;
}

.image.fit {
	display: block;
	margin: 0 0 2em 0;
	width: 100%;
}

.image.fit img {
	width: 100%;
}

.image.main {
	display: block;
	margin: 0 0 3em 0;
	width: 100%;
}

.image.main img {
	width: 100%;
}
		

/* Section/Article */
header.major h2 {
	font-size: 2em;
	text-align: center;
}

header.major p {
	font-size: 1.25em;
	letter-spacing: -0.025em;
			
}

.content{
	text-align: justify;
}

header.major.special {
	text-align: center;
}

footer.major {
	margin-top: 3em;
}

@media screen and (max-width: 736px) {

	header.major {
		margin-bottom: 0;
	}

	header.major h2 {
		font-size: 1.5em;
	}

	header.major p {
		font-size: 1em;
		letter-spacing: 0;
	}

	header.major p br {
		display: none;
	}

	footer.major {
		margin-top: 0;
	}

}

/* Spotlight */

.container
{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* Used for projecs */
.spotlight {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;	
	margin: 0 0 2em 0;
}

.spotlight .content {
	-moz-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.spotlight .content > :last-child {
	margin-bottom: 0;
}

.spotlight .content header.major {
	margin: 0 0 2em 0;
}

/* Some special attributes for the short contents (e.g. image-less projects) */
.spotlight .content-short {
	-moz-flex: 1;
	-webkit-flex: 1;
	-ms-flex: 1;
	flex: 1;
}		
	
.spotlight .content-short a {
	color: rgba(36, 143, 120, 0.644);
}

.spotlight .content-short p {
	max-width: 26em;
	display: inline-block;
}

.spotlight .image {
	display: inline-block;
	margin-left: 4em;
	padding: 0.65em;
	border-radius: 100%;
	border: solid 4px;
}

.spotlight .image img {
	display: block;
	border-radius: 100%;
	width: 16em;
}

.spotlight .image-small {
	float: left;
	margin-right: 2em;
	padding-top: 0em;
	margin-bottom: 2em;
	border-radius: 100%;
	border: solid 4px;
}
	
.spotlight .image-small img {
	display: block;
	border-radius: 100%;
	width: 7em;
	height: 7em;
}

@media screen and (max-width: 980px) {

	.spotlight {
		-moz-flex-direction: column-reverse;
		-webkit-flex-direction: column-reverse;
		-ms-flex-direction: column-reverse;
		flex-direction: column-reverse;
		text-align: center;
	}

	.spotlight .content {
		-moz-flex: 0 1 auto;
		-webkit-flex: 0 1 auto;
		-ms-flex: 0 1 auto;
		flex: 0 1 auto;
		width: 100%;
	}

	.spotlight .content header.major h2:after {
		margin-left: auto;
		margin-right: auto;
	}

	.spotlight .content .actions {
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		width: calc(100% + 1em);
	}

	.spotlight .image {
		-moz-flex: 0 1 auto;
		-webkit-flex: 0 1 auto;
		-ms-flex: 0 1 auto;
		flex: 0 1 auto;
		margin-left: 0;
		margin-bottom: 2em;
		}

}

@media screen and (max-width: 736px) {

	.spotlight .image {
		padding: 0.35em;
	}

	.spotlight .image img {
		width: 12em;
	}

}

/* Border color for the standard round image and the small round image */
.spotlight .image {
	border-color: rgba(129, 129, 129, 0.35);
}

.spotlight .image-small {
	border-color: rgba(129, 129, 129, 0.35);
}

/* Main */

#main {
	background-color: rgba(255, 255, 255, 0.95);		
	color: #636363;
	border-radius: 2.25em;
	width: 50%;	
}

#main .icon.major {
	border-color: #dddddd;
}

#main .icon.major:before {
	border-color: #dddddd;
}

#main .spotlight .image {
	border-color: #dddddd;
}

#main > .main {
	padding: 4em 4em 4em 4em ;
	border-top: solid 1px #dddddd;
}

#main > .main:first-child {
	border-top: 0;
}

#main > .main > .image.main:first-child {
	margin: -5em 0 5em -5em;
	width: calc(100% + 10em);
	border-top-right-radius: 0.25em;
	border-top-left-radius: 0.25em;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

#main > .main > .image.main:first-child img {
	border-top-right-radius: 0.25em;
	border-top-left-radius: 0.25em;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

@media screen and (max-width: 1400px) {

	#main{
		width: 70%;
	}
		
	#main > .main {
		padding: 4em 4em 2em 4em ;
	}	
		
	#main > .main > .image.main:first-child {
		margin: -4em 0 4em -4em;
		width: calc(100% + 8em);
	}
		
}

@media screen and (max-width: 1280px) {

	#main{
		width: 75%;
	}

	#main > .main {
		padding: 4em 4em 2em 4em ;
	}

	#main > .main > .image.main:first-child {
		margin: -4em 0 4em -4em;
		width: calc(100% + 8em);
	}

}

@media screen and (max-width: 980px) {

	#main > .main {
		padding: 4em 3em 2em 3em ;
	}

	#main > .main > .image.main:first-child {
		margin: -4em 0 4em -3em;
		width: calc(100% + 6em);
	}
}

@media screen and (max-width: 736px) {

	#main{
		width: 70%;
	}

	#main > .main {
		padding: 3em 2em 1em 2em ;
	}

	#main > .main > .image.main:first-child {
		margin: -3em 0 2em -2em;
		width: calc(100% + 4em);
	}

}

@media screen and (max-width: 480px) {

	#main > .main {
		padding: 3em 1.5em 1em 1.5em ;
	}

	#main > .main > .image.main:first-child {
		margin: -3em 0 1.5em -1.5em;
		width: calc(100% + 3em);
	}

}

@media screen and (max-width: 360px) {

	#main {
		border-radius: 0;
	}

	#main > .main {
		padding: 2.5em 1em 0.5em 1em ;
	}

	#main > .main > .image.main:first-child {
		margin: -2.5em 0 1.5em -1em;
		width: calc(100% + 2em);
		border-radius: 0;
	}

	#main > .main > .image.main:first-child img {
		border-radius: 0;
	}

}