/**************************/
/* Fonts */
/**************************/
/* outfit-regular - latin */
@font-face {
	font-display:swap;
	font-family:'Outfit';
	font-style:normal;
	font-weight:400;
	src:url('../webfonts/outfit-v11-latin-regular.woff2') format('woff2');
}
/* outfit-700 - latin */
@font-face {
	font-display:swap;
	font-family:'Outfit';
	font-style:normal;
	font-weight:700;
	src:url('../webfonts/outfit-v11-latin-700.woff2') format('woff2');
}
/* outfit-800 - latin */
@font-face {
	font-display:swap;
	font-family:'Outfit';
	font-style:normal;
	font-weight:800;
	src:url('../webfonts/outfit-v11-latin-800.woff2') format('woff2');
}
/**************************/
/* General Styles */
/**************************/
body,html {
	width:100%;
	height:100%;
	background:#f3f2f2;
}
body,p {
	color:#444;
	font:400 1rem/1.625rem "Outfit",sans-serif;
}
p {
	margin-bottom:1.125rem;
}
h1,h2,h3,h4,h5,h6 {
	font-family:"Outfit",sans-serif;
}
h1 {
	color:#444;
	font-weight:800;
	font-size:3rem;
	line-height:4rem;
}
h2 {
	color:#444;
	font-weight:800;
	font-size:2.5rem;
	line-height:3.25rem;
}
h3 {
	color:#444;
	font-weight:800;
	font-size:1.5rem;
	line-height:2rem;
}
h4 {
	color:#444;
	font-weight:700;
	font-size:1.25rem;
	line-height:1.75rem;
}
h5 {
	color:#444;
	font-weight:700;
	font-size:1.25rem;
	line-height:1.625rem;
}
h6 {
	color:#444;
	font-weight:700;
	font-size:1rem;
	line-height:1.375rem;
}
.p-large {
	font-size:1.125rem;
	line-height:1.75rem;
}
.p-small {
	font-size:0.875rem;
	line-height:1.5rem;
}
.li-space-lg li {
	margin-bottom:0.25rem;
}
a {
	color:#444;
	text-decoration:underline dotted;
}
a:hover {
	color:#444;
	text-decoration:underline dotted;
}
.no-line {
	text-decoration:none;
}
.no-line:hover {
	text-decoration:none;
}
.orange {
	color:#f49f1c;
}
.blue {
	color:#23bad9;
}
.eggplant {
	color:#ac287a;
}
.bg-grey {
	background:#f9f8f8;
}
.btn-solid-reg {
	display:inline-block;
	padding:1.375rem 2.25rem 1.375rem 2.25rem;
	border:1px solid #444;
	border-radius:30px;
	background:#444;
	color:#fff;
	font-weight:700;
	font-size:1rem;
	line-height:0;
	text-decoration:none;
	transition: all 0.2s;
}
.btn-solid-reg:hover {
	background:transparent;
	color:#444;
	/* needs to stay here because of the color property of a tag */
	text-decoration:none;
}
.btn-solid-lg {
	display:inline-block;
	padding:1.625rem 2.625rem 1.625rem 2.625rem;
	border:1px solid #444;
	border-radius:30px;
	background:#444;
	color:#fff;
	font-weight:700;
	font-size:1rem;
	line-height:0;
	text-decoration:none;
	transition: all 0.2s;
}
.btn-solid-lg:hover {
	background:transparent;
	color:#444;
	/* needs to stay here because of the color property of a tag */
	text-decoration:none;
}
.btn-solid-sm {
	display:inline-block;
	padding:1rem 1.5rem 1rem 1.5rem;
	border:1px solid #444;
	border-radius:30px;
	background:#444;
	color:#fff;
	font-weight:700;
	font-size:1rem;
	line-height:0;
	text-decoration:none;
	transition: all 0.2s;
}
.btn-solid-sm:hover {
	background:transparent;
	color:#444;
	/* needs to stay here because of the color property of a tag */
	text-decoration:none;
}
.btn-outline-reg {
	display:inline-block;
	padding:1.375rem 2.25rem 1.375rem 2.25rem;
	border:1px solid #23bad9;
	border-radius:30px;
	background:transparent;
	color:#23bad9;
	font-weight:700;
	font-size:1rem;
	line-height:0;
	text-decoration:none;
	transition:all 0.2s;
}
.btn-outline-reg:hover {
	background:#23bad9;
	color:#fff;
	text-decoration:none;
}
.btn-outline-lg {
	display:inline-block;
	padding:1.625rem 2.625rem 1.625rem 2.625rem;
	border:1px solid #23bad9;
	border-radius:30px;
	background:transparent;
	color:#23bad9;
	font-weight:700;
	font-size:1rem;
	line-height:0;
	text-decoration:none;
	transition:all 0.2s;
}
.btn-outline-lg:hover {
	background:#444;
	color:#fff;
	text-decoration:none;
}
.btn-outline-sm {
	margin-top:.5rem;
	display:inline-block;
	padding:1.25rem 1.5rem 1.25rem 1.5rem;
	border:1px solid #23bad9;
	border-radius:30px;
	background:#23bad9;
	color:#fff;
	font-weight:700;
	font-size:1.25rem;
	line-height:0;
	text-decoration:none;
	transition:all 0.2s;
}
.btn-outline-sm:hover {
	background:#23bad9;
	color:#fff;
	border:1px solid #23bad9;
	text-decoration: none;
}
/* Fade Animation For Rotating Text - ReplaceMe */
@-webkit-keyframes fadeIn {
	from {
			opacity:0;
	}
	to {
			opacity:1;
	}
}
@keyframes fadeIn {
	from {
			opacity:0;
	}
	to {
			opacity:1;
	}
}
.fadeIn {
	-webkit-animation:fadeIn 1.5s;
	animation:fadeIn 1.5s;
}
@-webkit-keyframes fadeOut {
	from {
			opacity:1;
	}
	to {
			opacity:0;
	}
}
@keyframes fadeOut {
	from {
			opacity:1;
	}
	to {
			opacity: 0;
	}
}
/* end of fade animation for rotating text - replaceme */
/**********************/
/* Navigation */
/**********************/
.navbar {
	background:#fff;
	font-weight:700;
	font-size:1.5rem;
	line-height:2.5rem;
	text-align:center;
}
.navbar .navbar-brand {
	padding-top:0.25rem;
	padding-bottom:0.25rem;
}
.navbar .logo-image img {
	width:218px;
	height: 38px;
}
.offcanvas-collapse {
	position:fixed;
	top:64px;
	/* adjusts the height between the top of the page and the offcanvas menu */
	bottom:0;
	left:100%;
	width:100%;
	padding-right:1rem;
	padding-left:1rem;
	overflow-y:auto;
	visibility:hidden;
	background:#444;
	transition:visibility .3s ease-in-out,-webkit-transform .3s ease-in-out;
	transition:transform .3s ease-in-out,visibility .3s ease-in-out;
	transition:transform .3s ease-in-out,visibility .3s ease-in-out,-webkit-transform .3s ease-in-out;
}
.offcanvas-collapse.open {
	visibility:visible;
	-webkit-transform:translateX(-100%);
	transform:translateX(-100%);
}
.navbar .navbar-nav {
	margin-top:0.75rem;
	margin-bottom:0.5rem;
	-webkit-transform: translateY(40%);
	transform: translateY(40%);
}
.navbar .nav-item .nav-link {
	color:#fff;
	text-decoration:none;
	transition:all 0.2s ease;
}
.navbar .nav-item .nav-link:hover,.navbar .nav-item .nav-link.active {
	color:#23bad9;
}
.navbar .nav-item .nav-link.btn-outline-sm,.navbar .nav-item .nav-link.btn-outline-sm:hover,.navbar .nav-item .nav-link.btn-outline-sm.active {
	margin-top:1rem;
	color:#23bad9;
	padding: 1.25rem;
	background:#fff;
	border:1px solid #fff;
}
.navbar .navbar-toggler {
	padding:0;
	border:none;
	font-size:1rem;
	line-height:1rem;
	text-transform:uppercase;
	font-weight:700;
	color:#444;
}
.navbar .navbar-toggler span {
	margin-left:6px;
}
.navbar .navbar-toggler:focus {
	box-shadow:none;
}
@media (min-width:992px) {
	.navbar {
			font-size:1rem;
			line-height:1rem;
	}
	.navbar .nav-item .nav-link {
			padding-top:0.625rem;
			padding-bottom:0.625rem;
			color:#444;
	}
	.navbar .nav-item.dropdown.show .nav-link,.navbar .nav-item .nav-link:hover,.navbar .nav-item .nav-link.active {
			color: #23bad9;
	}
}
/******************/
/* Header */
/******************/
.header {
	height:100vh;
	min-height:500px;
	background:#f9f8f8;
	text-align:center;
}
.header .text-container {
	margin:0 1rem;
}
.header .h1-large {
	font-size:3.25rem;
	line-height:3.5rem;
	margin-left:1.5rem;
	margin-right:1.5rem;
	margin-bottom:1.75rem;
}
.header .replace-me span {
	color:#23bad9;
	text-decoration:underline;
}
.header .p-large {
	margin:0 auto 0.75rem auto;
}
.header .btn-solid-lg {
	margin-bottom: 1.5rem;
}
/********************/
/* Services */
/********************/
.services {
	padding-top:8rem;
	padding-bottom:4.5em;
	text-align:center;
}
.services .card {
	margin-bottom:3rem;
	border:none;
	text-align:center;
	background:none;
}
.services .card-icon {
	width:160px;
	height:160px;
	margin-right:auto;
	margin-bottom:.75rem;
	margin-left:auto;
	border-radius:80px;
	background:rgba(255,255,255,.95);
}
.services .card-icon:hover,.about .image-container img:hover {
	transition:all 0.2s;
	box-shadow:0 0.5rem 2rem 0 rgba(0,0,0,0.1);
}
.services .card-icon .fas,.services .card-icon .far,.services .card-icon .fab {
	color:#ac287a;
	font-size:4rem;
	line-height:155px;
}
.services .card-icon.orange {
	background:#fee3c2;
}
.services .card-icon.orange .fas,.services .card-icon.orange .far,.services .card-icon.orange .fab {
	color:#f49f1c;
	line-height:160px;
}
.services .card-icon.blue {
	background:#d3ebf5;
}
.services .card-icon.blue .fas,.services .card-icon.blue .far,.services .card-icon.blue .fab {
	color:#23bad9;
	line-height:160px;
}
.services .card-body {
	padding:0;
}
.services .card-title {
	margin-bottom: 1rem;
}
/*****************/
/* About */
/*****************/
.about {
	padding-top:5rem;
	padding-bottom:9rem;
}
#attila-mann,#sebastian-lechenbauer {
	padding-top:3rem;
	padding-bottom:3rem;
}
a.orange {
	color:#fff;
	background:#f49f1c;
}
a.orange:hover {
	color:#f49f1c;
	background:#fff;
	text-decoration:none;
}
a.blue {
	color:#fff;
	background:#23bad9;
}
a.blue:hover {
	color:#23bad9;
	background:#fff;
	text-decoration:none;
}
a.eggplant {
	color:#fff;
	background:#ac287a;
}
a.eggplant:hover {
	color:#ac287a;
	background:#fff;
	text-decoration:none;
}
ul.skills {
	margin:0;
}
ul.skills li {
	margin-right:10px;
	padding:14px 0;
}
ul.skills li a {
	cursor:default;
	padding:12px 16px;
	text-decoration:none;
	font-weight:700;
	transition:all 0.2s;
	border-radius: 6px;
}
/*******************/
/* Contact */
/*******************/
.contact {
	padding-top:8rem;
	padding-bottom: 9rem;
}
/*****************/
/* Modal */
/*****************/
.modal {
	padding-left:0;
	padding-right:0;
}
.modal-dialog {
	text-align:left;
	max-width:960px;
	margin-right:.5rem;
	margin-left:.5rem;
	pointer-events:all;
}
.modal-content {
	padding:2.75rem 1.25rem;
	background:#fff;
}
.modal-content a {
	color:#ac287a;
	transition:all 0.2s;
}
.modal-content a:hover {
	color:#23bad9;
}
.modal-content .btn-close {
	position:absolute;
	right:10px;
	top:10px;
}
.modal-content .btn-close:focus {
	box-shadow:none;
}
.modal-content .image-container {
	margin-bottom:1.25rem;
	box-shadow:0 .5rem 2rem 0 rgba(0,0,0,0.2);
	border-radius:6px;
}
.modal-content img {
	border-radius:6px;
}
.modal-content hr {
	width:44px;
	margin-top:0.125rem;
	margin-bottom:1.25rem;
	margin-left:0;
	height:2px;
	border:none;
	background:#53575a;
}
.modal-content h4 {
	margin-bottom:0.625rem;
}
.modal-content .list-unstyled {
	margin-bottom:2rem;
}
.modal-content .list-unstyled .fas {
	font-size:1rem;
	line-height:1.5rem;
	margin-left:.5rem;
	color:#698c0a;
}
.modal-content .list-unstyled .flex-grow-1 {
	margin-left:.5rem;
}
.modal-content .btn-solid-reg {
	margin-right:0.5rem;
}
.modal-content .btn-outline-reg {
	cursor: pointer;
}
/*********************/
/* Portfolio */
/*********************/
.portfolio {
	padding-top:8rem;
	padding-bottom:8em;
}
.card-image {
	position:relative;
	margin-bottom:1rem;
}
.card-image .portfolio-hover {
	background:rgba(0,0,0,0.7);
	position:absolute;
	width:100%;
	height:100%;
	opacity:0;
	transition:all ease 0.5s;
	-webkit-transition:all ease 0.5s;
	-moz-transition:all ease 0.5s;
	border-top-left-radius:4px;
	border-top-right-radius:4px;
}
.portfolio .card:hover .card-image .portfolio-hover {
	opacity:1;
}
.card-image .portfolio-hover .portfolio-hover-content {
	position:absolute;
	width:100%;
	height:1.25rem;
	font-size:1.25rem;
	text-align:center;
	top:50%;
	margin-top:-5px;
	color:#fff;
	font-weight:400;
}
.portfolio .card-body {
	padding:0 1rem;
}
.portfolio .card {
	margin-bottom:5rem;
	border:none;
	background:#fff;
	text-align:center;
	border:none;
	border-radius:6px;
	transition:all 0.2s;
	box-shadow:0 0.5rem 1rem 0 rgba(0,0,0,0.075);
	padding-bottom:.25rem;
}
.card a {
	cursor:pointer;
	text-decoration:none;
}
.portfolio .card-image img {
	border-top-left-radius:6px;
	border-top-right-radius: 6px;
}
/* Hover Effects on Card */
@media (min-width:992px) {
	.portfolio .card:hover {
			margin-top:-.25rem;
			margin-bottom:.25rem;
			box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.2);
	}
}
/******************/
/* Footer */
/******************/
.footer {
	padding-top:6.5rem;
	padding-bottom:2rem;
	background:#444;
}
.footer a {
	color:#fff;
	text-decoration:none;
}
.footer .footer-col {
	margin-bottom:3rem;
}
.footer h5 {
	font-weight:700;
	padding-bottom:1rem;
	margin-bottom:1rem;
	color:#fff;
	opacity:0.8;
	border-bottom:1px dotted #fff;
}
.footer p,.footer ul {
	color:#fff;
	opacity: 0.8;
}
/*********************/
/* Copyright */
/*********************/
.copyright {
	padding-bottom:1rem;
	background:#444;
	text-align:center;
}
.copyright p {
	color:#ccc;
}
.copyright a,.copyright a:not([href]):not([class]) {
	color:#ccc;
	text-decoration:none;
	cursor:pointer;
	transition:all 0.2s;
}
.copyright a:hover,.copyright a:not([href]):not([class]):hover {
	color:#fff;
	text-decoration: none;
}
/******************************/
/* Back To Top Button */
/******************************/
#myBtn {
	position:fixed;
	z-index:99;
	bottom:20px;
	right:20px;
	display:none;
	width:52px;
	height:52px;
	border:none;
	border-radius:50%;
	outline:none;
	background:rgba(68,68,68,.6);
	cursor:pointer;
}
#myBtn:hover {
	transition:0.3s;
	background:rgba(0,0,0,.6);
}
#myBtn img {
	margin-bottom:0.25rem;
	width: 18px;
}
/*************************/
/* Media Queries */
/*************************/
/* Min-width 768px */
@media (min-width:768px) {
	/* Header */
	.header .h1-large {
			font-size:5rem;
			line-height:6rem;
			margin-bottom: 2rem;
	}
	/* end of header */
}
/* end of min-width 768px */
/* Min-width 992px */
@media (min-width:992px) {
	h1 {
			font-size:5rem;
			line-height:6rem;
	}
	h2 {
			font-size:3.5rem;
			line-height:4.25rem;
	}
	h3 {
			font-size:1.75rem;
			line-height:2.25rem;
	}
	h4 {
			font-size:1.5rem;
			line-height: 2.125rem;
	}
	/* Navigation */
	.navbar {
			padding-top:1.75rem;
			background:transparent;
			box-shadow:none;
			transition:all 0.2s;
	}
	.navbar.top-nav-collapse {
			padding-top:0.5rem;
			padding-bottom:0.5rem;
			background:#fff;
	}
	.offcanvas-collapse {
			position:static;
			top:auto;
			bottom:auto;
			left:auto;
			width:auto;
			padding-right:0;
			padding-left:0;
			background:transparent;
			overflow-y:visible;
			visibility:visible;
	}
	.offcanvas-collapse.open {
			-webkit-transform:none;
			transform:none;
	}
	.navbar .navbar-nav {
			margin-top:0;
			margin-bottom:0;
			-webkit-transform: none;
			transform: none;
	}
	.navbar .nav-item .nav-link {
			padding-right:0.75rem;
			padding-left:0.75rem;
	}
	.navbar .nav-item .nav-link.btn-outline-sm {
			margin-top:0;
			margin-left:0.625rem;
			border:1px solid #23bad9;
			color:#23bad9;
			background:transparent;
			padding:1rem 1.25rem;
			font-size:1rem;
	}
	.navbar .nav-item .nav-link.btn-outline-sm:hover,.navbar .nav-item .nav-link.btn-outline-sm.active {
			margin-top:0;
			padding:1rem 1.25rem;
			background:#23bad9;
			color: #fff;
	}
	/* end of navigation */
	/* Header */
	.header .btn-solid-lg {
			display:inline-block;
			margin-bottom: 0;
	}
	/* end of header */
	/* Services */
	.services .card {
			display:inline-block;
			width:286px;
			vertical-align:top;
			background:none;
	}
	.services .card:nth-of-type(3n+2) {
			margin-right:2rem;
			margin-left: 2rem;
	}
	/* end of services */
	/* About */
	.about .text-container {
			margin-bottom: 0;
	}
	/* end of About */
	/* Modal */
	/* Stops body and navbar shift on modal open */
	body.modal-open {
			overflow-y:scroll !important;
			padding-right:0 !important;
	}
	body.modal-open .navbar {
			padding-right: 0 !important;
	}
	/* end of stops body and navbar shift on modal open */
	.modal-dialog {
			text-align:left;
			margin-top:30px;
			margin-right:auto;
			margin-left:auto;
	}
	.modal-content .image-container {
			margin-bottom:3rem;
			border-radius:12px;
	}
	.modal-content img {
			border-radius:12px;
	}
	.modal-content {
			padding-top:4rem;
			padding-right:4rem;
			padding-left:4rem;
			border-radius: 12px;
	}
	/* end of modal */
	/* Footer */
	.footer .footer-col {
			margin-bottom:2rem;
	}
	.footer .footer-col.first {
			display:inline-block;
			width:260px;
			margin-right:1.25rem;
			vertical-align:top;
	}
	.footer .footer-col.second {
			display:inline-block;
			width:350px;
			margin-right:1.25rem;
			vertical-align:top;
	}
	.footer .footer-col.third {
			display:inline-block;
			width:260px;
			vertical-align:top;
	}
	.footer .footer-col.third .fa-stack {
			margin-right:0;
			margin-left: 0.375rem;
	}
	/* end of footer */
}
/* end of min-width 992px */
/* Min-width 1200px */
@media (min-width:1200px) {
	/* General Styles */
	.container {
			max-width: 1140px;
	}
	/* end of general styles */
	/* Header */
	.header .h1-large {
			font-size:6rem;
			line-height:7rem;
	}
	.header .image-container {
			position:relative;
	}
	.header .image-container img {
			position:absolute;
			top:-180px;
			left:-10px;
			width:840px;
			max-width: none;
	}
	/* end of header */
	/* Services */
	.services .card {
			width:310px;
	}
	.services .card:nth-of-type(3n+2) {
			margin-right:5.5rem;
			margin-left: 5.5rem;
	}
	/* end of services */
	/* Footer */
	.footer .footer-col.first {
			width:290px;
			margin-right:6rem;
	}
	.footer .footer-col.second {
			margin-right:6.5rem;
	}
	.footer .footer-col.third {
			text-align: left;
	}
	/* end of footer */
}
/* end of min-width 1200px */