/* Version 4.2 */

body {
	font-family: 'IBM Plex Sans', sans-serif !important;
	background-color: black;
	background-repeat: no-repeat;
	overflow-x: hidden !important;
}

a { 
	text-decoration: none;
}

a:hover {
	text-decoration: none !important;
}

.mycontainer {
	padding-right: 5px;
	padding-left: 5px;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
}

.mynav {
	border-bottom: 1px solid #282828;
}

.mynav .mynav-content {
	margin-left: auto;
}

.mynav .mynav-content .social-buttons {
	margin: 17px 0;
	padding-right: 11px;
	border-right: 1px solid #282828;
}

.mynav .mynav-content .social-buttons .social-button {
	margin: 0px 3px;
	width: 47px;
	height: 47px;
	background:	#1c1c1c;
	color: #cccc;
	text-align: center;
	border-radius: 50px;
	transition: 0.2s;
}

.mynav .mynav-content .social-buttons .social-button:hover {
  background: #313131;
  color: white;
	transition: 0.2s;
}

.mynav .mynav-content .social-buttons .social-button a {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.mynav .mynav-content .social-buttons .social-button i {
	margin-left: auto;
	margin-right: auto;
	font-size: 22px;
	text-align: center;
}

.mynav .mynav-content .contact-button {
	margin-left: 16px;
	padding: 29px 18px;
	height: 45px;
	background: white;
	color: black;
	border-radius: 50px;
	transition: 0.3s;
}

.mynav .mynav-content .contact-button:hover {
	padding-left: 25px;
	padding-right: 25px;
	background: #3581ff;
	color: white;
	transition: 0.3s;
}

.mynav .mynav-content .contact-button i {
	margin-top: -2px;
	margin-right: 10px;
	font-size: 20px;
}

.mynav .mynav-content .contact-button span {
	margin-top: -1px;
	font-size: 16px;
	font-weight: 400;
}

.myhero {
	margin-top: 150px;
	margin-bottom: 136px;
}

.myhero .myheading {
	margin-bottom: 36px;
}

.myhero .myheading .avatar {
	margin-right: 20px;
	height: 60px;
	width: 60px;
	background: url('https://cdn.dribbble.com/users/1503026/avatars/normal/9c6a184785470f9aef8ac7ac5910cd56.png?1588351915');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 0 0 3px black, 0 0 0 6px #3f3f3f;
	border-radius: 100%;
}

.myhero .myheading h1 {
	margin: 0 0 5px 0;
	color: white;
	font-size: 21px;
	font-weight: 500;
	letter-spacing: -0.6px;
}

@keyframes circle-pulse {
	0% {
	 box-shadow: 0 0 0 0px rgba(124, 233, 108, 0.3);
	}
	100% {
	 box-shadow: 0 0 0 30px rgba(124, 233, 108, 0);
	}
}

.myhero .myheading .available i {
	margin: 1px 5px 0 -2px;
	padding: 0 15px 0px 2px;
	width: 15px;
	color: #7ce96c;
	font-size: 13px;
	border-radius: 50px;
	animation: circle-pulse 2s infinite;
}

.myhero .myheading .available p {
	margin: 0;
	color: #add89b;
	font-size: 16px;
}

.myhero .mydescription {
	margin-bottom: 55px;
	max-width: 770px;
	color: white;
	font-size: 28px;
	font-weight: 300;
	line-height: 41px;
}

.myhero .mydescription a {
	color: #fff;
	box-shadow: rgb(77, 77, 77) 0px -2px 0px inset;
	transition: 0.3s;
}

.myhero .mydescription a:hover {
	color: #6ea5ff;
	box-shadow: rgba(71, 140, 255, 0.3) 0px -34px 0px inset;
	transition: 0.3s;
}

.case-studies {
	margin-bottom: 41px;
}

.case-studies h3,
.shots h3 {
	margin-bottom: 30px;
	padding-bottom: 11px;
	color: white;
	font-size: 28px;
	font-weight: 500;
	line-height: 42px;
	letter-spacing: -0.5px;
	border-bottom: 1px solid #282828;
}

.case-studies .card {
	margin-left: 2px;
	margin-right: 2px;
	margin-bottom: 40px;
	background: black;
	border: none;
}

.case-studies .card .card-img-top {
	position: relative;
	top: 0;
	object-fit: cover;
	border-radius: 0;
	filter: brightness(95%) saturate(105%);
	transition: 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.case-studies .card .card-img-top:hover {
	border-radius: 40px;
	filter: brightness(80%);
	scale: 0.97;
	transition: 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.case-studies .card .card-body {
	padding: 16px 13px 18px 13px;
}

.case-studies .card .card-body .card-title {
	margin-top: 2px;
	margin-bottom: 4px;
}

.case-studies .card .card-body .card-title {
	font-weight: 400;
	font-size: 20px;
	line-height: 26px;
	transition: 0.2s;
}

.case-studies .card .card-body .card-title a {
  color: white;
	transition: 0.4s;
}

.case-studies .card .card-body .card-title a:hover {
	color: #6ea5ff;
	box-shadow: rgba(71, 140, 255, 0.3) 0px -34px 0px inset;
	transition: 0.4s;
}

.case-studies .card .card-body p {
	color: #b1b1b1;
	font-weight: 400;
	font-size: 16px;
	line-height: 23px;
}

.shots {
	margin-bottom: 180px;
}

.shots .card {
	margin-left: 1.5px;
	margin-right: 1.5px;
	margin-bottom: 3px;
	background: black;
	border: none;
}

.shots .card .card-img-top {
	position: relative;
	top: 0;
	height: 326px;
	object-fit: cover;
	border-radius: 2px;
	filter: brightness(95%) saturate(105%);
	transition: 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.shots .card .card-img-top:hover {
	border-radius: 40px;
	filter: brightness(90%);
	scale: 0.98;
	transition: 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

.divider {
	display: block;
	margin: 0 auto 125px auto;
	filter: invert(100%);
}

.buttontop-top {
	display: inline-block;
	position: fixed;
	bottom: 40px;
	right: 10px;
	height: 60px;
	width: 60px;
	overflow: hidden;
	visibility: hidden;
	opacity: 0;
	white-space: nowrap;
	z-index: 2;
	color: #fff;
	background: none;
	font-size: 35px;
	text-align: center;
	border: 2px solid white;
	border-radius: 50%;
	transition: 0.2s;
}

.buttontop-top i {
	margin-top: 2px;
	display: block;
}

.buttontop-top.buttontop-is-visible,
.buttontop-top.buttontop-fade-out,
.no-touch .buttontop-top:hover {
	transition: opacity .3s 0s, visibility 0s 0s;
}

.buttontop-top.buttontop-is-visible {
	visibility: visible;
	opacity: 1;
	transition: 0.2s;
}

.buttontop-top.buttontop-fade-out {
	opacity: .5;
}

.buttontop-top:hover {
	opacity: 1;
	color: white !important;
	text-decoration: none !important;
	transition: 0.2s;
}



/*---------------------------------------------------------------

Responsive MIN

-----------------------------------------------------------------*/
@media screen and (min-width: 576px) {

	.mycontainer {
		max-width: 540px;
	}

}

@media screen and (min-width: 768px) {

	.mycontainer {
		max-width: 720px;
	}

}

@media screen and (min-width: 991px) {

	.mycontainer {
		max-width: 960px;
	}

}

@media screen and (min-width: 1200px) {

	.mycontainer {
		max-width: 1140px;
	}

}

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

	.mycontainer {
		max-width: 1200px;
	}

}

@media screen and (min-width: 1380px) {

	.mycontainer {
		max-width: 1300px;
	}

}

@media screen and (min-width: 1480px) {

	.mycontainer {
		max-width: 1400px;
	}

}

@media screen and (min-width: 1580px) {
	
	.mycontainer {
		max-width: 1500px;
	}

}

@media screen and (min-width: 1680px) {

	.mycontainer {
		max-width: 1600px;
	}

}

@media screen and (min-width: 1780px) {

	.mycontainer {
		max-width: 1700px;
	}

}

@media screen and (min-width: 1920px) {

	.mycontainer {
		max-width: 1800px;
	}

	.case-studies .card {
		min-width: 440px;
		max-width: 442px;
	}

	.shots .card {
		min-width: 440px;
		max-width: 442px;
	}	

	.case-studies .card .card-img-top {
		height: 325px;
	}

}



/*---------------------------------------------------------------

Responsive MAX

-----------------------------------------------------------------*/
@media screen and (max-width: 1920px) {

	/* Case Studies */

	.case-studies .card {
		min-width: 415px;
		max-width: 417px;
	}

	.case-studies .card .card-img-top {
		height: 300px;
	}

	/* Shots */

	.shots .card {
		min-width: 415px;
		max-width: 417px;
	}	

}

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

	/* Case Studies */

	.case-studies .card {
		min-width: 390px;
		max-width: 392px;
	}

	.case-studies .card .card-img-top {
		height: 295px;
	}

	.case-studies .card .card-body {
		padding: 14px 13px 18px 13px;
	}

	.case-studies .card .card-body p {
		font-size: 15px;
 		 line-height: 21px;
	}

	.case-studies .card .card-body .card-title {
		margin-bottom: 4px;
		font-size: 19px;
	}

	/* Shots */

	.shots .card {
		min-width: 390px;
		max-width: 392px;
	}


}

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

	.myhero .mydescription {
		font-size: 27px;
		line-height: 40px;
	}

	/* Case Studies */

	.case-studies .card {
		min-width: 365px;
		max-width: 367px;
	}

	.case-studies .card .card-img-top {
		height: 285px;
	}

	/* Shots */

	.shots .card {
		min-width: 365px;
		max-width: 367px;
	}

}

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

	.myhero .mydescription {
		max-width: 760px;
		font-size: 26px;
		line-height: 38px;
	}

	.myhero .myheading .available p {
		font-size: 16px;
	}

	/* Case Studies */

	.case-studies .card {
		min-width: 456px;
		max-width: 458px;
	}

	.case-studies .card .card-img-top {
		height: 325px;
	}

	.case-studies .card .card-body {
		padding: 15px 13px;
	}

	.case-studies .card .card-body .card-title {
		margin-bottom: 2px;
		font-size: 18px;
	}

	/* Shots */

	.shots .card {
		min-width: 456px;
		max-width: 458px;
	}

	.shots .card .card-img-top {
		height: 350px;
	}

}

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

	.myhero {
		margin-top: 130px;
		margin-bottom: 120px;
	}

	.myhero .mydescription {
		max-width: 720px;
		font-size: 25px;
		line-height: 37px;
	}

	.myhero .myheading h1 {
		margin: 0 0 4px 0;
		font-size: 19px;
	}

	.myhero .myheading .available p {
		font-size: 15px;
	}

	/* Case Studies */

	.case-studies .card {
		min-width: 423px;
		max-width: 425px;
	}

	.case-studies .card .card-img-top {
		height: 305px;
	}

	.case-studies .card .card-body .card-title {
		margin-top: 0;
		margin-bottom: 3px;
		font-size: 18px;
	}

	.case-studies .card .card-body p {
		font-size: 15px;
		line-height: 21px;
	}

	/* Shots */

	.shots .card {
		min-width: 423px;
		max-width: 425px;
	}

}

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

	/* Case Studies */

	.case-studies .card {
		min-width: 389px;
		max-width: 391px;
	}

	.case-studies .card .card-img-top {
		height: 285px;
	}

	/* Shots */

	.shots .card {
		min-width: 389px;
		max-width: 391px;
	}

}

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

	/* Case Studies */

	.case-studies .card {
		min-width: 369px;
		max-width: 371px;
	}

	.case-studies .card .card-body .card-title {
		font-size: 18px;
	}

	.case-studies .card .card-img-top {
		height: 270px;
	}

	/* Shots */

	.shots .card {
		min-width: 369px;
		max-width: 371px;
	}

}

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

	/* Case Studies */

	.case-studies .card {
		min-width: 468px;
		max-width: 470px;
	}

	.case-studies .card .card-img-top {
		height: 346px;
	}

	.case-studies .card .card-body p {
		max-width: 400px;
	}

	/* Shots */

	.shots .card {
		min-width: 468px;
		max-width: 470px;
	}

	.shots .card .card-img-top {
		height: 280px;
	}

}  

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

	.mynav .mynav-content {
		margin-left: 0;
	}

	.mynav .mynav-content .contact-button {
		padding: 26px 18px;
	}

	.myhero .mydescription {
		max-width: 630px;
		font-size: 24px;
		line-height: 34px;
	}

	/* Case Studies */

	.case-studies h3 {
		margin-bottom: 25px;
		padding-bottom: 7px;
		font-size: 27px;
	}

	.case-studies .card {
		min-width: 348px;
		max-width: 350px;
	}

	.case-studies .card .card-img-top {
		height: 254px;
	}

	/* Shots */

	.shots h3 {
		margin-bottom: 25px;
		padding-bottom: 7px;
		font-size: 27px;
	}

	.shots .card {
		min-width: 348px;
		max-width: 350px;
	}

}

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

	.myhero .mydescription {
		margin-bottom: 45px;
		font-size: 23px;
		line-height: 33px;
	}

	.myhero .myheading .avatar {
		margin-right: 18px;
		height: 57px;
		width: 57px;
	}

	/* Case Studies */

	.case-studies h3 {
		margin-bottom: 26px;
 		padding-bottom: 7px;
		font-size: 26px;
	}

	.case-studies .card {
		margin-bottom: 38px;
		max-width: 100%;
	}

	.case-studies .card .card-img-top {
		height: 317px;
	}

	/* Shots */

	.shots h3 {
		margin-bottom: 26px;
 		padding-bottom: 7px;
		font-size: 26px;
	}

	.shots .card {
		min-width: 259px;
		max-width: 261px;
	}

	.shots .card .card-img-top {
		height: 240px;
	}

}

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

	.mynav .mynav-content {
		margin-left: 10px;
	}

	.mynav .mynav-content .social-buttons {
		padding-right: 4px;
	}

	.mynav .mynav-content .social-buttons .social-button {
		margin: 0 4px;
		width: 40px;
		height: 40px;
		border: none;
	}

	.mynav .mynav-content .contact-button {
		padding: 1px 12px 0 12px;
		margin-left: 9px;
	}

	.mynav .mynav-content .contact-button i {
		display: none;
	}

	.mynav .mynav-content .contact-button span {
		font-weight: 500;
	}

	.mynav .mynav-content .social-buttons .social-button {
		margin: 0 4px;
		width: 40px;
		height: 40px;
		border: none;
  }

  .mynav .mynav-content .contact-button:hover {
		padding: 0 18px;
	}

	.myhero {
		margin-top: 70px;
		margin-bottom: 70px;
		padding: 0 15px;
	}

	.myhero .myheading {
		margin-bottom: 27px;
	}

	.myhero .myheading .avatar {
		margin-right: 16px;
		height: 50px;
		width: 50px;
	}

	.myhero .myheading h1 {
		margin: 0 0 3px 0;
		font-size: 18px;
	}

	.myhero .myheading .available p {
		font-size: 14px;
	}

	.myhero .mydescription {
		margin-bottom: 44px;
		max-width: 410px;
		font-size: 21px;
		line-height: 32px;
	}

	/* Case Studies */

	.case-studies {
		margin-bottom: 20px;
		padding: 0 15px;
	}

	.case-studies h3 {
		margin-bottom: 16px;
		padding-bottom: 7px;
		font-size: 24px;
	}

	.case-studies .card {
		margin: 0 auto 28px auto;
		min-width: 100px;
		max-width: 100%;
	}

	.case-studies .card .card-img-top {
		height: auto;
		filter: contrast(90%) saturate(110%);
	}

	.case-studies .card .card-img-top:hover {
		filter: contrast(90%) saturate(110%) brightness(80%);
	}

	.case-studies .card .card-body {
		padding: 11px 4px;
	}

	.case-studies .card .card-body .card-title {
		margin: 0;
		font-size: 17px;
		line-height: 25px;
	}

	.case-studies .card .card-body p {
		font-size: 14px;
		line-height: 20px;
	}

	/* Shots */

	.shots {
		padding: 0 15px;
		margin-bottom: 130px;
	}

	.shots h3 {
		margin-bottom: 16px;
		padding-bottom: 7px;
		font-size: 24px;
	}

	.shots .card {
		min-width: 100px;
		max-width: 100%;
	}

	.shots .card .card-img-top {
		height: auto;
	}

}