.readmorebody{
  margin:0 auto;
  max-width:100%;
  display:block;
}
details {
  position:relative;
	background
}
details summary {
	display: block;
  cursor: pointer;
  font-size: 16px;
  color: #555;
  line-height: 24px;
}
details summary:focus {
  outline:none;
}
details[open] {
  display:block;
  padding-bottom:25px;
  padding-top:10px;
  animation: open .2s linear;
}
details[open] summary {
position: absolute;
  bottom: 0;
  left: 50%;
  width: 85px;
  left: 50%;
  transform: translate(-50%,-50%);
}
details #open{padding-left:5px;text-align:middle;}
details #open:after{
    display: inline-block;
    position:relative;
    top: -3px;
    padding-left: 8px;
    content: "\00bb";
    transform: rotate(90deg);
}
details[open] #open{display:none;}
details #close{display:none;}
details[open] #close{display:block;}
::-webkit-details-marker {display: none;}
.hiddenp {
margin-top: -24px;	
}
@keyframes open {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
ul li {
font-size: 18px;
  color: #555;
  line-height: 28px;
  margin-left: 20px;	
}
.img_wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
  gap: 20px;
}
.img_cont {
  grid-column: span 2;
  margin-top: 20px;
}


.invalid-feedback,
.empty-feedback {
  display: none;
}

.was-validated :placeholder-shown:invalid ~ .empty-feedback {
  display: block;
	color: red;
}

.was-validated :not(:placeholder-shown):invalid ~ .invalid-feedback {
  display: block;
	color: red;
}

/*!
 * Bootstrap v4.0.0 (https://getbootstrap.com)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
:root {
	--blue: #007bff;
	--indigo: #6610f2;
	--purple: #6f42c1;
	--pink: #e83e8c;
	--red: #dc3545;
	--orange: #fd7e14;
	--yellow: #ffc107;
	--green: #28a745;
	--teal: #20c997;
	--cyan: #17a2b8;
	--white: #fff;
	--gray: #6c757d;
	--gray-dark: #343a40;
	--primary: #007bff;
	--secondary: #6c757d;
	--success: #28a745;
	--info: #17a2b8;
	--warning: #ffc107;
	--danger: #dc3545;
	--light: #f8f9fa;
	--dark: #343a40;
	--breakpoint-xs: 0;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

*,
::after,
::before {
	box-sizing: border-box
}

html {
	font-family: sans-serif;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-ms-overflow-style: scrollbar;
	-webkit-tap-highlight-color: transparent
}

article,
figure,
header,
nav,
section {
	display: block
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: left;
	background-color: #fff
}

h2,
h3 {
	margin-top: 0;
	margin-bottom: .5rem
}

p {
	margin-top: 0;
	margin-bottom: 1rem
}

b {
	font-weight: bolder
}

a {
	color: #007bff;
	text-decoration: none;
	background-color: transparent;
	-webkit-text-decoration-skip: objects
}

a:hover {
	color: #0056b3;
	text-decoration: underline
}

a:not([href]):not([tabindex]) {
	color: inherit;
	text-decoration: none
}

a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
	color: inherit;
	text-decoration: none
}

a:not([href]):not([tabindex]):focus {
	outline: 0
}

figure {
	margin: 0 0 1rem
}

img {
	vertical-align: middle;
	border-style: none
}

label {
	display: inline-block;
	margin-bottom: .5rem
}

button {
	border-radius: 0
}

button:focus {
	outline: 1px dotted;
	outline: 5px auto -webkit-focus-ring-color
}

button,
input,
textarea {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit
}

button,
input {
	overflow: visible
}

button {
	text-transform: none
}

[type=submit],
button {
	-webkit-appearance: button
}

[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
	padding: 0;
	border-style: none
}

input[type=checkbox] {
	box-sizing: border-box;
	padding: 0
}

textarea {
	overflow: auto;
	resize: vertical
}

fieldset {
	min-width: 0;
	padding: 0;
	margin: 0;
	border: 0
}

legend {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin-bottom: .5rem;
	font-size: 1.5rem;
	line-height: inherit;
	color: inherit;
	white-space: normal
}

::-webkit-file-upload-button {
	font: inherit;
	-webkit-appearance: button
}

h2,
h3 {
	margin-bottom: .5rem;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.2;
	color: inherit
}

h2 {
	font-size: 2rem
}

h3 {
	font-size: 1.75rem
}

.img-fluid {
	max-width: 100%;
	height: auto
}

.container {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto
}

@media (min-width:576px) {
	.container {
		max-width: 540px
	}
}

@media (min-width:768px) {
	.container {
		max-width: 720px
	}
}

@media (min-width:992px) {
	.container {
		max-width: 960px
	}
}

@media (min-width:1200px) {
	.container {
		max-width: 1242px
	}
}

.row {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px
}

.col-lg-12,
.col-lg-4,
.col-lg-6,
.col-lg-8,
.col-sm-12 {
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px
}

.order-2 {
	-webkit-box-ordinal-group: 3;
	-ms-flex-order: 2;
	order: 2
}

@media (min-width:576px) {
	.col-sm-12 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%
	}
}

@media (min-width:992px) {
	.col-lg-4 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 33.333333%;
		flex: 0 0 33.333333%;
		max-width: 33.333333%
	}

	.col-lg-6 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%
	}

	.col-lg-8 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 66.666667%;
		flex: 0 0 66.666667%;
		max-width: 66.666667%
	}

	.col-lg-12 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%
	}

	.order-lg-0 {
		-webkit-box-ordinal-group: 1;
		-ms-flex-order: 0;
		order: 0
	}
}

.btn:not(:disabled):not(.disabled) {
	cursor: pointer
}

.btn:not(:disabled):not(.disabled).active,
.btn:not(:disabled):not(.disabled):active {
	background-image: none
}

.btn-info:not(:disabled):not(.disabled).active,
.btn-info:not(:disabled):not(.disabled):active {
	color: #fff;
	background-color: #117a8b;
	border-color: #10707f
}

.btn-info:not(:disabled):not(.disabled).active:focus,
.btn-info:not(:disabled):not(.disabled):active:focus {
	box-shadow: 0 0 0 .2rem rgba(23, 162, 184, .5)
}

.btn-light:not(:disabled):not(.disabled).active,
.btn-light:not(:disabled):not(.disabled):active {
	color: #212529;
	background-color: #dae0e5;
	border-color: #d3d9df
}

.btn-light:not(:disabled):not(.disabled).active:focus,
.btn-light:not(:disabled):not(.disabled):active:focus {
	box-shadow: 0 0 0 .2rem rgba(248, 249, 250, .5)
}

.collapse {
	display: none
}

.navbar {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	padding: .5rem 1rem
}

.navbar-brand {
	display: inline-block;
	padding-top: .3125rem;
	padding-bottom: .3125rem;
	margin-right: 1rem;
	font-size: 1.25rem;
	line-height: inherit;
	white-space: nowrap
}

.navbar-brand:focus,
.navbar-brand:hover {
	text-decoration: none
}

.navbar-collapse {
	-ms-flex-preferred-size: 100%;
	flex-basis: 100%;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center
}

@media (min-width:992px) {
	.navbar-expand-lg {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-flow: row nowrap;
		flex-flow: row nowrap;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start
	}

	.navbar-expand-lg .navbar-collapse {
		display: -webkit-box !important;
		display: -ms-flexbox !important;
		display: flex !important;
		-ms-flex-preferred-size: auto;
		flex-basis: auto
	}
}

.navbar-light .navbar-brand {
	color: rgba(0, 0, 0, .9)
}

.navbar-light .navbar-brand:focus,
.navbar-light .navbar-brand:hover {
	color: rgba(0, 0, 0, .9)
}

.d-inline-block {
	display: inline-block !important
}

.d-flex {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important
}

.flex-column {
	-webkit-box-orient: vertical !important;
	-webkit-box-direction: normal !important;
	-ms-flex-direction: column !important;
	flex-direction: column !important
}

.justify-content-end {
	-webkit-box-pack: end !important;
	-ms-flex-pack: end !important;
	justify-content: flex-end !important
}

.justify-content-center {
	-webkit-box-pack: center !important;
	-ms-flex-pack: center !important;
	justify-content: center !important
}

.align-items-center {
	-webkit-box-align: center !important;
	-ms-flex-align: center !important;
	align-items: center !important
}

.float-left {
	float: left !important
}

.position-relative {
	position: relative !important
}

.w-100 {
	width: 100% !important
}

.mb-0 {
	margin-bottom: 0 !important
}

.p-0 {
	padding: 0 !important
}

.pr-0 {
	padding-right: 0 !important
}

.pl-0 {
	padding-left: 0 !important
}

.pr-5 {
	padding-right: 3rem !important
}

.pl-5 {
	padding-left: 3rem !important
}

.text-center {
	text-align: center !important
}

@media (min-width:992px) {
	.text-lg-left {
		text-align: left !important
	}
}

@media print {

	*,
	::after,
	::before {
		text-shadow: none !important;
		box-shadow: none !important
	}

	a:not(.btn) {
		text-decoration: underline
	}

	img {
		page-break-inside: avoid
	}

	h2,
	h3,
	p {
		orphans: 3;
		widows: 3
	}

	h2,
	h3 {
		page-break-after: avoid
	}

	@page {
		size: a3
	}

	body {
		min-width: 992px !important
	}

	.container {
		min-width: 992px !important
	}

	.navbar {
		display: none
	}
}

h1,
h2,
h4 {
	color: #000 !important
}

.contact a,
.generic-btn a {
	color: #fff;
	padding: 14px 29px;
	font-size: 14px;
	display: inline-block;
	line-height: 20px;
	text-decoration: none;
	transition-duration: .3s;
	transition-property: transform;
	transition-timing-function: ease-out;
	font-weight: 700;
	border-radius: 1rem;
	letter-spacing: .1px;
	text-transform: uppercase;
	text-align: center
}

.contact a {
	background: #000
}

:root {
	--primary-color: #3f396d;
	--secondary-color: #07003b;
	--accent: hsl(201.1, 100%, 60.4%);
	--text-color: #7d7789;
	--off-white-color: #f0f4ff;
	--light-purple-color: #00aae5;
	--white-color: #fff;
	--light-grey-color: #f2f2ff
}

h1 {
	font-size: 85px;
	line-height: 88px
}

h2 {
	font-size: 52px;
	line-height: 59px;
	font-weight: 700 !important
}

h4 {
	font-size: 25px;
	line-height: 28px
}

h6,
p {
	font-size: 22px
}

h6 {
	line-height: 24px;
	color: var(--light-purple-color)
}

p {
	font-size: 1.25rem;
	line-height: 1.75rem;
	letter-spacing: -.03em;
	font-weight: 500
}

.contact a:hover,
.generic-btn a:hover {
	background: #4b4b4b
}

.generic-btn a {
	background: var(--accent);
	border-radius: 12px;
	border: 1px solid transparent
}

.padding-top {
	padding-top: 80px
}

.padding-bottom {
	padding-bottom: 130px
}

@font-face {
	font-family: Montserrat;
	src: url(https://probetraining.joshimitsubjj.ch/assets/fonts/Montserrat-VariableFont_wght.woff2) format('woff2');
	font-display: swap
}

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box
}

body {
	font-family: Montserrat, "fallback for montserrat" !important
}

#button-probetraining a,
.contact-form button,
.service-box-item,
.service-box-item figure img {
	transition-duration: .3s;
	transition-property: transform;
	transition-timing-function: ease-out
}

#contactForm,
.service-box .row,
.skill-right-con p:nth-child(4) {
	margin-bottom: 30px
}

#content-parallax,
#image-parallax,
.lazy,
.mosaic-item {
	position: relative
}

body {
	font-weight: 400
}

#button-probetraining a,
.contact-form button {
	text-decoration: none;
	letter-spacing: .1px;
	text-transform: uppercase text-align: center
}

#button,
#button-probetraining.hidden {
	opacity: 0;
	visibility: hidden
}

#button,
.contact-title,
.content,
.filterDiv {
	text-align: center
}

.probetraining_button_text {
	font-size: 11px;
	font-style: initial;
	text-transform: initial;
	display: block;
	font-weight: 500;
	line-height: 13px;
	text-align: center
}

.track,
html {
	scroll-behavior: smooth
}

#h-captcha-error {
  color: #dc2626; /* rot */
  font-size: 0.875rem;
  margin-top: 0.25rem;
}


#image-parallax,
.form-main-con,
.lazy,
.mosaic-item,
.portfolio-body-con,
.project-card,
.skill-con,
.slider {
	overflow: hidden
}

#button:hover,
.cf-button,
.cf-checkbox,
.dot,
.icon,
.nav-btn,
.project-card,
.project-card__btn {
	cursor: pointer
}

.service-box-item-content a::after {
	left: 0;
	bottom: -2px;
	width: 0;
	height: 2px;
	content: '';
	background: var(--light-purple-color);
	transition: .3s ease-in-out;
	background: #fff;
	position: absolute
}

.lazy {
	width: 100%;
	height: 350px
}

.lazy iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0
}

.filterDiv.show,
.logo,
.portfolio-img-con .filterDiv:hover .portfolio-img figure:after,
.portfolio-img-con .filterDiv:hover .portfolio-img-content,
.project-card[active] .project-card__btn,
.project-card[active] .project-card__desc {
	display: block
}

.logo-mob {
	display: none
}

.portfolio-img img,
.skill-inner-con img {
	border-radius: 12px;
	width: 100%;
	height: auto;
}

.banner-con a,
.portfolio-img-content a,
.service-box-item a {
	text-decoration: none
}

.copy-right-content a {
	color: #38c5ff !important
}

.header-and-banner-con {
	overflow: hidden;
	position: relative
}

.mosaic-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px
}

.mosaic-item {
	background-color: #f3f3f3;
	border-radius: 1rem
}

.mosaic-item img {
	width: 100%;
	height: 200px;
	object-fit: cover
}

.content {
	padding: 40px
}

.content h3 {
	font-size: 1.2em;
	margin: 10px 0;
	font-weight: 700
}

.content p {
	font-size: 18px;
	color: #555;
	line-height: 28px
}

.mosaic-item.large {
	grid-column: span 3;
}

.mosaic-item.medium {
	grid-column: span 1.5;
	grid-row: span 1
}

.mosaic-item.small {
	grid-column: span 1;
	grid-row: span 1
}

.mosaic-item.small p {
	padding: 10px;
	font-style: italic;
	background-color: #e6e6e6;
	border-radius: 5px
}

#image-parallax {
	width: 100%;
	z-index: -1;
	height: 100vh
}

#image-parallax::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--darkness, 0));
	transition: background .1s linear;
	z-index: 1;
	pointer-events: none
}

#content-parallax {
	width: 100%;
	z-index: 1
}

#navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	transition: transform .4s, opacity .4s;
	z-index: 1000
}

#hero-video-loop,
.main-header,
.overlay-content {
	position: absolute
}

#navbar.hide {
	transform: translateY(-100%);
	opacity: 0
}

#hero-video-loop {
	width: 100%;
	height: 100vh;
	object-fit: cover;
	top: 0;
	left: 0
}

.overlay-content {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh
}

.container-banner-text-overlay {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 11rem !important
}

#button-probetraining {
	width: 298px;
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	visibility: visible
}

#button-probetraining a {
	color: #fff;
	background: #000;
	padding: 22px 31px;
	font-size: 14px;
	display: inline-block;
	line-height: 20px;
	font-weight: 700;
	border-radius: 1rem
}

#button-probetraining a:hover {
	background: #4b4b4b
}

.card,
.flex {
	display: flex
}

.card {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
	padding: 1.5rem;
	flex-direction: column;
	justify-content: space-between;
	transition: transform .25s, box-shadow .25s
}

.icon,
.service-box-item figure {
	display: flex;
	align-items: center
}

.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .1)
}

.small {
	font-size: 1rem
}

.medium {
	font-size: 1.3rem
}

.large {
	font-size: 1.6rem
}

.author {
	font-weight: 600;
	margin-top: auto;
	color: #111
}

.icon {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #000;
	color: #fff;
	justify-content: center;
	font-size: 18px;
	margin-top: 1rem;
	align-self: flex-end
}

.icon:hover {
	background: #333
}

.header-con {
	padding-top: 15px;
	padding-bottom: 15px
}

.main-header,
.service-box-item-content a:hover::after {
	width: 100%
}

.header-con .nav-item {
	padding: 0 18px;
	font-size: 20px
}

.banner-main-con {
	height: 100vh;
	width: 100%
}

.banner-con.text-lg-left.text-center {
	height: calc(100vh - 36rem);
	top: 36rem;
	position: absolute
}

.banner-main-con2 {
	padding-top: 130px
}

.banner-heading h2 {
	color: #fff !important;
	font-size: 58px;
	line-height: 60px
}

.banner-heading p {
	color: #fff;
	font-weight: 600
}

.navbar-nav .nav-item:last-child {
	padding-right: 50px
}

.header-con .nav-item a:hover {
	color: var(--accent) !important
}

.header-con .nav-item a {
	color: var(--secondary-color) !important
}

.banner-heading h2,
.service-box-item-content h4 {
	color: var(--primary-color);
	font-weight: 700
}

.banner-heading h1,
.service-box-item-content a:hover,
.service-box-item:hover .service-box-item-content h4 {
	color: var(--light-purple-color)
}

.banner-heading h1 {
	font-weight: 700;
	margin-bottom: 6px
}

.banner-heading p,
.generic-title {
	margin-bottom: 26px;
	line-height: 26px;
	margin-top: 30px
}

.service-box-item:hover figure img {
	transform: translateY(-8px)
}

.fixed-header,
.weight-footer-con::before {
	left: 0;
	top: 0
}

.generic-title h6 {
	font-weight: 600;
	margin-bottom: 14px
}

.generic-title h2 {
	font-weight: 700
}

.contact-information-content a {
	color: #fff
}

.form-main-inner-con h2,
.service-inner-con h2 {
	color: var(--primary-color)
}

.service-box {
	perspective: 100px
}

.service-box-item {
	background: #fff;
	border: 1px solid transparent;
	padding: 40px 36px;
	border-radius: 20px;
	box-shadow: 0 0 6px 0 #eee
}

.service-box-item:hover {
	border-color: var(--light-purple-color)
}

.service-box-item figure {
	width: 130px;
	height: 130px;
	background: #f4f9ff;
	position: absolute;
	justify-content: center;
	border-radius: 50%
}

#button,
.contact-form button,
.portfolio-img figure {
	display: inline-block
}

.service-box-item figure img {
	border-radius: 20px
}

.service-box-item-content {
	margin-left: 156px
}

.service-box-item-content p {
	font-size: 18px;
	line-height: 26px;
	margin-bottom: 8px;
	text-align: justify;
	padding: 15px 25px;
	color: var(--text-color)
}

.service-box-item-content a {
	font-size: 18px;
	color: var(--accent);
	padding-bottom: 5px;
	position: relative
}

.service-box .row:last-child {
	margin-bottom: 40px
}

.portfolio-con {
	height: 544px;
	position: relative;
	background: #000
}

.filterDiv {
	float: left;
	width: 100px;
	display: none
}

.portfolio-img-con {
	margin: 0 -15px
}

.portfolio-img-con .filterDiv:first-child {
	width: 66.6667%;
	padding: 0 15px
}

.portfolio-img-con .filterDiv:nth-child(2) {
	margin-bottom: 13px
}

.portfolio-img-con .filterDiv:last-child,
.portfolio-img-con .filterDiv:nth-child(2),
.portfolio-img-con .filterDiv:nth-child(3),
.portfolio-img-con .filterDiv:nth-child(4) {
	width: 33.33333%;
	padding: 0 15px
}

.portfolio-img-content {
	position: absolute;
	bottom: 30px;
	width: 100%;
	padding: 0 48px 0 20px;
	display: none
}

.portfolio-img-title h4 {
	font-weight: 700;
	color: var(--white-color);
	margin-bottom: 0;
	font-size: 18px;
	line-height: 18px
}

.portfolio-img-title p {
	color: var(--white-color);
	font-size: 16px;
	margin-bottom: 0;
	line-height: 22px
}

.portfolio-img-content a i {
	background: var(--accent);
	color: var(--white-color);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-weight: 300;
	font-size: 20px
}

.portfolio-img-con .filterDiv:first-child .portfolio-img figure:after {
	width: 100%;
	height: 322px;
	left: 0
}

.contact-information,
.portfolio-img-con img {
	border-radius: 12px
}

.portfolio-body-con {
	margin-top: -250px
}

.portfolio-btn {
	margin-top: 26px
}

.skill-inner-con {
	z-index: 1;
	background: #f3f5f9;
	padding: 50px;
	border-radius: 1rem
}

.skill-right-con {
	padding-left: 40px
}

.skill-right-con h6 {
	font-weight: 600;
	margin-bottom: 15px
}

.skill-right-con h2 {
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 32px
}

.skill-left-con p,
.skill-right-con p {
	color: #605c66;
	margin-bottom: 15px;
	font-size: 20px;
	text-align: justify
}

.skill-right-con a {
	color: #000
}

@keyframes firstPercentage {
	0% {
		transform: rotate(0)
	}

	100% {
		transform: rotate(135deg)
	}
}

@keyframes secondPercentage {
	0% {
		transform: rotate(0)
	}

	100% {
		transform: rotate(170deg)
	}
}

@keyframes thirdPercentage {
	0% {
		transform: rotate(0)
	}

	100% {
		transform: rotate(150deg)
	}
}

@keyframes fourPercentage {
	0% {
		transform: rotate(0)
	}

	100% {
		transform: rotate(140deg)
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

.skill-left-con .skill-left-item-con {
	background: var(--white-color);
	padding: 33px 28px 35px;
	box-shadow: 0 0 85px 0 #e9eefc;
	border-radius: 20px
}

.weight-footer-con::before,
.weight-footer-con:after {
	width: 286px;
	height: 288px;
	position: absolute;
	content: ""
}

.contact-information-content {
	margin-left: 76px
}

.contact-information-content h5 {
	font-size: 20px;
	color: var(--white-color);
	font-weight: 600;
	margin-bottom: 4px
}

.contact-information-content p {
	font-size: 16px;
	line-height: 22px;
	color: var(--white-color)
}

.contact-form button {
	color: #fff;
	background: #38c5ff;
	padding: 22px 31px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	border-radius: 1rem;
	border: 1px solid #e0e1e4
}

.contact-form button:hover {
	background: #51cbfd
}

.weight-footer-con {
	padding-top: 68px;
	padding-bottom: 68px;
	background: #fff
}

.weight-footer-content figure {
	margin-bottom: 38px
}

.copy-right-content p {
	font-size: 14px;
	color: #000;
	line-height: 24px
}

.weight-footer-con:after {
	bottom: 0;
	right: 0
}



.checkbox-error {
  color: #dc2626;       /* rot */
  font-size: 1rem;
  margin-top: 0.25rem;
}
.hidden {
  display: none;
}



#button {
	background-color: #000;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	position: fixed;
	bottom: 57px;
	right: 113px;
	transition: background-color .3s, opacity .5s, visibility .5s;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-animation: 2s infinite spineer;
	animation: 2s infinite spineer
}

@-webkit-keyframes spineer {
	from {
		box-shadow: 0 0 0 0 rgb(0 170 229)
	}

	to {
		box-shadow: 0 0 0 12px rgba(53, 184, 255, .01)
	}
}

@keyframes spineer {
	from {
		box-shadow: 0 0 0 0 rgb(0 170 229)
	}

	to {
		box-shadow: 0 0 0 12px rgba(53, 184, 255, .01)
	}
}

#button:active {
	background-color: #555
}

#button.show {
	opacity: 1;
	visibility: visible
}

.fixed-header {
	background: #fff;
	z-index: 3;
	transition: top 5s linear;
	padding: 0 !important;
	position: fixed;
	right: 0;
	animation: .7s slide-down;
	box-shadow: 0 0 12px 0 #e9eefc
}

@-webkit-keyframes mover {
	0% {
		transform: translateY(0)
	}

	100% {
		transform: translateY(-20px)
	}
}

@-webkit-keyframes left-mover {
	0% {
		transform: translatex(0)
	}

	100% {
		transform: translatex(10px)
	}
}

@-webkit-keyframes right-mover {
	0% {
		transform: translatex(0)
	}

	100% {
		transform: translatex(-10px)
	}
}

.skill-left-con .skill-left-item-con {
	transform: scale(1);
	transition: transform .5s ease-in-out
}

.skill-left-con .skill-left-item-con:hover {
	transform: scale(1.1);
	box-shadow: 0 0 85px 0 #d9e3ff
}

@keyframes slide {
	100% {
		top: -360px
	}
}

@keyframes typing {

	40%,
	60% {
		left: calc(100% + 30px)
	}

	100% {
		left: 0
	}
}

.banner-right-con img[alt=banner-right-img] {
	animation: 1s ease-in-out infinite alternate right-mover
}

#contactForm {
	border-radius: 1rem;
	padding: 50px;
	border: 1px solid #e0e1e4
}

.contact-messages,
.contact-title {
	margin-bottom: 1em
}

.contact-title {
	font-size: 1.8em;
	color: #fff
}

.cf-error {
	font-weight: 700;
	margin: .3em 0
}

.cf-error {
	color: #ff4d4d
}

.cf-label {
	display: block;
	margin-top: 1em;
	font-weight: 500;
	color: #000
}

.cf-input,
.cf-textarea {
	width: 100%;
	padding: .6em;
	margin-top: .3em;
	border: 1px solid #e0e1e4;
	border-radius: 6px;
	font-size: 1em;
	background: #fff;
	color: #000;
	box-sizing: border-box;
	transition: border .3s, background .3s
}

.cf-input:focus,
.cf-textarea:focus {
	outline: 0;
	border: 1px solid #07c;
	background: #f3f5f9
}

.cf-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em
}

.cf-button {
	display: inline-block;
	margin-top: 1.5em;
	padding: .8em 1.6em;
	font-size: 1em;
	font-weight: 700;
	color: #fff;
	background: #38c5ff !important;
	border: none;
	border-radius: 6px;
	transition: background .3s, transform .2s
}

.cf-button:hover {
	background: #005fa3;
	transform: translateY(-2px)
}

.cf-consent {
	margin-top: 1.5em;
	display: flex;
	align-items: flex-start;
	gap: .6em
}

.cf-checkbox {
	margin-top: .2em;
	accent-color: #38c5ff;
	width: 18px;
	height: 18px
}

.cf-consent-label {
	font-size: .9em;
	color: #000;
	line-height: 1.4
}

.cf-consent-label a {
	color: #000;
	text-decoration: underline
}

.cf-consent-label a:hover {
	color: #005fa3
}

.cf-fieldset {
	margin-top: 1.5em;
	border: none;
	padding: 0
}

.cf-checkbox-group {
	display: flex;
	flex-wrap: wrap;
	gap: 1em 2em;
	margin-top: .5em
}

.head,
.slider {
	max-width: 1400px;
	margin: auto
}

.cf-checkbox-group label {
	color: #000;
	font-size: .95em;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: .4em;
	width: 100%
}

@media (max-width:768px) {
	.cf-row {
		grid-template-columns: 1fr
	}
}

:root {
	--gap: 1.25rem;
	--speed: 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--closed: 9rem;
	--open: 34rem;
	--accent: #ff6b35
}

.head {
	padding: 70px 0 40px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem
}

.nav-btn {
	width: 2.5rem;
	height: 2.5rem;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, .12);
	color: #fff;
	font-size: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: .3s
}

.project-card,
.project-card__bg {
	transition: filter .3s, transform var(--speed)
}

.nav-btn:hover {
	background: #000
}

.nav-btn:disabled {
	opacity: .3;
	cursor: default
}

.controls {
	display: flex;
	flex-direction: row;
	gap: .5rem
}

.track {
	display: flex;
	gap: var(--gap);
	align-items: flex-start;
	scroll-snap-type: x mandatory;
	padding-bottom: 40px
}

.track::-webkit-scrollbar {
	display: none
}

.project-card {
	position: relative;
	flex: 0 0 var(--closed);
	height: 30rem;
	border-radius: 1rem
}

.project-card[active] {
	flex-basis: var(--open)
}

.project-card__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(.75) saturate(75%)
}

.project-card:hover .project-card__bg {
	filter: brightness(.9) saturate(100%);
	transform: scale(1.06)
}

.project-card__content::before {
	content: "";
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
	background: linear-gradient(180deg, hsla(0, 0%, 100%, .8) 33.35%, hsla(0, 0%, 100%, 0))
}

.project-card__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: .7rem;
	padding: 0;
	background: linear-gradient(transparent 100%, rgba(0, 0, 0, .85) 30%);
	z-index: 2
}

.project-card__title {
	color: #000;
	font-weight: 700;
	font-size: 1.35rem;
	writing-mode: vertical-rl;
	transform: rotate(180deg)
}

.project-card__btn,
.project-card__desc {
	display: none
}

.project-card[active] .project-card__content {
	flex-direction: row;
	align-items: center;
	padding: 1.2rem 2rem;
	gap: 1.1rem
}

.project-card[active] .project-card__title {
	writing-mode: horizontal-tb;
	transform: none;
	font-size: 1.8rem
}

.project-card__desc {
	color: #000;
	font-size: 1.2rem;
	line-height: 1.4
}

.project-card__btn {
	padding: .55rem 1.3rem;
	border: none;
	border-radius: 9999px;
	background: var(--accent);
	color: #fff;
	font-size: .9rem;
	font-weight: 600
}

.project-card__btn:hover {
	background: #ff824f
}

.dots {
	display: flex;
	gap: .5rem;
	justify-content: center;
	padding: 20px 0
}

.dot {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .35);
	transition: .3s
}

.dot.active {
	background: #000;
	transform: scale(1.2)
}

@media only screen and (max-width:1400px) {
	.banner-right-con img[alt=banner-right-img] {
		width: 84vh
	}

	.banner-right-con::after {
		bottom: 80px;
		right: -39px
	}
}

@media only screen and (max-width:1199px) {
	h1 {
		font-size: 74px;
		line-height: 84px
	}

	h2 {
		font-size: 42px;
		line-height: 48px
	}

	h4 {
		font-size: 22px;
		line-height: 26px
	}

	p {
		font-size: 18px;
		line-height: 28px
	}

	.banner-right-con::after {
		bottom: 6px;
		right: -12px
	}

	.banner-right-con img[alt=banner-right-img] {
		width: 100%
	}

	.banner-heading p {
		margin-bottom: 18px
	}

	.contact-form button,
	.generic-btn a {
		padding: 18px 54px;
		font-size: 18px
	}

	.banner-left-con {
		padding-left: 34px
	}

	.padding-bottom {
		padding-bottom: 80px
	}

	.padding-top {
		padding-top: 80px
	}

	.generic-title {
		margin-bottom: 34px
	}

	.service-box-item {
		padding: 32px 26px
	}

	.service-box-item figure {
		width: 120px;
		height: 120px
	}

	.service-box-item-content {
		margin-left: 130px
	}

	.service-box-item-content p {
		font-size: 16px;
		line-height: 26px;
		margin-bottom: 8px
	}

	.service-box-item-content a {
		font-size: 16px;
		padding-bottom: 3px
	}

	.service-box .row:last-child {
		margin-bottom: 28px
	}

	.skill-left-con .skill-left-item-con {
		padding: 32px 24px
	}

	.skill-right-con p:nth-child(4) {
		margin-bottom: 24px
	}

	.portfolio-body-con {
		margin-top: -275px
	}

	.portfolio-img-con .filterDiv {
		padding: 0 15px
	}

	.portfolio-btn {
		margin-top: 15px
	}

	.contact-information {
		padding: 50px 15px
	}

	.contact-information-content {
		margin-left: 68px
	}

	.weight-footer-con {
		padding-top: 50px
	}

	.weight-footer-content figure {
		margin-bottom: 30px
	}

	.service-inner-con:after {
		bottom: 287px;
		right: -25px
	}

	.service-con::before,
	.skill-con:after {
		width: 127px;
		height: 127px;
		background-size: contain
	}

	.header-con .nav-item {
		padding: 0 16px;
		font-size: 18px
	}

	.contact a {
		padding: 14px 38px
	}

	.portfolio-con::before,
	.portfolio-con:after {
		width: 240px;
		height: 240px;
		background-size: contain
	}

	.service-con::after,
	.skill-con::before {
		width: 42px;
		height: 42px;
		background-size: contain
	}

	.portfolio-img-con .filterDiv:first-child .portfolio-img figure:after {
		width: 100%;
		height: 95%;
		left: 0
	}

	.portfolio-img-content a i {
		width: 45px;
		height: 45px;
		font-size: 20px;
		margin-right: 0
	}

	.portfolio-img-content {
		padding: 0 48px 0 8px
	}

	.portfolio-img-title h4 {
		font-size: 20px
	}

	.portfolio-img figure:after {
		width: 100% !important;
		height: 100% !important;
		border-radius: 7px
	}

	.portfolio-img-title p {
		font-size: 14px
	}

	#button {
		right: 30px
	}

	.skill-con::before {
		top: 184px;
		right: 11px
	}

	.service-con::after {
		top: 170px;
		left: 13px
	}
}

@media only screen and (max-width:991px) {
	.service-box-item figure {
		margin: 0 auto 15px !important
	}

	#navbarSupportedContent {
		display: contents
	}

	.header-con .nav-item {
		padding: 6px 0;
		font-size: 16px
	}

	.navbar-collapse {
		background: #fff;
		padding: 15px;
		box-shadow: 0 0 12px 0 #e9eefc;
		border-radius: 8px
	}

	.contact a {
		padding: 12px 36px;
		font-size: 18px
	}

	.banner-right-con img[alt=banner-right-img] {
		width: 60%
	}

	.banner-right-con {
		display: inline-block
	}

	.banner-right-con::before {
		top: 40%;
		left: 110px
	}

	.header-con {
		padding-top: 20px;
		padding-bottom: 20px
	}

	.banner-main-con {
		padding-top: 30px
	}

	.banner-right-con::after {
		right: 86px
	}

	h2 {
		font-size: 34px;
		line-height: 40px
	}

	h1 {
		font-size: 58px;
		line-height: 60px
	}

	h4,
	h6 {
		font-size: 20px;
		line-height: 22px
	}

	p {
		font-size: 16px !important;
		line-height: 24px
	}

	.banner-left-con {
		padding-left: 0;
		padding-bottom: 25px
	}

	.banner-heading p {
		margin-bottom: 15px
	}

	.contact-form button,
	.generic-btn a {
		padding: 16px 48px;
		font-size: 16px
	}

	.skill-right-con p {
		font-size: 16px
	}

	.generic-title,
	.skill-right-con p:nth-child(4),
	.weight-footer-content figure {
		margin-bottom: 24px
	}

	.service-box-item figure {
		position: relative;
		width: 100px;
		height: 100px;
		margin-bottom: 15px !important
	}

	.contact-information-content,
	.service-box-item-content {
		margin-left: 0
	}

	.service-box-item figure img {
		width: 50px;
		height: 50px
	}

	.service-box-item {
		padding: 26px 22px;
		box-shadow: 0 0 50px 0 #e9eefc;
		transform: rotate(0) !important
	}

	.padding-bottom {
		padding-bottom: 70px
	}

	.padding-top {
		padding-top: 70px
	}

	.service-inner-con:after {
		bottom: 28px;
		right: -22px
	}

	.skill-left-con .skill-left-item-con {
		padding: 26px 20px
	}

	.service-con::before,
	.skill-con:after {
		width: 114px;
		height: 114px
	}

	.portfolio-body-con {
		margin-top: -328px
	}

	.portfolio-img figure {
		margin-bottom: 0
	}

	.portfolio-img-con .filterDiv {
		padding: 0 8px
	}

	.contact-information {
		padding: 40px 15px
	}

	.weight-footer-con {
		padding-top: 40px
	}

	.weight-footer-con::before,
	.weight-footer-con:after {
		width: 186px;
		height: 186px;
		background-size: contain
	}

	.copy-right-content p {
		padding-top: 15px
	}

	#button {
		width: 62px;
		height: 62px
	}

	.portfolio-img-title h4 {
		font-size: 18px
	}

	.portfolio-img-content a i {
		width: 40px;
		height: 40px;
		font-size: 15px;
		margin-right: 0
	}

	.portfolio-img-content {
		bottom: 10px
	}

	.skill-right-con {
		padding-left: 0;
		text-align: center;
		margin-bottom: 60px;
		margin-top: 0
	}

	#banner-right-img {
		transform: translatex(0) !important
	}

	.contact-form button,
	.portfolio-img-con .filterDiv:nth-child(2) {
		margin-bottom: 30px
	}

	.portfolio-con:after {
		bottom: -51px
	}

	.portfolio-con::before,
	.portfolio-con:after {
		width: 192px;
		height: 192px
	}

	.portfolio-img-con .filterDiv:last-child,
	.portfolio-img-con .filterDiv:nth-child(2) {
		padding-right: 0 !important
	}

	.filterDiv img {
		height: 202px
	}

	.portfolio-img-con {
		margin: 0
	}

	.header-and-banner-con::before {
		width: 100%;
		top: 245px;
		background-position: top center
	}
}

@media only screen and (max-width:767px) {
	ul li {
		font-size: 16px;
		text-align: left;
	}

	.head,
	.track {
		flex-direction: column
	}

	.nav-btn,
	.project-card__title {
		font-size: 1.2rem;
		transform: none
	}

	.track {
		scroll-snap-type: y mandatory
	}

	h2 {
		font-size: 28px;
		line-height: 32px
	}

	h1 {
		font-size: 46px;
		line-height: 48px
	}

	#button::after,
	h4 {
		font-size: 18px
	}

	.contact-form button,
	.generic-btn a {
		padding: 12px 45px
	}

	.banner-right-con::before {
		top: 26%
	}

	.banner-main-con {
		padding-top: 30px
	}

	.logo {
		display: none !important
	}

	.logo-mob {
		display: block !important
	}

	#button,
	#navbarSupportedContent,
	.controls,
	.dots,
	.project-card__btn,
	.project-card__desc {
		display: none
	}

	.header-con {
		padding: 15px
	}

	.mosaic-item,
	.service-box-item {
		margin-bottom: 15px
	}

	.generic-title,
	.service-box .row,
	.service-box .row:first-child {
		margin-bottom: 0
	}

	.padding-bottom {
		padding-bottom: 25px
	}

	.padding-top {
		padding-top: 25px
	}

	.skill-right-con p,
	.skill-right-con p:nth-child(4) {
		margin-bottom: 10px
	}

	.portfolio-body-con {
		margin-top: -372px;
		position: relative
	}

	h4 {
		line-height: 20px
	}

	.weight-footer-content figure {
		margin-bottom: 18px
	}

	.weight-footer-con {
		padding-top: 35px
	}

	.portfolio-img-content a i {
		width: 40px;
		height: 40px;
		font-size: 16px;
		margin-right: 0
	}

	.portfolio-img-con .filterDiv:last-child,
	.portfolio-img-con .filterDiv:nth-child(2),
	.portfolio-img-con .filterDiv:nth-child(3),
	.portfolio-img-con .filterDiv:nth-child(4) {
		width: 50%;
		padding: 0 20px;
		margin-bottom: 15px
	}

	.portfolio-img-con .filterDiv:first-child {
		width: 100%;
		margin-bottom: 10px
	}

	#button {
		width: 50px;
		height: 50px
	}

	.skill-right-con {
		margin-bottom: 20px
	}

	.contact-information {
		padding: 40px 35px
	}

	.skill-right-con h2 {
		margin-top: 30px
	}

	.navbar-brand {
		margin: 0 auto
	}

	#button-probetraining {
		width: 310px
	}

	#navbar {
		background: rgba(255, 255, 255, .87)
	}

	#hero-video-loop {
		height: 75vh;
		object-fit: cover;
		top: 0;
		left: 0
	}

	.header-and-banner-con {
		height: 75vh
	}

	.header-and-banner-con::before {
		top: 0
	}

	.banner-con.text-lg-left.text-center {
		top: 209px;
		left: 5px
	}

	:root {
		--closed: 4rem;
		--open: 22rem;
		--closed: 100%;
		--open: 100%;
		--gap: 0.8rem
	}

	.track {
		align-items: center;
		justify-content: flex-start
	}

	.project-card__title {
		writing-mode: horizontal-tb;
		text-align: center;
		padding-inline: .3rem;
		writing-mode: horizontal-tb;
		margin-right: auto
	}

	.nav-btn {
		width: 2rem;
		height: 2rem;
		position: static
	}

	.head {
		padding: 0 0 20px;
		align-items: flex-start;
		gap: 1rem
	}

	.slider {
		padding: 0
	}

	.track {
		flex-direction: column;
		gap: .8rem;
		padding-bottom: 20px
	}

	.project-card {
		height: auto;
		min-height: 80px;
		flex: 0 0 auto;
		width: 100%;
		scroll-snap-align: start
	}

	.project-card[active] {
		min-height: 300px;
		transform: none
	}

	.project-card__content {
		flex-direction: row;
		justify-content: flex-start;
		padding: 1rem;
		align-items: center;
		gap: 1rem
	}

	.project-card[active] .project-card__content {
		align-items: flex-start;
		padding: 1.5rem
	}

	.project-card[active] .project-card__title {
		font-size: 1.5rem;
		margin-bottom: 1rem;
		margin-top: .5rem
	}

	.project-card[active] .project-card__desc {
		font-size: .95rem;
		max-width: 100%;
		margin-bottom: 1rem
	}

	.project-card[active] .project-card__btn {
		align-self: center;
		width: 100%;
		text-align: center;
		padding: .7rem
	}

	.controls {
		width: 100%;
		justify-content: space-between;
		padding: 0 15px 20px
	}

	.mosaic-container {
		display: block
	}

	#contactForm,
	.skill-inner-con {
		padding: 20px
	}

	.banner-heading h2 {
		color: #fff !important;
		font-size: 32px;
		line-height: 36px
	}
}

@media only screen and (max-width:575px) {
	h2 {
		font-size: 26px;
		line-height: 30px
	}

	.content h3 {
		font-size: 22px;
		line-height: 26px
	}

	h1 {
		font-size: 36px;
		line-height: 36px
	}

	h6 {
		font-size: 18px;
		line-height: 20px
	}

	.banner-right-con::after {
		right: 40px
	}

	.contact a,
	.contact-form button,
	.generic-btn a {
		padding: 10px 39px;
		font-size: 14px
	}

	.skill-left-con .skill-left-item-con {
		margin-bottom: 15px;
		padding: 22px 16px
	}

	.portfolio-con::before,
	.portfolio-con:after {
		display: none
	}

	.contact-form button,
	.portfolio-img-con .filterDiv:first-child {
		width: 100%
	}

	.portfolio-img-con .filterDiv:last-child,
	.portfolio-img-con .filterDiv:nth-child(2),
	.portfolio-img-con .filterDiv:nth-child(3),
	.portfolio-img-con .filterDiv:nth-child(4) {
		width: 50%;
		margin: 0;
		padding: 0
	}

	.portfolio-body-con {
		margin-top: -420px;
		position: relative
	}

	.portfolio-img-con {
		margin: 0
	}

	.contact-information {
		padding: 0 15px
	}

	.contact-information-content h5 {
		font-size: 18px
	}

	.weight-footer-con::before,
	.weight-footer-con:after {
		width: 150px;
		height: 150px;
		background-size: contain
	}

	.service-inner-con:after {
		right: -10px
	}

	.navbar-collapse {
		min-width: 100% !important;
		z-index: 99999
	}

	.banner-main-con {
		padding: 15px 15px 0
	}

	.portfolio-img-title h4,
	.skill-right-con p {
		font-size: 16px
	}

	.portfolio-img-title p {
		font-size: 14px
	}
	
.form-main-inner-con .container, .form-main-inner-con .contact-information {
	padding: 0;
	}

	.portfolio-img-content {
		bottom: 12px
	}

	.portfolio-img figure:after {
		left: 0
	}

	.service-con::after {
		display: none !important
	}

	.portfolio-img {
		display: inline-block;
		padding: 14px
	}

	.filterDiv {
		padding: 0
	}

	.portfolio-img-content a i {
		position: absolute;
		right: 108px;
		top: 0
	}

	.banner-right-con::before {
		width: 30px;
		height: 30px;
		background-size: contain;
		left: 59px;
		top: 12%
	}

	.portfolio-img-title {
		margin-left: 84px
	}

	.skill-con::before {
		top: 36px
	}

	.filterDiv img {
		height: auto;
		width: 100%
	}

	.service-box-item {
		text-align: center
	}

	.service-box-item figure {
		margin: 0 auto 15px !important
	}
}

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

	.contact a,
	.contact-form button,
	.generic-btn a {
		padding: 10px 39px;
		font-size: 14px
	}

	iframe {
		height: 250px;
		margin-top: 20px
	}

	.navbar {
		flex-wrap: initial !important
	}
}

@media only screen and (max-width:567px) {
	#navbarSupportedContent a {
		padding: 12px;
		width: 130px;
		text-align: center
	}

	.header-con {
		padding: 15px 0
	}

	.col,
	.col-1,
	.col-10,
	.col-11,
	.col-12,
	.col-2,
	.col-3,
	.col-4,
	.col-5,
	.col-6,
	.col-7,
	.col-8,
	.col-9,
	.col-lg,
	.col-lg-1,
	.col-lg-10,
	.col-lg-11,
	.col-lg-12,
	.col-lg-2,
	.col-lg-3,
	.col-lg-4,
	.col-lg-5,
	.col-lg-6,
	.col-lg-7,
	.col-lg-8,
	.col-lg-9,
	.col-md,
	.col-md-1,
	.col-md-10,
	.col-md-11,
	.col-md-12,
	.col-md-2,
	.col-md-3,
	.col-md-4,
	.col-md-5,
	.col-md-6,
	.col-md-7,
	.col-md-8,
	.col-md-9,
	.col-sm,
	.col-sm-1,
	.col-sm-10,
	.col-sm-11,
	.col-sm-12,
	.col-sm-2,
	.col-sm-3,
	.col-sm-4,
	.col-sm-5,
	.col-sm-6,
	.col-sm-7,
	.col-sm-8,
	.col-sm-9 {
		padding-right: 15px;
		padding-left: 15px
	}

	.pl-5,
	.px-5 {
		padding-left: 2rem !important
	}

	.pr-5,
	.px-5 {
		padding-right: 2rem !important
	}
}

@media only screen and (max-width:450px) {
	.portfolio-img-title {
		margin-left: 20px
	}

	.portfolio-img-content a i {
		position: absolute;
		right: 34px;
		top: 0
	}
}