body {
	font-family: 'Lato', sans-serif;
	text-align: center;
	margin: 0;
}
body.overlay-open {
	overflow: hidden;
}

img {
	max-width: 100%;
}

a {
	text-decoration: none;
	color: #2196f3;
}

main {
	padding-top: 10px;
}

h2 {
	margin-top: 40px;
	font-weight: 800;
	font-size: 30px;
}

.col h4 {
	margin-bottom: 0;
	font-weight: 800;
}

.col p {
	margin-top: 0;
}

ul{
	list-style:none;	
	list-style-type:"-";	
	list-style-position: outside;
	
}
ul li{
	padding-left: 0.5em;
	margin-left: 0.5em;
	margin-top:0.3em;
}

p{
	margin-top:0.5em;
}

.header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: black;
	background-color: white;
	padding-top: 80px;
	padding-bottom: 80px;
}

.header-title {
	text-transform: uppercase;
	color:black;
}
.header-title__upper {
	padding: 0 10px;
	font-size: 80px;
	font-weight: 800;
}
.header-title__lower {
	padding: 0 10px;
	font-size: 80px;
	font-weight: 100;
}

.header-slogan {
	margin-top: 40px;
	font-size: 20px;
}
.note {
	margin-bottom: 0;
	color: #ccc;
	font-style: italic;
}

.wiggle{
	animation-name: wiggle;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}

.wiggle-offset{
	animation-delay: 5s;
}


.cta-button {
	margin-top: 20px;
	background: none;
	border: solid 2px #2d5fdf;
	color: #2d5fdf;
	padding: 10px 30px;
	font-size: 20px;
	border-radius: 5px;
	transition: all 0.2s;
	outline: none;
	animation-name: wiggle;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}
.cta-button:hover {
	cursor: pointer;
	background-color: #2d5fdf;
	color: white;
}

.who-banner {
	background-color: #111;
	background: linear-gradient(-45deg, #321955, #04050c, #17264d);
	color: white;
	margin: 0 auto;
	padding-top: 40px;
	padding-bottom: 60px;
	box-shadow: 0px 4px 10px 0px #777;
}

.who-banner p {
	font-size: 18px;
	text-align: center;
	font-weight: 300;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.portfolio {
	text-align: left;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 2500px;
	margin: 0 auto;
}
.portfolio-wrapper {
	overflow: hidden;
}
.portfolio-overlay {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.933);
	z-index: 10;
	color: white;
	text-align: left;
	padding: 50px;
	pointer-events: auto;
	opacity: 1;
	transition: opacity 0.2s;
}
.portfolio-overlay.hidden {
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
}
.overlay-content {
	height: 100%;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	font-size: 18px;
}
.col {
	padding: 40px;
	flex: 1;
}
.col.col-right {
	height: 100%;
}
.overlay-x-button {
	width: 40px;
	height: 40px;
	margin-bottom: 20px;
	opacity: 0.8;
}
.overlay-x-button:hover {
	cursor: pointer;
	opacity: 1;
}
.overlay-x-button:active {
	transform: translateY(1px);
}
.overlay-image-wrapper {
	margin-top: 40px;
	flex: 1;
	max-width: 100%;
	height: 100%;
	position: relative;
}
.overlay-image-wrapper .image-fill {
	transition: transform 1.5s;
}
.overlay-image-wrapper .image-fill.first {
	transform: translate(-60px, 80px);
}
.overlay-image-wrapper .image-fill.second-first {
	transform: translate(-20px, 25px);
}
.overlay-image-wrapper .image-fill.second-last {
	transform: translate(20px, -25px);
}
.overlay-image-wrapper .image-fill.last {
	transform: translate(60px, -80px);
}
.hidden .overlay-image-wrapper .image-fill.first {
	transform: translate(-50px, 80px);
}
.hidden .overlay-image-wrapper .image-fill.second-first {
	transform: translate(-15px, 25px);
}
.hidden .overlay-image-wrapper .image-fill.second-last {
	transform: translate(15px, -25px);
}
.hidden .overlay-image-wrapper .image-fill.last {
	transform: translate(50px, -80px);
}

.filler-item {
	width: 700px;
	height: 0;
}
.portfolio-item {
	position: relative;
	display: flex;
	width: 700px;
	height: 300px;
	border-radius: 10px;
	margin: 10px;
}
.portfolio-item-image-wrapper {
	flex: 1;
	max-width: 50%;
	height: 100%;
	position: relative;
}
.image-fill {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: transform 0.2s;
}
.portfolio-item:hover .portfolio-item-image-wrapper .image-fill.first {
	transform: translate(-5px, 20px);
}
.portfolio-item:hover .portfolio-item-image-wrapper .image-fill.second-first {
	transform: translate(-2px, 7.5px);
}
.portfolio-item:hover .portfolio-item-image-wrapper .image-fill.second-last {
	transform: translate(2px, -7.5px);
}
.portfolio-item:hover .portfolio-item-image-wrapper .image-fill.last {
	transform: translate(5px, -20px);
}
.portfolio-item:hover .portfolio-item-image-wrapper:hover .image-fill.first {
	transform: translate(-20px, 50px);
}
.portfolio-item:hover
	.portfolio-item-image-wrapper:hover
	.image-fill.second-first {
	transform: translate(-5px, 15px);
}
.portfolio-item:hover
	.portfolio-item-image-wrapper:hover
	.image-fill.second-last {
	transform: translate(5px, -15px);
}
.portfolio-item:hover .portfolio-item-image-wrapper:hover .image-fill.last {
	transform: translate(20px, -50px);
}

.portfolio-item-image {
	flex: 1;
	max-width: 50%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	height: 100%;
	position: relative;
}
.portfolio-item-image.bottom {
	background-position: bottom;
}

.portfolio-item-content {
	flex: 1;
	position: relative;
	color: white;
	padding: 20px;
	padding-left: 40px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: flex-start;
}
.portfolio-item-title {
	margin: 0;
	font-size: 30px;
	width: 100%;
}
.portfolio-item-title__icon {
	max-width: 80%;
	max-height: 80px;
}
.portfolio-item-description {
	font-size: 18px;
}

.portfolio-item-button {
	font-size: 18px;
	padding: 9px 18px;
	background-color: transparent;
	border-radius: 5px;
	border: solid 2px rgb(255, 255, 255);
	color: rgb(255, 255, 255);
	outline: 0;
	opacity: 0.7;
}
.portfolio-item-button:hover {
	opacity: 0.95;
	cursor: pointer;
}
.portfolio-item-button:active {
	opacity: 1;
	transform: translateY(1px);
}

.portfolio-item-backdrop-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border-radius: 10px;
	overflow: hidden;
}

.portfolio-item-backdrop {
	background-color: gray;
	position: absolute;
	top: -80px;
	right: -50px;
	width: 75%;
	height: 600px;
	transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	background: linear-gradient(
			70deg,
			rgba(165, 57, 198, 0.667) 100px,
			rgba(68, 134, 204, 0.667)
		),
		url('assets/concrete_seamless.png');
	background-repeat: repeat;
	background-size: cover, cover;
}
.portfolio-item-backdrop--flink {
	background: linear-gradient(
			70deg,
			rgba(95, 190, 189, 0.667) 100px,
			rgba(150, 205, 123, 0.667)
		),
		url('assets/concrete_seamless.png');
}
.portfolio-item-backdrop--nuffclub {
	background: linear-gradient(70deg, #3fc6e7 100px, #ec3dd5),
		url('assets/concrete_seamless.png');
}
.portfolio-item-backdrop--kreative-nord {
	background: linear-gradient(
			70deg,
			rgba(81, 90, 87, 0.667) 100px,
			rgba(250, 187, 190, 0.667)
		),
		url('assets/concrete_seamless.png');
}
.portfolio-item-backdrop--kiwisjul {
	background: linear-gradient(
			70deg,
			rgba(0, 111, 52, 0.667) 100px,
			rgba(0, 170, 80, 0.667)
		),
		url('assets/concrete_seamless.png');
}
.portfolio-item-backdrop--small-heroes {
	background: linear-gradient(70deg, #dbb18f 100px, #d75842),
		url('assets/concrete_seamless.png');
}

.portfolio-item__testimonial {
	margin-top: 50px;
	display: flex;
}

.testimonial__icon {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	margin-right: 20px;
	vertical-align: top;
}
.testimonial__text {
	font-size: 20px;
	font-style: italic;
	vertical-align: top;
}
.testimonial__owner {
	text-align: left;
	color: #ccc;
}

.contact-wrapper {
	padding-top: 50px;
	padding-bottom: 100px;
}

.contact-inner-wrapper {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
}

.contact {
	text-align: left;
	padding: 40px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.contact-form-wrapper {
	max-width: 100%;
}
.contact-image {
	width: 100px;
	height: 100px;
	border-radius: 5px;
	background-color: #111;
	background: linear-gradient(-45deg, #321955, #04050c, #17264d);
	box-shadow: 0px 2px 5px 0px #777;
	filter: saturate(80%);
}
.contact-text {
	margin-left: 0;
}
.contact-line {
	white-space: nowrap;
	font-size: 20px;
	text-align: left;
}

.contact-line__icon {
	margin-right: 10px;
}
.address-wrapper {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}
.address-wrapper p {
	margin: 0;
}

.contact-form-ingress {
	max-width: 250px;
	margin-top: 0;
}
.contact-form {
	margin-top: 20px;
	text-align: left;
}

.contact-form label {
	text-transform: uppercase;
	font-size: 12px;
}

.contact-form input[type='text'],
.contact-form input[type='email'],
.contact-form textarea {
	padding: 5px;
	font-size: 16px;
	width: 250px;
	display: block;
	border: none;
	border-bottom: solid 1px #ccc;
	font-family: 'Lato', sans-serif;
	margin-bottom: 10px;
	outline: 0;
}

.contact-form textarea {
	max-width: 250px;
	height: 100px;
}

.contact-form input[type='submit'] {
	padding: 8px 24px;
	border-radius: 5px;
	font-size: 16px;
	border: solid 2px #2d5fdf;
	color: #2d5fdf;
	background-color: transparent;
	transition: all 0.2s;
}
.contact-form:valid input[type='submit'] {
	animation-name: wiggle;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}
.contact-form input[type="submit"]:hover{
	background-color: #2d5fdf;
	color:white;
	cursor: pointer;

}

.map,
#map {
	height: 400px;
}

.blog-articles{
	max-width: 100%;
	width: 600px;
	margin:0 auto;
	padding: 20px;
	box-sizing: border-box;
}

.blog-article{
	align-items: center;
	text-align: left;
	margin-bottom: 40px;
	border:solid 1px #ddd;
	border-radius: 10px;
	overflow: hidden;
	color:black;
	transition: all 0.2s;
}
.blog-article:hover{
	cursor: pointer;
	transform: scale(1.03);
	box-shadow: 2px 2px 5px #ccc;
}
.blog-article:active{
	transform: scale(1.03) translateY(5px);
	box-shadow: 0px 0px 0px #ccc;

}
.blog-article img{
	width: 100%;
	height: auto;
}
.blog-article .tags{
	margin-bottom: 5px;
}
	.blog-article .tag{
	display: inline-block;
	white-space: nowrap;
	border:solid 1px #ccc;
	font-size: 12px;
	padding:2px 6px;
	border-radius: 5px;
}
.blog-article .tag.life{
	background-color: #2196f3;
	color:white;
	border:none;
}
.blog-article .tag.tech{
	background-color: #f3a621;
	color:white;
	border:none;
}
.blog-article .tag.smarthome{
	background-color: #53dc25;
	color:white;
	border:none;
}
.blog-article .tag.photography{
	background-color: #dc25b1;
	color:white;
	border:none;
}

.blog-article__content {
	padding:10px;
}
.blog-article h2{
	margin:0;
	margin-bottom: 10px;
	font-size: 24px;
	text-transform: capitalize;
}
.blog-article p{
	margin:0;
	font-size: 16px;
}

.newsletter-section h2{
	margin-bottom:0;
}
.newsletter-section p{
	margin-top:0px;
}
.newsletter-section input[type="email"]{
	border-radius: 5px;
	padding:10px 20px;
	margin-top: 2px;
	border:solid 1px #ccc;
	font-size: 16px;
	transition: all 0.2s;
}
.newsletter-section input[type="submit"]{
	border-radius: 5px;
	padding:10px 20px;
	margin-top:2px;
	border:none;
	font-size: 16px;
	background-color: #2d5fdf;
	color: white;
	transition: all 0.2s;
}
.newsletter-section input[type="submit"]:hover{
	background-color: #2196f3;
	cursor: pointer;

}

.newsletter-form label{
	display:inline-block; 
	text-align: left;
}

.article{
	width: 100%;
	max-width: 800px;
	text-align: left;
	margin:0 auto;
	font-size: 18px;
	line-height: 1.3;
}
.article h1{
	font-size: 40px;
}
.article img{
	border-radius: 10px;
	width: 100%;
}
.article blockquote{
	font-size:28px;
	margin-left: 0;
	line-height: 1.3;
	color:#a45ee1;
}
.article blockquote::before{
	content:"«"
}
.article blockquote::after{
	content:"»"
}

.article table, .article th, .article td{
	border: 1px solid black;
	border-collapse: collapse;
	padding:5px 10px;
	text-align: left;
}
.article .sidenote{
	font-size: 14px;
	color:#333;
}
.article .image-description{
	margin-top: 5px;
	font-style: italic;
	color:#555;
}

.rental-packages{
	max-width: 100%;
	width: 600px;
	margin:0 auto;
	padding: 20px;
	box-sizing: border-box;
	text-align: left;
}
.rental-packages h2{
	margin-top:20px;
}

.rental-package{
	text-align: left;
	margin-bottom: 60px;
}

.rental-package__description{
	font-style: italic;
}
.rental-package__price{
	font-style: italic;
	font-weight: bold;
}

.rental-package h3, .rental-package p, .rental-package ul{
	margin:0;
}

@keyframes wiggle {
	0% {
		transform: rotate(0deg);
	}
	96% {
		transform: rotate(0deg);
	}
	97% {
		transform: rotate(3deg);
	}
	98% {
		transform: rotate(-3deg);
	}
	99% {
		transform: rotate(1deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
@media screen and (max-width: 1500px) {
	.portfolio-item {
		width: 600px;
	}
}

@media screen and (max-width: 700px) {
	.contact {
		flex-direction: column;
		text-align: center;
		width: 100%;
		box-sizing: border-box;
		padding: 40px;
		align-items: center;
	}
	.contact-image {
		margin: 0 auto;
		text-align: center;
	}
	.contact-inner-wrapper {
		flex-direction: column;
		align-items: center;
	}
	.contact-line,
	.address-wrapper {
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	.contact-text {
		margin: 0 auto;
		width: 90%;
	}
	.contact-line.wrap-mobile {
		white-space: pre-wrap;
		max-width: unset;
	}
	.who-banner {
		padding-left: 20px;
		padding-right: 20px;
	}
	.header-title__upper {
		font-size: 65px;
	}
	.header-title__lower {
		font-size: 32px;
	}

	.portfolio-item {
		display: block;
		height: auto;
		padding-top: 20px;
	}
	.portfolio-item-content {
		padding-top: 0;
		padding-left: 40px;
		padding-right: 40px;
		padding-bottom: 40px;
	}
	.portfolio-item-image-wrapper {
		margin: 0 auto;
		height: 100%;
		max-height: 300px;
		max-width: 80%;
	}
	.portfolio-item-backdrop {
		transform: rotate(0deg);
		width: unset;
		height: unset;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}
	.portfolio-overlay {
		padding: 20px;
		overflow: auto;
	}
	.overlay-content {
		display: block;
	}
	.col {
		padding: 20px;
		height: auto;
	}
	.col.col-right {
		height: 200px;
	}
	.overlay-x-button {
		position: fixed;
		padding: 5px;
		top: 20px;
		left: 20px;
		background-color: #000a;
		border-radius: 50%;
	}
	.overlay-image-wrapper {
		margin-top: 20px;
	}
	.overlay-image-wrapper .image-fill {
		transition: transform 0.5s;
	}
	.hidden .overlay-image-wrapper .image-fill.first {
		transform: translate(-0, 0);
	}
	.hidden .overlay-image-wrapper .image-fill.second-first {
		transform: translate(-0, 0);
	}
	.hidden .overlay-image-wrapper .image-fill.second-last {
		transform: translate(0, -0);
	}
	.hidden .overlay-image-wrapper .image-fill.last {
		transform: translate(0, -0);
	}
	.overlay-image-wrapper .image-fill.first {
		transform: translate(-20px, 20px);
	}
	.overlay-image-wrapper .image-fill.second-first {
		transform: translate(-5px, 5px);
	}
	.overlay-image-wrapper .image-fill.second-last {
		transform: translate(5px, -5px);
	}
	.overlay-image-wrapper .image-fill.last {
		transform: translate(20px, -20px);
	}
	.portfolio-item:hover .portfolio-item-image-wrapper .image-fill.first {
		transform: translate(0, 0);
	}
	.portfolio-item:hover
		.portfolio-item-image-wrapper
		.image-fill.second-first {
		transform: translate(0, 0);
	}
	.portfolio-item:hover
		.portfolio-item-image-wrapper
		.image-fill.second-last {
		transform: translate(0, 0);
	}
	.portfolio-item:hover .portfolio-item-image-wrapper .image-fill.last {
		transform: translate(0, 0);
	}
	.portfolio-item:hover
		.portfolio-item-image-wrapper:hover
		.image-fill.first {
		transform: translate(0, 0);
	}
	.portfolio-item:hover
		.portfolio-item-image-wrapper:hover
		.image-fill.second-first {
		transform: translate(0, 0);
	}
	.portfolio-item:hover
		.portfolio-item-image-wrapper:hover
		.image-fill.second-last {
		transform: translate(0, 0);
	}
	.portfolio-item:hover .portfolio-item-image-wrapper:hover .image-fill.last {
		transform: translate(0, 0);
	}
}
@media screen and (max-width: 400px) {
	.contact-line {
		font-size: 16px;
	}
	.header-title__upper {
		font-size: 45px;
	}
	.header-title__lower {
		font-size: 25px;
	}

	.portfolio-item-image-wrapper {
		max-height: 200px;
	}
	.portfolio-item-content {
		padding-top: 0;
		padding-left: 20px;
		padding-right: 20px;
		padding-bottom: 20px;
	}
}