@-webkit-keyframes sound-animation {
	0% {
		-webkit-transform: translate(-50%, -50%) scale(0);
		transform: translate(-50%, -50%) scale(0);
		opacity: 1
	}

	to {
		-webkit-transform: translate(-50%, -50%) scale(1);
		transform: translate(-50%, -50%) scale(1);
		opacity: 0
	}
}

@keyframes sound-animation {
	0% {
		-webkit-transform: translate(-50%, -50%) scale(0);
		transform: translate(-50%, -50%) scale(0);
		opacity: 1
	}

	to {
		-webkit-transform: translate(-50%, -50%) scale(1);
		transform: translate(-50%, -50%) scale(1);
		opacity: 0
	}
}

@-webkit-keyframes grey-scale-animation {
	100% {
		-webkit-filter: grayscale(100%)
	}

	0% {
		-webkit-filter: grayscale(0%)
	}
}

@-moz-keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		-moz-transform: translateY(0);
		transform: translateY(0)
	}

	40% {
		-moz-transform: translateY(-30px);
		transform: translateY(-30px)
	}

	60% {
		-moz-transform: translateY(-15px);
		transform: translateY(-15px)
	}
}

@-webkit-keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}

	40% {
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px)
	}

	60% {
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px)
	}
}

@keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		-moz-transform: translateY(0);
		-ms-transform: translateY(0);
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}

	40% {
		-moz-transform: translateY(-30px);
		-ms-transform: translateY(-30px);
		-webkit-transform: translateY(-30px);
		transform: translateY(-30px)
	}

	60% {
		-moz-transform: translateY(-15px);
		-ms-transform: translateY(-15px);
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px)
	}
}

html {
	font-size: 18px
}

@media only screen and (max-width:480px) {
	html {
		font-size: 16px
	}
}

html body {
	font-size: 1rem !important;
	font-family: "Work Sans", Helvetica, Arial, Lucida, sans-serif;
	line-height: 1.5em !important;
	font-weight: 400
}

html body h6 {
	font-size: 1.15rem !important;
	line-height: 1.2em !important;
	font-weight: 400 !important
}

@media only screen and (max-width:480px) {
	html body h6 {
		font-size: 1.125rem !important
	}
}

html body h5 {
	font-size: 1.3225rem !important;
	line-height: 1.2em !important;
	font-weight: 400 !important
}

@media only screen and (max-width:480px) {
	html body h5 {
		font-size: 1.265625rem !important
	}
}

html body p,
html body a,
html body li {
	font-weight: 400;
	font-size: 1rem
}

html body a.et_pb_button {
	font-size: 1rem
}

html body blockquote,
html body blockquote p {
	font-size: 1rem !important;
	font-style: italic;
	line-height: 1.2em;
	border-left: 0px;
	color: #2ccccc
}

html body .zero-padding-top {
	padding-top: 0px !important
}

@media only screen and (min-width:992px) {
	html body .flex-row {
		display: "flex";
		align-items: center
	}
}

html body .hideScript {
	display: "none"
}

html body .overlay-image {
	position: relative
}

html body .overlay-image:after {
	position: absolute;
	content: "";
	background: #050447;
	background: linear-gradient(180deg, rgba(5, 4, 71, 0) 40%, rgba(5, 10, 37, 0.75) 100%);
	background-size: cover;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0
}

html body .small-border-heading:after {
	position: absolute;
	content: "";
	height: 2px;
	background: #2ccccc;
	width: 15%
}

html body .greyScale {
	filter: grayscale(100%);
	transition: all 1.5s ease-in-out
}

html body .grey-scale-animation {
	filter: grayscale(0%)
}

@media only screen and (max-width:480px) {
	html body .three-col-mobile {
		display: flex
	}

	html body .three-col-mobile .et_pb_column {
		width: 33.33% !important
	}
}

@media only screen and (max-width:992px) {
	html body header .container {
		width: 100%;
		padding-left: 20px;
		padding-right: 20px
	}
}

html body header .logo_container {
	width: auto !important
}

@media only screen and (max-width:480px) {
	html body header .logo_container a img#logo {
		max-width: 140px !important
	}
}

html body header #top-menu-nav ul li.current-menu-item a {
	color: #2ccccc !important
}

html body header #top-menu-nav ul li a {
	font-size: 0.7777777778rem !important
}

html body header .post-pages-menu-row {
	position: relative
}

@media only screen and (max-width:992px) {
	html body header .post-pages-menu-row .et_pb_column_1_4 {
		margin-bottom: 0px !important
	}
}

html body header .post-pages-menu-row .post-pages-menu {
	float: right
}

@media only screen and (max-width:992px) {
	html body header .post-pages-menu-row .post-pages-menu {
		width: 92%
	}
}

@media only screen and (max-width:480px) {
	html body header .post-pages-menu-row .post-pages-menu {
		width: 87%
	}
}

@media only screen and (min-width:992px) {
	html body header .post-pages-menu-row .post-pages-menu ul li.current-menu-item a {
		color: #2ccccc !important
	}

	html body header .post-pages-menu-row .post-pages-menu ul li a {
		font-size: 0.7777777778rem !important
	}
}

@media only screen and (max-width:992px) {
	html body header .post-pages-menu-row .et_pb_column_1_4 {
		width: 54% !important;
		z-index: 99
	}
}

@media only screen and (max-width:992px) {
	html body header .post-pages-menu-row .et_pb_column_3_4 {
		position: absolute;
		right: 30px
	}
}

@media only screen and (max-width:992px) {
	html body header .post-pages-menu-row .et_pb_column_3_4 ul.et_mobile_menu {
		top: 200%
	}
}

html body header #et_mobile_nav_menu .mobile_menu_bar:before {
	color: #ffffff
}

html body header #et_mobile_nav_menu ul.et_mobile_menu {
	background-color: #03061a !important
}

html body header.black #top-menu-nav ul li a {
	color: #000000
}

html body header.black #et_mobile_nav_menu .mobile_menu_bar:before {
	color: #000000
}

html body header.black #et_mobile_nav_menu ul.et_mobile_menu {
	background-color: #ffffff !important
}

html body header.black #et_mobile_nav_menu ul li a {
	color: #000000
}

html body header.black #et_mobile_nav_menu ul li.current-menu-item a {
	color: #2ccccc
}

html body .webgl-container {
	position: relative;
	background-image:url({$theme_path}/static/picture/Background-Concept.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 1
}

html body .webgl-container #webgl-scene-container {
	position: relative;
	overflow: hidden
}

html body .webgl-container #webgl-scene-container #webgl-scene {
	opacity: 0;
	transition: opacity 2s
}

html body .webgl-container #webgl-scene-container .hero-tag-line-container {
	width: 100%;
	height: 100vh;
	background-color: #03061a;
	position: absolute;
	top: 0
}

html body .webgl-container #webgl-scene-container .hero-tag-line-container svg {
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	max-width: 600px
}

html body .webgl-container #webgl-scene-container .hero-key-words {
	position: absolute;
	bottom: 70px;
	width: 100%
}

html body .webgl-container #webgl-scene-container .hero-key-words h6 {
	display: none;
	text-align: center;
	color: #56D9F0;
	width: 80%;
	margin: 0 auto;
	max-width: 600px
}

html body .webgl-container #webgl-scene-container .volume-container {
	position: fixed;
	bottom: 40px;
	right: 30px
}

html body .webgl-container #webgl-scene-container .volume-container .btn-volume {
	z-index: 989;
	border: 0 none;
	outline: none;
	background: transparent;
	cursor: pointer;
	pointer-events: all
}

html body .webgl-container #webgl-scene-container .volume-container .btn-volume:before {
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;
	height: 24px;
	width: 24px;
	border-radius: 50%;
	content: url("data:image/svg+xml,%3Csvg width='24px' height='24px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 17.0208L2 13.0416L2.02437 12.6779C2.33804 7.99852 5.67197 4.11197 10.1659 3.1869C11.3765 2.9377 12.6235 2.9377 13.8341 3.1869C18.328 4.11197 21.662 7.99852 21.9756 12.6779L22 13.0416V17.0208M15.5896 17.8012C15.4203 16.9103 15.4203 15.9944 15.5896 15.1035C15.8616 13.6716 16.8981 12.5182 18.2698 12.121L18.5607 12.0367C18.8632 11.9491 19.176 11.9047 19.4903 11.9047C20.8764 11.9047 22 13.0544 22 14.4727V18.432C22 19.8503 20.8764 21 19.4903 21C19.176 21 18.8632 20.9556 18.5607 20.868L18.2698 20.7837C16.8981 20.3864 15.8616 19.2331 15.5896 17.8012ZM8.41041 17.8012C8.57966 16.9103 8.57966 15.9944 8.41041 15.1035C8.13837 13.6716 7.10192 12.5182 5.7302 12.121L5.43924 12.0367C5.13681 11.9491 4.824 11.9047 4.50968 11.9047C3.12362 11.9047 2 13.0544 2.00001 14.4727L2.00001 18.432C2 19.8503 3.12362 21 4.50968 21C4.824 21 5.13681 20.9556 5.43924 20.868L5.7302 20.7837C7.10192 20.3864 8.13837 19.2331 8.41041 17.8012Z' stroke='%2356d9f0' stroke-width='1.5'/%3E%3C/svg%3E%0A")
}

html body .webgl-container #webgl-scene-container .volume-container .btn-volume .pulsing-circle {
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;
	height: 24px;
	width: 24px;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

html body .webgl-container #webgl-scene-container .volume-container .btn-volume .pulsing-circle:before {
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;
	height: 60px;
	width: 60px;
	content: "";
	z-index: -1;
	-webkit-transform: scale(0);
	transform: scale(0);
	-webkit-animation: all 2s linear infinite;
	animation: all 2s linear infinite;
	border: 2px solid #ffffff;
	border-radius: 50%;
	-webkit-animation-name: sound-animation;
	animation-name: sound-animation;
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s
}

html body .webgl-container #webgl-scene-container .volume-container .btn-volume .pulsing-circle:after {
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	position: absolute;
	top: 50%;
	left: 50%;
	height: 60px;
	width: 60px;
	content: "";
	z-index: -1;
	-webkit-transform: scale(0);
	transform: scale(0);
	-webkit-animation: all 2s linear infinite;
	animation: all 2s linear infinite;
	border: 2px solid #ffffff;
	border-radius: 50%;
	-webkit-animation-name: sound-animation;
	animation-name: sound-animation
}

html body #down-arrow img {
	opacity: 0 !important
}

html body .portfolio-cat {
	display: "none"
}

html body article.post {
	margin-bottom: 0px !important;
	padding-bottom: 0px !important
}

@media only screen and (min-width:992px) {
	html body #left-area {
		width: 100%;
		padding: 23px 0px 0px !important;
		float: none !important
	}
}

html body .downing-map .gm-style .gm-style-iw-d {
	overflow: initial !important
}

html body #web-footer a,
html body #web-footer p {
	font-size: 0.7222222222rem !important;
	line-height: 1em !important;
	color: #505050 !important
}

html body #web-footer a:hover {
	color: #2ccccc !important
}

html body[loaded] #webgl-scene {
	opacity: 1 !important
}

html body[half-loaded-tagline] .hero-tag-line-container {
	background-color: #03061a4a !important;
	-webkit-transition: background-color 1000ms linear;
	-ms-transition: background-color 1000ms linear;
	transition: background-color 1000ms linear
}

html body[loaded-tagline] #down-arrow img {
	-moz-animation: bounce 2s;
	-webkit-animation: bounce 2s;
	animation: bounce 2s;
	opacity: 1 !important;
	transition: 1s all ease-out
}

html body[sound-playing] .pulsing-circle {
	opacity: 1 !important
}

html body #cookie-law-info-bar {
	padding: 40px !important
}

html body #cookie-law-info-bar #wt-cli-accept-btn {
	margin-left: 0px !important;
	margin-top: 10px !important;
	border-radius: 30px !important
}

html body .nf-form-cont .nf-form-fields-required {
	display: none
}

html body .nf-form-cont .nf-form-content {
	padding: 0px
}

@media only screen and (max-width:480px) {
	html body .nf-form-cont .nf-form-content .nf-field-container {
		margin-bottom: 10px
	}
}

html body .nf-form-cont .nf-form-content .nf-field-element>div {
	border: none !important
}

html body .nf-form-cont .nf-form-content input:not([type=button]),
html body .nf-form-cont .nf-form-content textarea,
html body .nf-form-cont .nf-form-content select {
	border: none !important
}

html body .nf-form-cont .nf-form-content input:not([type=button]):focus,
html body .nf-form-cont .nf-form-content textarea:focus,
html body .nf-form-cont .nf-form-content select:focus {
	background-color: #2ccccc36
}

html body .nf-form-cont .nf-form-content input[type=button] {
	padding: 0.3em 1em !important;
	line-height: 1.7em !important;
	background-color: transparent;
	background-size: cover;
	background-position: 50%;
	background-repeat: no-repeat;
	border: 2px solid;
	font-size: 1rem;
	color: #222222 !important;
	border-radius: 30px;
	font-weight: 500;
	transition: all 300ms ease 0ms;
	cursor: pointer
}

html body .nf-form-cont .nf-form-content input[type=button]:hover {
	color: #FFFFFF !important;
	border: 2px solid #222222 !important;
	background-color: #222222
}