@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900&display=swap');

/* @import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'); */
@font-face {
	font-family: FoundryGridnik;
	src: url("../fonts/FoundryGridnik Bold.otf");
}

@font-face {
	font-family: Monerope1;
	src: url("../fonts/Manrope-Regular.otf");
}

@font-face {
	font-family: Monerope2;
	src: url("../fonts/Manrope-Medium.otf");
}

@font-face {
	font-family: Manrope3;
	src: url("../fonts/Manrope-Bold.otf");
}

@font-face {
	font-family: Monerope4;
	src: url("../fonts/Manrope-ExtraBold.otf");
}

html {
	scroll-behavior: smooth;
}

* {
	font-family: "Raleway";
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}

body {
	background-color: #fff;
	font-family: "Raleway";
	/* font-size: 0.938em !important; */
}

img {
	width: 100%;
}

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

.container-fluid {
	width: 90%;
	margin: 0 auto;
	padding-right: 0px !important;
	padding-left: 0px !important;
}

#wrapper {
	float: left;
	position: relative;
	width: 100%;
	overflow: hidden;
	background-image: url("../img/AB-Desktop.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}

.index-wrapper {
	/* height: auto !important; */
	height: 849px !important;
}

#jrwrapper {
	width: 100%;
	height: auto;
}

#pd_wrapper {
	width: 100%;
	height: auto;
}

.w-105 {
	width: 105px !important;
}

#myVideo {
	position: absolute;
	left: 0;
	top: 0;
	min-height: 100%;
	min-width: 100%;
}

/*top button-----------------------top--------------------------*/
#myBtn {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	font-size: 18px;
	border: none;
	outline: none;
	/* background-color:  #37D76D; */
	background-color: rgba(217, 217, 217, 0.395);
	color: white;
	cursor: pointer;
	/* padding: 14px; */
	height: 45px;
	width: 45px;
	border-radius: 50%;
}

#myBtn:hover {
	background-color: #37D76D;
	color: #FFFFFF;
}

#buttonSubmit {
	background-color: #37D76D;
	;
}

.onClickOfMyButton {
	color: white !important;
	background-color: #37D76D !important;
}

.bg-black {
	background-color: #000000;
}

/* Top arrow button css */
/* .fa-arrow-alt-up ,.fa-angle-up{
	
} */
/*tom button-----------------------end--------------------------*/

.container-custom {
	font-size: 24px;
	margin: 25px;
	height: 700px;
	position: relative;
}

.continer-content {
	width: 948px;
	height: auto;
	position: absolute;
	top: 56%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.continer-content .summary-main {
	font-weight: 600;
}

.continer-content .summary-main,
.continer-content .summary-sub {
	font-family: 'Manrope3';
	font-style: normal;
	font-size: 24px;
	line-height: 38.76px;
	color: #1A1A1A;
	text-align: center;
	letter-spacing: 0;
}

.continer-content .summary-sub {
	margin-top: 3rem;
	color: #000000;
	font-family: 'Raleway';
	font-size: 22px;
}

.continer-content .summary-sub span a {
	color: #828282;
}

.continer-content .summary-sub span a b:hover {
	color: #37D76D;
}

.continer-content .wroked-with-section p {
	font-family: 'Manrope3';
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 17px;
	letter-spacing: 0.03em;
	text-align: center;
	color: #000000;
	margin-top: 85px;
}

.continer-content .wroked-with-section .divider {
	height: 1px;
	background: #000000;
	border: none;
	width: 442px;
	margin: auto;
	margin-top: 17.94px;
	margin-bottom: 15px;
}

.continer-content .wroked-with-section ul {
	list-style-type: none;
	display: flex;
}

.logos .mr-13 {
	margin-right: 13px
}

.logos .mr-11 {
	margin-right: 11px
}

.continer-content .wroked-with-section .logos {
	/* display: flex; */
}

.continer-content .wroked-with-section .logos img {
	height: 22px;
	width: 83px;
	padding: 0 4px
}

.logo {
	text-align: left;
}

.logo a {
	display: block;
}

.logo img {
	width: 74px;
}


.menu-container.no-bg {
	background-color: transparent !important;
	box-shadow: none !important;
	transition: none !important;
	position: absolute !important;
}


.home-logo a img {
	width: 90px;
	margin-top: 1.4rem;
}

.section {
	width: 100%;
}


.menu-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99;
	transition: all 0.4s ease-in-out;
	background-color: transparent;
}

.menu-container.fixed {
	background-color: #fff;
	box-shadow: 2px 2px 10px #1111115e;
	z-index: 999999;
	/*26-4-2020 */
}

.menu-container.fixed .section {
	padding-top: 4px;
}

.menu-container .section {
	padding-top: 27px;
	/* 56px; 19-04-2020 */
	padding-left: 32px;
	padding-right: 32px;
	transition: all 0.4s ease-in-out;
}

/* .menu{
	margin-top: 18px;
	float: right;
	line-height: 25px;
	border-radius: 15px;
	border: 1px solid #1a1a1a;	
	text-align: center;
	font-family:"Raleway";
	font-size: 12px;
	font-style: normal;
	letter-spacing: 0.5px;
	word-spacing: 5px;
	padding: 0 10px;
} */
.menu {
	margin-top: 18px;
	float: right;
	line-height: 25px;
	/* border-radius: 15px; */
	border: none !important;
	text-align: center;
	font-family: "Raleway";
	font-size: 17px;
	/*14px*/
	font-style: normal;
	letter-spacing: 0.5px;
	word-spacing: 5px;
	padding: 0 10px;
	width: 263px;
	/*235px;*/
}

.menu li {
	display: inline-block;
	padding: 0 5px;
}

.menu li {
	font-weight: 800;
	display: inline-block;
	white-space: nowrap !important;
}


.menu-header {
	width: 100%;
	height: 100%;
	float: left;
	text-align: justify;
}


.menu-header .logo {
	float: left;
	width: 49%;
	display: inline-block;
	margin-bottom: 0.5rem;
}


.nav-block {
	display: flex;
	justify-content: end;
	align-items: center;
	padding-top: 5px;
}

.nav-block a {
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	transition: 0.3s all ease-in-out;
}

.nav-block .move-left:hover{
	transform: translateX(-8px);
}

.nav-block .move-right:hover{
	transform: translateX(8px);
}

.nav-block a svg {
	transition: 0.3s all ease-in-out;
}

.nav-block a svg path{
	transition: 0.3s all ease-in-out;
}

.nav-block a:hover svg path {
	fill: #37D76D
}

.menu .sep {
	/* content: " \2022" !important;  */
	/* padding-left: 1%;  */
	height: 10px;
	width: 10px;
	color: #37D76D;
	height: 4px;
	width: 4px;
	background-color: #37D76D;
	border-radius: 50%;
	display: inline-block;
	margin-bottom: 3px;
}

.menu li a {
	text-decoration: none;
	color: #1a1a1a;
}

.menu li a.cof-menu-link {
	text-decoration: none;
	color: white !important;
}

.menu li a:hover {
	color: #37D76D !important;
	/* font-weight: 600; */
}


.scroller {
	position: absolute;
	bottom: 10%;
	right: 50%;
}

.down {

	position: relative;
	width: 13px;
	height: 29px;
	border-radius: 20px;
	background: transparent;
	border: 1px solid #1a1a1a;
	overflow: hidden;
}

.down:before {
	content: '';
	position: absolute;
	width: 2px;
	height: 4px;
	border-radius: 50%;
	background: #37D76D;
	left: 50%;
	top: 10px;
	transform: translate(-50%, 0);
	animation: animate 1s linear infinite;

}

.down:after {
	content: '';
	position: absolute;
	width: 2px;
	height: 10px;
	border-radius: 50%;
	background: #37D76D;
	left: 50%;
	top: 5px;
	transform: translate(-50%, 0);
	border-radius: 3px;
}

@keyframes animate {
	0% {
		transform: translate(-50%, 20px);
	}

	/*
	80%
	{
		transform: translate(-50%,50px);	
	}
	100%
	{
		transform: translate(-50%,100px);	
	}*/
}

#nav-arrow>a:hover {
	color: #37D76D;
}

#wrapper-2 {
	float: left;
	width: 100%;
	background: linear-gradient(226.38deg, #282828 0.86%, #000000 99.57%);
	text-align: center;
}

.gallery {
	float: left;
	width: 100%;
	padding-top: 4%;
	padding-left: 3%;
	padding-right: 3%;
}



.gallery-thumb-wrapper-full .divider-title {
	font-family: "Manrope3";
	font-size: 32px;
	margin: 86px 57px 127px 57px;
	line-height: 37px;
	letter-spacing: 0em;
	text-align: center;
	color: #858585;
}

.gallery-thumb-wrapper-full .divider-title span {
	font-weight: 100;
	color: #858585;
}

.gallery-thumb-wrapper-full {
	float: left;
	width: 100%;
	padding: 5px;
	position: relative;
	z-index: 99;
	/*Added for support edge */
}

.gallery-thumb-wrapper {
	float: left;
	width: 33.33333%;
	padding: 5px;
	position: relative;
	/* z-index: 99; */
	/*Added for support edge */
}

.gallery-thumb-wrapper a,
.gallery-thumb-wrapper a img {
	display: block;
	width: 100%;
	transition: all .3s ease-in-out;
}



.gallery-thumb-wrapper a {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	box-shadow: 05px 05px 40px #222;
	border-radius: 10%;
}

.gallery-thumb-wrapper a:hover {
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
	box-shadow: 05px 05px 60px #222;
}


.gallery-thumb-wrapper a:hover img {
	transform: scale(1.02);
	transition: transform .2s ease-in-out;
}

.gallery-thumb-wrapper a:hover .overlay {
	opacity: 1;
}

.gallery-thumb-wrapper a:hover .overlay-2 {
	opacity: 1;
}

.gallery-thumb-wrapper a:hover .img-overlay {
	opacity: 1;
}

.img-overlay {
	position: absolute;
	bottom: 52%;
	transition: .5s ease;
	opacity: 0;
	margin-left: 42%;
	/* margin-left: 9.5em; */
	margin-bottom: -0.8rem;
	width: 13% !important;
}

.overlay {
	position: absolute;
	bottom: 8%;
	/* bottom: 15px; */
	background: #000000;
	color: #f1f1f1;
	height: 22%;
	width: 71.6%;
	border-radius: 25px;
	transition: .5s ease;
	opacity: 0;
	font-size: 20px;
	padding: 20px;
	left: 16%;
	text-align: center;
}

.gallary-thumb-name {
	margin-top: -7px;
	font-family: 'Raleway';
	font-size: 16px;
	font-weight: 700;
	line-height: 130.9%;
	letter-spacing: 0em;
	text-align: center;
}

.gallary-thumb-description {
	font-family: Raleway;
	font-style: normal;
	font-weight: normal;
	font-size: 42%;
	line-height: 12px;
	margin-top: -6%;
	/* font-size: 10px;
    line-height: 12px;
	margin-top: -10px; */
	color: #D9D9D9;
	letter-spacing: 0.12em;
}

.footerContainer {
	font-family: 'Manrope3';
	font-size: 12px;
	font-weight: 600;
	line-height: 16.5px;
	letter-spacing: 0em;
	text-align: left;
	width: 100%;
	color: #E2E2E2;
	text-align: -webkit-left;
	text-align: left;
}

.credits_one {
	width: 40%;
	float: left;
	padding: 3%;
	color: #696969;
	font-size: 10px;
}

.credits_one a {
	text-decoration: none;
	color: #696969;
}

.credits_one :hover {
	color: #D4D4D4;
}

.credits_two {
	float: left;
	padding: 3%;
}



.social_media {
	float: right;
	padding: 3%;
	width: 30%;
	display: inline-block;
}



.social_media a {
	margin-right: 2%;
	text-decoration: none;
	color: #D4D4D4;
	word-spacing: 5px;
}

.social_media a:hover {
	color: #37D76D;
}

.sm_one {
	float: left;
	padding: 3%;
}

.sm_two {
	float: right;
	padding: 3%;
}



/*John Richmond project page-----------------------top--------------------------*/

.jr_logo {
	position: inherit;
	text-align: center;
	margin-top: 35px;
	/* 12%, 7-4-2020*/
}


.jr_project {
	height: auto;
	padding-top: 5%;

}

.jr_logo img {
	height: 25%;
	width: 25%;
}

#content_container {
	width: 80%;
	height: auto;
	margin: 0 auto;
	padding-top: 5%;
	position: relative;
	display: flex;
	flex-wrap: wrap;
}

.content_title {
	font-family: 'Manrope3';
	font-style: normal;
	font-weight: bold;
	font-size: 36px;
	line-height: 42px;
	color: #000000;
}

.jr_title_bold {
	font-size: 1em;
	/*36px 19-4-2020*/
	font-weight: bold;
}

.content_title a {
	text-decoration: none;
	color: #1A1A1A;
}

.content_title a hover {
	color: #37D76D;
}

.col-one {
	width: 22%;
	height: auto;
	padding: 2%;
	/*display: inline-block;*/
}

.col-one-min {
	width: 17%;
	height: auto;
	padding: 2%;
	/*display: inline-block;*/
}

.col-two {
	width: 40%;
	height: auto;
	padding: 2%;
}

.w-50 {
	width: 50% !important;
}

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

.bg-vector {
	width: 100%;
	height: auto;
	padding: 4%;
	border-radius: 10px;
	/* 2% 21-4-2020*/
	;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
	background-color: rgba(217, 217, 217, 0.395);
}

.col-three-min {
	width: 55%;
	height: auto;
	padding-top: 2%;
	display: flex;
}

.col-three {
	width: 70%;
	height: auto;
	padding-top: 2%;
	display: flex;
}

.col-four {
	width: 100%;
	height: auto;
	padding-top: 2%;
	display: flex;
}

.symbole {
	display: flex;
}

.symbole img {
	width: 10%;
	height: auto;
	padding: 2%;
	display: flex;
}

.font-title {

	font-family: "Raleway";
	font-size: 3.5em;
	font-style: normal;
	font-weight: 900;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	color: #1A1A1A;
}

.font-title {
	text-align: -webkit-center;
	text-align: center;
	width: 40%;
	padding-top: 5%;
	margin: 0 auto;
	display: flex;
}

.font-title p {
	word-spacing: 1em;
	font-style: normal;
	font-weight: 200;
}

.font-title-1 {
	padding-bottom: 4%;
	font-family: "Raleway";
	font-size: 3.5em;
	font-style: normal;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	color: #CCCCCC;
	text-align: -webkit-left;
	text-align: left;
}

.font-subtitle {
	font-family: "Raleway";
	font-size: 1.5;
	font-style: normal;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	color: #1A1A1A;
}

.font-subtitle {
	text-align: -webkit-center;
	text-align: center;
	width: 40%;
	padding-top: 2%;
	margin: 0 auto;
}

.font-secondary {
	/* 11-04-2020*/
	padding-bottom: 3%;
	font-family: Manrope3;
	font-size: 0.938em;
	font-style: normal;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	color: #1A1A1A;
	text-align: -webkit-left;
	text-align: left;
}

.font-secondary h3 {
	/* padding-bottom:3%; */
	font-family: Manrope3;
	font-size: 0.938em;
	font-style: normal;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	color: #1A1A1A;
	text-align: -webkit-left;
	text-align: left;
}

.font-secondary-bts h3 {
	padding-bottom: 3%;
	font-family: "Raleway";
	font-weight: bold;
	font-size: 1.1em;
	font-style: normal;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	color: #1A1A1A;
	text-align: -webkit-left;
	text-align: left;
}

.font-secondary-space {
	width: auto;
	height: 30%;
}



.font-body {
	font-family: "Raleway";
	font-size: 0.938em;
	font-style: normal;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	color: #1A1A1A;
	text-align: -webkit-left;
	text-align: left;

}

.font-body-tesla {
	font-family: "Raleway";
	font-size: 0.938em;
	/* 17-04-2020*/
	font-style: normal;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	color: #1A1A1A;
	text-align: -webkit-left;
	text-align: left;
}

.article-section .featured-title {
	font-family: 'Manrope3';
	font-size: 14px;
	font-weight: 800;
	line-height: 19px;
	letter-spacing: 0em;
	text-align: center;
	margin-top: 59.16px
}

.article-section .feature-divider {
	height: 2px;
	background: #000000;
	border: none;
	width: 558.7640380859375px;
	margin: auto;
	margin-top: 16.94px;
	margin-bottom: 15px;
}

.article-img a img:hover {
	filter: contrast(0.5);
	cursor: pointer;
}

.article-section .article-img {
	margin: auto;
	height: 167.29444885253906px;
	width: 488.1843566894531px;
	left: 0px;
	top: 0px;
	border-radius: 0px;
}

.body-container {
	width: 100%;
	height: auto;
	padding: 5%;
}

.font-body-2 {
	font-family: "Raleway";
	font-size: 0.938em;
	font-style: normal;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	color: #808080;
	text-align: -webkit-left;
	text-align: left;
}

.jr_project #jrVideo {
	/* filter: drop-shadow(1em 1em 2em #999); */
	border-radius: 1.5em;
}

.video-container {
	width: 100%;
	height: auto;
	text-align: center;
}

.jrwireframing {
	text-align: center;
}

.jrwireframing img {
	width: 80%;
	height: auto;
	/* filter: drop-shadow(1.5em 1.5em 4em #999); */
}

#threedscreen-container {
	width: 80%;
	height: auto;
	margin: 0 auto;
	padding-top: 5%;
}

.threedscreen {
	filter: drop-shadow(1em 1em 2em #999);
	text-align: center;
}

.threedscreen.four-img li {
	display: inline-block;
	width: 24%;
}

.threedscreen.three-img li {
	display: inline-block;
	width: 32%;
}

.threedscreen img {
	width: 100%;
	height: auto;
	padding: 2%;
}

/*---From plugin ---*/

/*#slider-container{
	width: 90%;
	height:auto%;
	position: static;
}
*/
.shadow-box {
	padding-top: 5%;
	/*padding-bottom:5%;*/
	/* width: 60%; 7-4-2020*/
	height: auto;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	filter: drop-shadow(1em 1em 2em #999);
}

.slider,
.s1 {
	width: 100%;
	height: auto;
	text-align: center;
	margin: 0 auto;
}

.slider div,
.s1 div {
	text-align: center;
}

.slider img,
.s1 img {
	margin: 10px auto;
}

.slick-slide img {
	width: 100%;
}

/*------*/


.gif-container {
	text-align: center;
	position: relative;
	width: 80%;
	height: auto;
	padding-top: 5%;
	margin: 0 auto;
}

.gif-container img {
	width: 65%;
	border-radius: 1.5em;
	filter: drop-shadow(1em 1em 2em #999);
}

.p12container {
	width: 100%;
	height: auto;
	margin-top: 10%;
	padding: 2%;
	background-color: #262626;
}

.p12 {
	text-align: center;
	z-index: 99;
}

.p12 img {
	width: 20%;
	height: 20%;
	filter: drop-shadow(1em 1em 2em #0D0D0D);
}

.p12b img {
	position: relative;
	top: -250px;
	left: 10%;
	margin-bottom: -250px;

}


.p12a {
	position: relative;
	top: 30%;
	width: none;
}

.p13container {
	display: flex;
	width: auto;
	text-align: center;
}

.p12c {
	padding: 15px;
	width: 40%;
	margin-left: 5%;
}

.p12c img {
	width: 70%;
	height: auto;
	filter: drop-shadow(1em 1em 2em #0D0D0D);

}

.p13 {
	width: 60%;
	position: relative;
	top: 100px;
	text-align: initial;

}

.p13 img {
	width: 25%;
	height: auto;
	padding: 4%;
	filter: drop-shadow(1em 1em 2em #0D0D0D);
}

.insta_screens {
	display: flex;
	justify-content: center;
}

.insta_screens img {
	width: 30%;
	height: auto;
	padding: 2%;
	filter: drop-shadow(1em 1em 2em #0D0D0D);
}

.spotify_container {
	display: flex;
}

.spotify_screens-a img {
	width: 90%;
	height: auto;
	padding: 2%;
	filter: drop-shadow(1em 1em 2em #0D0D0D);
}

.spotify_screens-b img {
	width: 40%;
	height: auto;
	padding: 2%;
	filter: drop-shadow(1em 1em 2em #0D0D0D);
}

.pdf-icon {
	width: 20%;
	height: auto;
	margin: 0 auto;
	/* padding-top: 5%; */
	text-align: center;
	margin-top: 90px;
}

.pdf-icon img {
	width: 20%;
	height: auto;
}

.button_container {
	width: 100%;
	text-align: center;
	margin: 2%;
	padding-bottom: 5%;
	height: auto;
}

.casestudy {
	position: relative;
	left: 42vw;
	display: flex;
	align-items: center;
	font-family: "Raleway";
	font-size: 0.838em;
	font-style: normal;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	color: #D9D9D9;
	justify-content: center;
}

.casestudy {
	width: 110px;
	height: 25px;
	border-radius: 15px;
	border: 3px solid #D9D9D9;
	/*27-5-2020*/

}

.casestudy a {
	margin: 10px;
	color: #D9D9D9;
	text-decoration: none;
}

.casestudy a:hover {
	color: #37D76D;
}

.end-ad img {
	width: 100%;
	height: auto;
	display: block;
}

.end-ad video {
	width: 100%;
	height: auto;
	display: block;
}





/*Tesla project -----------------------top--------------------------*/


.tesla_logo {
	position: inherit;
	text-align: center;
	margin-top: 12%;
}

.tesla-car {
	display: grid;
	justify-content: center;
}

.tesla_logo img {
	width: 20%;
	height: auto;
	margin: auto;
}

.frame-container {
	text-align: center;
	/*padding: 5%;*/
}

.frame-1 img {
	width: 40%;
	height: auto;
}

.frame-1 {
	right: 20%;
}

.frame-2 {
	position: absolute;
	top: 0%;
	left: 20%;
}

.frame-2 img {
	width: 40%;
	height: auto;
}

#myImg {
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
}

.font-secondary h3 {
	font-weight: bold;
}

.heading {
	text-transform: uppercase;
}

p.content {
	font-weight: bold;
}

#myImg:hover {
	opacity: 0.7;
}

/* The Modal (background) */

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
}

/* Add Animation - Zoom in the Modal */
/* .modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
} */

@keyframes zoom {
	from {
		transform: scale(0)
	}

	to {
		transform: scale(1)
	}
}

/* The Close Button */
#closeImg {
	width: 50%;
	height: 50%;
}

.password-modal .modal-header {
	border-bottom: 0px !important;
}

.modal-header .close {
	/* padding: 1rem .5rem 1rem !important; */
	padding: .5rem .5rem !important;
}

.close {
	position: absolute;
	top: 15px;
	right: 18px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

.close:hover,
.close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}

#blankspace {

	width: 100%;
	height: 300px;
	background-color: #63B4FF;
}


/*Poster Design prpject -----------------------Top--------------------------*/




.poster_project {
	float: left;
	width: 100%;
	padding-top: 6%;

}

.poster_project img {
	filter: drop-shadow(20px 20px 40px #999);
}

.poster_project_thumb_wrapper {
	float: left;
	width: 33.33333%;
	padding: 5px;
}

.poster_project_thumb_wrapper,
.poster_project_thumb_wrapper img {
	display: block;
	transition: all .3s ease-in-out;
	border-radius: 2%
}

.poster_project_thumb_wrapper img {

	width: 30%;
	text-align: center;

}

.poster_project_thumb_wrapper {

	border-radius: 5%
}

.poster_project_thumb_wrapper :hover {
	transform: scale(1.07);

}

.poster_project_thumb_wrapper :hover img {
	transform: scale(1.07);
	transition: transform .2s ease-in-out;
}

/*Poster Design prpject -----------------------End--------------------------*/

/*Fake News-----------------------------------top---------------------------*/

.ipad img {
	width: 35%;
	height: 35%;
}

.ipad {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.ipad 2,
4,
6 {

	margin-left: 20%;
}

/*Fake News-----------------------------------end---------------------------*/

/*Menu of Plastic-----------------------------------top---------------------------*/


.mp_container {
	padding-top: 20%;
	padding-bottom: 15%;
	text-align: center;
}


.mp_title {
	font-family: "Raleway";
	font-size: 42px;
	font-style: bold;
	line-height: 16px;
	letter-spacing: 0.5px;
	color: #1A1A1A;
	padding: 4%;
}

.mp_title p {
	font-weight: 900;
}


.mp_subtitle {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 10%;
}


.mp_subtitle {
	font-family: "Raleway";
	font-size: 1.1em;
	font-style: normal;
	line-height: 1.5em;
	letter-spacing: 0.05em;
	color: #1A1A1A;
}

#mp-main {
	width: 70%;
	height: auto;

	/*background-color: #fff;*/
	/*filter: drop-shadow(10px 10px 40px #999);*/
	-webkit-border-radius: 5px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	top: 10%;

	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
	background-color: rgba(217, 217, 217, 0.395);
}

.mockup img {
	width: 100%;
	height: 90%;
}

.mp-mockup img {
	width: 100%;
	height: 100%;
}



/*Menu of Plastic-----------------------------------end---------------------------*/

/* bootsrap CSS */

/* .card {
	background: transparent !important;
	border: none !important;
} */

#john_richmond_wrapper {
	float: left;
	position: relative;
	width: 100%;
	overflow: hidden;
	/* background-image: url("../img/AB-Desktop.jpg"); */
	background-repeat: no-repeat;
}

.margin_top {
	margin-top: 3%;
}

/*************************bts_digital_mag css *****************************/

.bts_tiltle {
	font-family: FoundryGridnik;
	font-style: normal;
	font-weight: bold;
	font-size: 45px;
	line-height: 51px;
	text-align: center;
	color: #000000;
	margin-bottom: 20px;

}

.font-subtitle-bts {
	font-family: Raleway;
	font-style: normal;
	font-weight: normal;
	font-size: 20px;
	line-height: 23px;
	text-align: center;
	color: #000000;
	left: 532.53px;
	top: 330.45px;
}

.bTS-iPad-Mockup-4 {
	position: relative;
	width: 70%;
	height: 173px;
	left: 20%;
	margin-top: 85px;
}

.bTS-iPad-Mockup-4>img {
	width: 84%;
	display: block !important;
}

.challenge-list-div {
	margin-top: 46px !important;
}

.jr_project-div {
	margin-top: 50px !important;
}

.margin-top-div {
	margin-top: 14px;
}

.site-map-title {
	font-family: 'Manrope3';
	font-size: 12px;
	font-weight: 800;
	line-height: 17px;
	letter-spacing: 0em;
	text-align: left;
	color: #B4B4B4;
	text-align: center;
}

.BTS-Site-Map {
	width: 637.36px;
	height: 536.56px;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 10px;
}

.BTS-User-Flow {
	width: 641.24px;
	height: 539.82px;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 10px;
}

.iPad-BTS-1 {
	/* width: 18%; */
	height: 243.93px;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 5px;
	margin-left: 3%;
	width: 183.4px;
	height: 243.93px;
}

.All-iPad-BTS {
	width: 58%;
	height: 425.32px;
	max-width: 705.33px;
	max-height: 407.23px;
	left: 366.99px;
	top: 3781.97px;
	border-radius: 5px;
}

.Prototype {
	width: 822.61px;
	height: 338.08px;
	border-radius: 5px;
}

.Magazine-UI-Kit {
	width: 823.76px;
	height: 592.92px;
	background: #E5E5E5;
	border-radius: 5px;
}

.artical-images {
	width: 100%;
	height: auto;
	text-align: center;
	position: relative;
}

.artical-01-bg-img>img {
	width: 400;
	height: 400px;
	/* filter: blur(40px); */
	/* transform: matrix(-1, 0, 0, 1, 0, 0); */
}

#content_container1 {
	width: 80%;
	height: auto;
	margin: 0 auto;
	/* padding-top: 5%; */
	position: relative;
	display: flex;
	flex-wrap: wrap;
}

.col-one1 {
	width: 33%;
	height: auto;
	padding-left: 2%;
	/*display: inline-block;*/
}


#jrVideoArtical01 {
	position: absolute;
	width: 80%;
	height: 416.81px;
	border-radius: 5px;
	left: -2%;
	top: 44%;
	border-radius: 5px;
	z-index: 1;
	margin-bottom: 200px;
}

#jrVideoArtical02 {
	position: relative;
	width: 313.48px;
	height: 416.81px;
	border-radius: 6px;
	left: 22%;
	top: 18%;
	z-index: 1;
	margin-bottom: 200px;
}

/* */
.font-hedings {
	position: relative;
	width: 256.71px;
	height: 38.51px;
	font-family: Manrope3;
	font-style: normal;
	font-weight: 800;
	font-size: 12px;
	line-height: 16px;
	color: #000000;
}

.font-hedings-body {
	width: 256.71px !important;
	height: 64px !important;
	font-family: Manrope3;
	font-style: normal;
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	color: #000000;
}

.cover-vedio {
	padding: 0 !important;
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	margin-bottom: 100px;
}

.BTS-iPad-Mockup-3 img {
	position: absolute;
	width: 366.37px;
	/* height: 380.03px; */
	/* left: 200px; */
	left: 231.67px;
	float: left;
	/* margin-right: 51px !important;
		margin-top: 50px; */
}

.BTS-iPad-Mockup-v1 img {
	position: relative;
	width: 273.41px;
	height: 382.89px;
	filter: blur(4px);
	left: 521.91px;
	margin-bottom: 50px;
}

.video-mask {
	position: relative;
	border-radius: 10px;
	width: 384.79px;
	/* height: 538.86px; */
	left: 627.92px;
	/* left: 500px; */
	z-index: 1;
}

.margin_top {
	margin-top: 2em !important;
}

.margin_bottom {
	margin-bottom: 3rem;
}

.padding_top {
	padding-top: 0 !important;
}

.content_title_magzine h1 {
	width: 288.75px;
	height: 41.23px;
	font-family: Raleway;
	font-style: normal;
	font-weight: bold;
	font-size: 36px;
	line-height: 42px;
	color: #000000;
}

.artical-01-bg-img>img {
	position: absolute;
	width: 533.56px;
	height: 374.22px;
	left: 32%;
}

.artical-02-bg-img>img {
	position: absolute;
	width: 533.56px;
	height: 374.22px;
	left: 38%;
}

.artical-03-bg-img>img {
	position: absolute;
	width: 533.56px;
	height: 374.22px;
	left: 38%;
}

.artical_title {
	position: relative;
	width: 242.13px;
	height: 104.51px;
	left: 250.26px;
	margin-top: 200px;
	font-family: Manrope3;
	font-style: normal;
	font-weight: 300;
	font-size: 24px;
	line-height: 33px;
	color: #DBDBDB;
	float: left;
}

@import url("https://fonts.googleapis.com/css?family=Manrope3");

.artical_title-2 {
	position: relative;
	width: 242.13px;
	height: 104.51px;
	left: 250.26px;
	margin-top: 130px;
	font-family: Manrope3;
	font-style: normal;
	font-weight: 300;
	font-size: 24px;
	line-height: 33px;
	color: #DBDBDB;
	float: left;
}

.artical-02-bg-img {
	margin-top: 75px;
}

.image_caption {
	position: relative;
	width: 256.71px;
	height: 163.34px;
	left: 500.28px;
	margin-top: 300px;
	font-family: Raleway;
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
	line-height: 14px;
	color: #000000;
	z-index: 1;
}

.image_caption_va_01 {
	position: relative;
	width: 256.71px;
	height: 163.34px;
	left: 62%;
	margin-top: 31%;
	font-family: Raleway;
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
	line-height: 14px;
	color: #000000;
	z-index: 1;
}

.image_caption_va_02 {
	position: relative;
	width: 256.71px;
	height: 163.34px;
	left: 33%;
	margin-top: 41%;
	font-family: Raleway;
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
	line-height: 14px;
	color: #000000;
	z-index: 1;
}

.image_caption_va_03 {
	position: relative;
	width: 256.71px;
	height: 163.34px;
	left: 33%;
	margin-top: 44%;
	font-family: Raleway;
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
	line-height: 14px;
	color: #000000;
	z-index: 1;
}

.container-Hight {
	height: 790px !important;
}

.container-article2 {
	height: 615px !important;
}

.container-article3 {
	height: 711px !important;
}

.artical-03-bg-img img {
	height: 185.47px !important;
	/* left: 543.43px; */
	margin-top: 18%;
	left: 33%;
}

.Bchain-screen-1 {
	position: relative;
	width: 313.48px;
	height: 417.97px;
	left: 400px;
}

.Bchain-screen-1 video {
	position: relative;
	width: 313.48px;
	height: 417.97px;
}

.BTS-magazine-spread-mockup img {
	position: relative;
	width: 691.89px;
	height: 522.95px;
	left: 455px;
	top: 65px;
}

.issue-screen1 {
	position: relative;
	width: 621.89px;
	height: 329.01px;
	left: 409.05px;
	height: 329px;
	/* top: 8883.57px; */
}

.div-1-over {
	position: relative;
	width: 272.06px;
	height: 43.18px;
	left: 60.15px;
	top: 80px;
	background: red;

	/* background: #343434; */
	border-radius: 26.4117px;
}

#replace_target_heading {
	width: 175px;
	height: 12px;
	font-family: Raleway;
	font-style: normal;
	font-weight: normal;
	font-size: 10px;
	line-height: 12px;
	/* identical to box height */
	color: #FFFFFF;

}

#replace_target_subheding {
	font-family: Raleway;
	font-style: normal;
	font-weight: normal;
	font-size: 10px;
	line-height: 12px;
	color: #FFFFFF;

}



/* Final Menu -Dec 2022 */

.gallery-footer {
	display: flex;
	flex-wrap: wrap;
}

.gallery-footer a {
	position: relative;
	float: left;
	width: 33.33333%;
	padding: 5px;
	/* overflow: hidden; */
	transition: 0.3s;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	border-radius: 10px;
}

.gallery-footer a:hover .overlay {
	opacity: 1;
}

.gallery-footer .overlay {
	position: absolute;
	bottom: 12%;
	/* bottom: 15px; */
	background: #000000;
	color: #f1f1f1;
	height: 22%;
	width: 71.6%;
	border-radius: 25px;
	transition: .5s ease;
	opacity: 0;
	font-size: 20px;
	padding: 20px;
	left: 14%;
	text-align: center;
}

.gallery-footer a:hover {
	transform: scale(1.14);
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
	position: relative;
	z-index: 999;
}

.gallery-footer a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
	.gallery-footer .description {
	  -webkit-backdrop-filter: blur(10px);
	  backdrop-filter: blur(10px);
	} */


/* .gallery-footer .description::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		box-shadow: inset 0 0 2000px rgb(255 255 255 / 50%);
		filter: blur(10px);
		background: inherit;
	} */

.gallery-footer .carscan-word-break {
	padding: 78px 104px 24px 104px;
}

.gallery-footer .roundglass-word-break {
	padding: 78px 86px 24px 86px;
}

.gallery-footer .roundglass-word-break {
	padding: 78px 86px 24px 86px;
}

.gallery-footer .kooness-word-break {
	padding: 78px 112px 24px 112px;
}

.gallery-footer .john-word-break {
	padding: 78px 94px 24px 94px;
}

.gallery-footer .pmcu-word-break {
	padding: 78px 116px 24px 116px;
}

.gallery-footer .bts-word-break {
	padding: 78px 116px 24px 116px;
}

.gallery-footer .fakenews-word-break,
.gallery-footer .bts-word-break {
	padding: 78px 55px 24px 55px;
}

.gallery-footer .fakenews-word-break p,
.gallery-footer .bts-word-break p {
	margin: 10px 59px !important;
}

.gallery-footer .plastic-word-break {
	padding: 78px 132px 24px 132px;
}

.gallery-footer .motion-word-break {
	padding: 78px 131px 24px 131px;
}

.gallery-footer .appr-1-word-break {
	padding: 78px 112px 24px 112px;
}

.gallery-footer .appr-2-word-break {
	padding: 78px 86px 24px 86px;
}

.gallery-footer .d1-word-break,
.gallery-footer .poster-word-break {
	padding: 78px 116px 24px 116px;
}

.gallery-footer .lila-word-break {
	padding: 78px 130px 26px 130px;
}

.gallery-footer .overlay-gray {
	background: #343434 !important;
}

.gallery-footer .description {
	position: absolute;
	bottom: -109px;
	height: 171px;
	left: 0;
	left: 0;
	right: 0;
	background: linear-gradient(276.94deg, #545454 3.5%, #434343 97.96%);
	border: 0.5px solid #9B9B9B;
	box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);
	border-radius: 20px;
	/* transform: matrix(1, 0, 0, -1, 0, 0); */
	/* backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	-moz-filter: blur(20px);
	-webkit-filter: blur(20px);
	-o-filter: blur(20px); */
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	border-radius: 20px;
	color: #FFFFFF;
	/* padding: 63px 104px 24px 104px; */
	margin: 6px;
	display: none;
	z-index: -1;
}

.gallery-footer a:hover .description {
	display: block;
}

.gallery-footer .description h3 {
	margin: 0;
	font-family: 'Raleway';
	font-size: 14px;
	font-weight: 600;
	line-height: 19px;
	letter-spacing: 0em;
	text-align: center;
}

.gallery-footer .description p {
	font-family: 'Raleway';
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 130.9%;
	letter-spacing: 0.03em;
	text-align: center;
	margin: 9px 0 0;
	color: #DBDBDB;
}

.menu-expand {
	position: relative;
	left: 100px !important;
	/* width:200px;
	height:50px; */
	display: inline;
	border: 1px solid red;
}

.fa-long-arrow-left {
	color: black;
	position: relative;
	width: 29.76px;
	height: 0px;
	left: 10px;
	box-sizing: border-box;
	z-index: 1;
}

.menu-expandable {
	position: absolute;
	width: 576px;
	height: 79.81px;
	left: 0px;
	top: 79.81px;
	background: #000000;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	display: none;
}

.menu-expandable>li {
	position: relative;
	width: 108.28px;
	height: 19.45px;
	left: 108px;
	top: 29px;
	display: inline-block;

}

.menu-expandable>li>a {
	font-family: Manrope3;
	font-style: normal;
	font-weight: normal;
	font-size: 18px;
	line-height: 151.5%;
	align-items: center;
	text-align: center;
	color: #FFFFFF;
}

.menu-expandable>li>a:hover {
	color: #37D76D !important;
}

.image {
	position: relative;
}

.image:after,
.image:before {
	position: absolute;
	opacity: 0;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

.image:after {
	content: '\A';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.6);
}

.image:before {
	content: attr(data-content);
	width: 272.06px;
	color: #fff;
	z-index: 1;
	bottom: 0;
	padding: 4px 10px;
	text-align: center;
	background: red;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	left: 20px;
	margin-bottom: 20%;
	background: #000000;
	border-radius: 26.4117px;
	height: 43.18px;
}

.image:hover:after,
.image:hover:before {
	opacity: 1;
}

.margin-div-right {
	margin-right: 87px;
}

.artical_section_height {
	height: 690px;
}

/* Bootstrap Codes*/

.m-2 {
	margin: 2px;
}

.m-3 {
	margin: 3px;
}

.m-4 {
	margin: 4px;
}

.m-5 {
	margin: 5px;
}

.mt-2 {
	margin-top: 2px;
}

.mt-3 {
	margin-top: 3px;
}

.mt-4 {
	margin-top: 4px;
}

.mt-5 {
	margin-top: 5px;
}

.mb-2 {
	margin-bottom: 2px;
}

.mb-3 {
	margin-bottom: 3px;
}

.mb-4 {
	margin-bottom: 4px;
}

.mb-5 {
	margin-bottom: 5px;
}

.password-modal .modal-header {
	border-bottom: 0px !important;
}

.password-modal .modal-footer {
	border-top: 0px !important;
}

.password-modal.modal.show .modal-dialog {
	position: relative;
	margin-top: 35vh;
}

.learning-outcome-content .col-two {
	width: 100% !important;
}

.back-arrow {
	display: inline;
}

#back-arrow {
	font-size: 40px;
	margin-left: 29px;
	bottom: 8.5%;
	/*1650px; */
	display: inline;
	position: absolute;
	color: black;
	/* left: 49px; */
}

#back-arrow>a {
	color: black;
}

#back-arrow>a:hover {
	color: #37D76D;
}

@media only screen and (min-width: 992px) {
	.menu-expandable {
		display: none !important;
	}
}