:root {
  --jumbotron-padding-y: 3rem;
}
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap')
</style>
.jumbotron {  padding-top: var(--jumbotron-padding-y);  padding-bottom: var(--jumbotron-padding-y);  margin-bottom: 0;  background-color: #fff;}
@media (min-width: 768px) {
  .jumbotron {    padding-top: calc(var(--jumbotron-padding-y) * 2);    padding-bottom: calc(var(--jumbotron-padding-y) * 2);  }
}
.jumbotron p:last-child {  margin-bottom: 0;}
.jumbotron-heading {  font-weight: 300;}
.jumbotron .container {  max-width: 40rem;}


.playfair-display {
  font-family: "Playfair Display", serif;
  font-weight: 0;
  font-style: normal;} 
  
ul{list-style-type:none; padding:0px; margin:0px;}

body { /* background-color: #F7F4F2;*/ background-color:#fff;}
.clear-s{display:block!important; clear:both!important; line-height:0px!important; font-size:0px!important;}
.container{margin:0 auto; width:960px;  transition: all ease 0.5s; position:relative; }

.nav-sticky{ overflow: hidden; position: fixed; overflow: hidden;   bottom: 50px; z-index:2px; width:272px; height:auto; 
border-radius:10px;  left: calc(50% - 270px / 2); background-color: rgb(62, 62, 62, 0.8); padding:6px; 
display: none!important; z-index: 9999!important;  animation: fadeIn 1s; -webkit-animation: fadeIn 1s;  -moz-animation: fadeIn 1s;  
-o-animation: fadeIn 2s;  -ms-animation: fadeIn 1s; }

.nav-sticky.shown {  display: block!important;  transition: all ease 0.5s!important;  }
.nav-sticky .nav-in{background-color:#000; padding:10px 15px 10px; border-radius:8px; float:left; margin-right:6px;} 
.nav-sticky .nav-in ul{padding:0px; margin:0px; list-style-type:none; color: #d3d3d3; line-height:30px; font-size:16px!important;} 
.nav-sticky .nav-in ul a{color: #d3d3d3; transition: all ease 0.5s; }
.nav-sticky .nav-in ul a:hover{color: #fff; text-decoration:none; transition: all ease 0.5s;}
.nav-sticky .nav-in ul li{float:left; padding: 0 15px 0 0px; border-right:1px solid #555; }
.nav-sticky .nav-in ul li:nth-last-child(-n + 1){margin:0; padding: 0 0 0 15px; border-right:0px solid #555;}
.nav-sticky .nav-in .active{ text-decoration: line-through; cursor:default; }
.nav-sticky .btn-resume{float:left; padding:11px 15px!important; font-size:16px!important; margin:0px!important; border-radius:8px; border:0px!important;background-color:#222222!important; color: #d3d3d3!important;}
.nav-sticky .btn-resume a{color: #d3d3d3; transition: all ease 0.5s;}
.nav-sticky .btn-resume:hover, .nav-sticky .btn-resume:focus{color: #d3d3d3;  background-color:#3E3E3E!important; color: #d3d3d3!important;}
@keyframes fadeIn {  0% { opacity: 0; }  100% { opacity: 1; }}
@-moz-keyframes fadeIn {  0% { opacity: 0; }  100% { opacity: 1; }}
@-webkit-keyframes fadeIn {  0% { opacity: 0; }  100% { opacity: 1; }}
@-o-keyframes fadeIn {  0% { opacity: 0; }  100% { opacity: 1; }}
@-ms-keyframes fadeIn {  0% { opacity: 0; }  100% { opacity: 1; }}

/*Background Check pattern*/
/*
body {
  background-color: #e5e5f7; opacity: 0.9; z-index:-1px; 
  background-image:  linear-gradient(#ccc 1px, transparent 1px), linear-gradient(to right, #ccc 1px, #fff 1px); 
  background-size: 100px 100px;
}*/


/* Header */
.masthead-in{ font-size:14px!important; padding:30px 0 0!important; margin: 0px!important; display:block!important; clear:both!important; }
.masthead-brand{ margin: 0!important; font-size: 20px!important; line-height:28px!important;	color:#000!important;	font-weight:bold;}
.brand-wrap{float:left; transition: all ease 0.5s; }
.brand-wrap img{float:left; border-radius:100px;} 
.brand-wrap img:hover{float:left;   } 

.masthead-in h3 a{color:#221429!important; transition: all ease 0.5s;}
.masthead-in h3 a:hover, .masthead-in h3 a:focus{color: rgba(0, 0, 0, .5)!important; text-decoration:none!important;}
.nav-masthead .nav-link {  padding:0; line-height:30px;  font-weight: 400;  color:#000!important; background-color: transparent; transition: all ease 0.5s; }
.nav-masthead .nav-link:hover { color:#FD2E35!important;  }
.nav-masthead .nav-link:focus { color:#000!important;  }
.nav-masthead .nav-link + .nav-link {  margin-left: 20px; }
.nav-masthead .active {  color:#000!important;  font-weight: 600!important; text-decoration: line-through; font-size:14px!important; cursor:default;  }
.nav-masthead a {  color:#000!important; text-decoration:none; }
.nav-masthead{float:right;}
/*Nav Animation*/
.masthead-in ul{padding:5px 0 0; font-size:14px!important; list-style-type:none;}
.masthead-in ul li{float:left; margin:0 20px 0 0;}
.masthead-in ul li:nth-last-child(-n + 1){margin:0 0px 0 0;}
.masthead-in span {  position: relative;  display: block;  cursor: pointer; }
.masthead-in span:before, .masthead-in span:after {  content: '';  position: absolute;  width: 0%;  height: 1px;  bottom: -5%;
  margin-top: -0.5px;  background: #FD2E35!important;}
.masthead-in span:before {  left: -0.5px;}
.masthead-in span:after {  /*right: 2.5px;*/  right: 0px;  background: #FD2E35!important;  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);}
.masthead-in span:hover:before {  background: #FD2E35!important;  width: 100%;  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);}
.masthead-in span:hover:after {  background: transparent;  width: 100%;  transition: 0s;}




h4.title3 { color:#000; font-size:14px; padding:0px; margin:0px 0px 40px; /*text-transform:uppercase;  letter-spacing:3px!important;*/  }
h4.title3 span{font-weight:400!important; font-style:italic!important;}

h4.title4 { /*margin:0px 0px 28px;*/ font-size:14px; text-transform:uppercase; letter-spacing:1px!important;  }
h4.title4 span{font-weight:700!important;}

.fnt-14 {font-size: 14px;line-height: 24px;letter-spacing: normal !important;}
.btn-portfolio{padding:8px 35px!important; background-color:#000; color:#fff; font-size:16px; margin:0px; border-radius:10px; line-height:30px; 
transition: all ease 0.5s; }
.btn-portfolio:hover, .btn-portfolio:focus{background-color:#221429!important; color:#fff; outline:none!important; box-shadow:none!important;
 /*transform: scale(1.2, 1.2);*/transform: translateY(-5px);  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.35);  } 
.btn-resume{padding:0px 15px!important; border:1px solid #000; font-size:14px!important; margin: 0 0 0 20px; border-radius:5px; 
line-height:28px; font-weight: 400; transition: all ease 0.5s;  }
a.btn-resume{color:#000!important;}
.btn-resume:hover, .btn-resume:focus { background-color:#221429!important; color:#fff!important; outline:none!important; box-shadow:none!important;
 /*transform: scale(1.2, 1.2);*/ }

/*
 * Global
 */
h1{color:#221429!important; font-size:60px; line-height:71px!important; font-weight:bold; letter-spacing:-1px; margin:0px!important;   }
h1 span{color:#FD2E35; font-weight:600!important; font-style:italic!important; font-family: "Playfair Display", serif!important; letter-spacing:-2px!important;}
h2{color:#221429!important; font-size:60px; line-height:68px!important; font-weight:bold; letter-spacing:-1px;}
h2 span{color:#FD2E35; font-weight:400!important; font-style:italic!important; font-family: "Playfair Display", serif!important;}
p {  margin:0px 0 0 0;}
h2.project-title{font-weight:400!important; font-size:24px!important; line-height:36px!important;}


.wrap-desktop{width:650px; margin:50px 0 0;}
.wrap-desktop p{font-weight:400; font-size:20px; line-height:31px;  color: #555!important; 
font-size:20px!important; line-height:31px!important; margin-top:15px!important;}

.col-role:nth-last-child(-n + 2){margin-bottom:0px!important; border-bottom:0px solid #BEBEBE!important; padding-bottom:0px!important; }


.global-width {  width:100%!important;  background-color:#fff;}
.port-bg { background-color:#F7F4F2!important; }
.global-inner {width:960px; margin:0 auto!important; padding:0px!important; }
.work-wrap{padding:0px 0 60px!important;}
.title-wrap{padding:80px 0 80px!important; display:block; }
/* Portfolio */
.card-img-top {    border-top-left-radius: calc(0px)!important;    border-top-right-radius: calc(0px)!important;}


.card-body{padding:25px 0px 30px;} 
.card-body:nth-child(5){padding:25px 0px 0px!important;} 
.card-body p{color:#555!important; margin-bottom: 1rem;}
.card-text a{color:#221429!important;}

.color-white{color:#fff!important;}
.bg-black{background-color:#000!important;}
.footer-wrap{  }
.footer{ border-top:1px solid #474747!important; padding:40px 0 30px;}
.footer p{ font-size:14px; line-height:24px; float:left; color:#999;}
.footer p span{ font-size:12px; line-height:22px; display:block; color:#575757;}
.footer-wrap .container{padding:0px!important; }
.social-list {width:90px; float:right; }
.social-list li {float:right; margin:0 0 0 10px; }
.social-list li img{height:15px; }
.m-4 { margin: 1.5rem!important}



/* Portfolio Detail */
.container{}
.bc-nav{background-color: none!important; border-radius: 0.0rem; padding:0px!important; margin:0px 0px 60px!important; list-style-type:none;
display:block!important; clear:both!important; font-size:14px; }
.bc-nav li{float:left; margin: 0 6px 0 0;}
.bc-nav li.active-bc{color:#000!important; font-weight:700!important;}
.bc-nav a{color:#000!important; }
.bc-nav a:hover { color:#FD2E35!important; text-decoration:none;  }
.title-cover{padding:80px 0 40px!important; display:block;}
.wrap-width{width:630px;}
.row-image img{width:100%; line-height:0px; font-size:0px; display:block; border-radius:0px!important;}
.row-image-50 img{width:65%; margin:0 auto!important; line-height:0px; font-size:0px; display:block; border-radius:0px!important;}
h4.title-subhead{color:#000; font-size:14px; font-weight:700; margin:0 0 15px;/*text-transform:uppercase; padding:0px;  letter-spacing:1px!important;*/ }
.row-title{padding:0px; margin:0px;}
.row-title ul{padding:0px; margin:0px; font-size:16px; line-height:26px; color:#555;}
.row-title ol{font-size:16px; line-height:26px; color:#555; margin:0px 0px 0px 15px; padding:0px;}
.row-title ul li{padding:0px; margin:0px;}
.client-col{width:25%; float:left; border-left:2px solid #000!important; border-top:2px solid #000!important; margin:0; text-align:center; 
background-color:#1A2427; background-color: rgb(26, 36, 39, 0.5)!important;}
/*.client-lumos{background-color:#2D093E;}*/

.divider-m{border-bottom:1px solid #ddd; height:1px; margin:0 0 40px;}

.global-width p{line-height:26px; font-size:16px; color:#555;}
.global-width p.sub-para{line-height:24px; font-size:14px; color:#555;}
.global-width p.sub-para span{font-weight:500!important;}
.approach-col{width:25%; float:left; border-left:2px dotted #BEBEBE; color:#555!important; padding:0 0 0 35px;}
.approach-col h4{color:#555!important; font-weight:500; font-size:16px;}
.approach-first{border:0px!important; padding:0px!important;}
.approach-padd{padding:0 0 0 35px;}
.approach-row{margin:30px 0px 0px;}
.divider-m{border-bottom:1px solid #ddd; height:1px; margin:0 0 40px;}
.role-row{margin:44px 0 10px; padding:0px;  }
.col-role{float:left; padding:3px 30px 0 0;  border-right:1px solid #BEBEBE; min-height:65px;}
.col-last{border-right:0px!important; padding:3px 0px 0px 30px!important; }
.col-role img{height:25px;}
.col-padd{padding:3px 30px 0px 30px;}
.col-role h4{color:#000; font-weight:700; font-size:14px; padding:0px; margin:0 0 15px; /*text-transform:uppercase;  letter-spacing:1px!important;*/}
.col-role p{color:#555; font-size:16px; padding:0px; margin:0px; }
.col-role ul{list-style-type:none;padding:0px; display:block;}
.col-role ul li{float:left; margin:0 10px 0 0;}
.col-role ul li.role-last{margin:0 0 0 0!important;}
.row-title-bg{background-color:#F8F8F8; padding:60px;}
.row-title-bg h4{color:#555; font-weight:500;}
.clientele{background-color: #000; padding:100px 0 100px;   }
.clientele p{ color: #999!important; font-size:20px; line-height:31px; }

/* About */
.expertise-row{ border-top:1px solid #474747!important; padding:60px 0 0px;}
.full-stretch{width:100%!important; float:none!important;}
.expertise-col{width:33.333%; float:left; border-right:0px dotted #BEBEBE; color:#555!important; padding:0px;}
.expertise-col:nth-child(1) {padding-left:0px!important; }
.expertise-col h4{color:#fff!important; font-weight:500; font-size:16px; padding:0 0 10px;}
.expertise-col ul{color:#999!important; line-height:25px;}
ul.icon-tool{margin:20px 0 0; }
ul.icon-tool li{float:left; margin:0 10px 10px 0; padding:5px 12px 8px 10px; border:1px solid #474747!important; 
border-radius: 25px;  }
ul.icon-tool{ }
ul.icon-tool li img{ margin:0 5px 0 0; height:22px; line-height:0px!important; font-size:0px!important; }

.margbottom-70{margin:0px 0 70px; padding:0px;}
.margbottom-add02{margin:80px 0px 50px 0px; padding:0px;}
.margin-03{margin:70px 0px 70px 0px; padding:0px;}
.ma-20{margin-top:20px;}
.ma-10{margin-top:10px!important;}
.marg-30{margin:30px 0 0; padding:0px;}
.marg-40{margin-top:40px ; padding:0px;}
.marg-50{margin:50px 0 0; padding:0px;}
.marg-70{margin:70px 0 0; padding:0px;}
.marg-80{margin:80px 0 0; padding:0px;}
.margin-add{margin:80px 30px 50px 50px;}
.margbottom-40{margin-bottom:40px; padding:0px;}
.marginbottom-20{margin-bottom:20px; padding:0px;}
.margbottom-100{margin-bottom:100px; padding:0px;}
.margintop-100{margin-top:100px; padding:0px;}

/* Zoom animation */
.zoom, .small{overflow: hidden; padding: 0; width: 465px; height: 336px; margin:0px;}
.zoom img {transition-duration: 4s; margin: 0 auto; display: block;}
.zoom img:hover {transform: scale(1.1);  -webkit-transform: scale(1.1);-moz-transform: scale(1.1); z-index: 0;}
.small img{transition-duration: 4s;  margin: 0 auto; display: block; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1);}
.small img:hover {transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); z-index: 0;}

/* style changes when the screen gets smaller */
@media (max-width: 1024px) {    
	.masthead{padding:0 30px;}
	.btn-resume{padding:0px 15px!important; margin: 0 0 0 1.5rem; line-height:28px; font-size: 0.9rem!important; }
	.nav-masthead .nav-link {  font-size: 0.9rem!important; }
	.wrap-desktop{width:100%!important;}
	.margin-add{margin:80px 0px 50px 0px!important;}	
	
	.approach-col{width:50%; padding-left:10%; }
	.approach-col:nth-child(3) {padding-left:0px!important; border:0px!important;}
	.approach-col:nth-child(3), .approach-col:nth-child(4){margin-top:50px!important;}
	.approach-row{margin:30px 0px 0px;}
	.client-col{width:33.33%; }	
	.expertise-col{width:50%!important; float:left; }
	.expertise-col:nth-child(3) {margin-top:50px!important; }
	.full-stretch{width:100%!important; float:none!important;}	
	.clientele{padding:100px 0 114px!important; }
	
	/* Zoom animation */
	.zoom, .small{overflow: hidden; padding: 0; width: 345px; height: 253px; margin:0px;}
	.zoom img, .small img{width: 345px; height: 253px;}
}

@media (max-width: 767px) {
     h1{ color:#221429!important; font-size:45px; line-height:55px!important; font-weight:bold; letter-spacing:-1px;}
	 h2{ font-size:45px!important; line-height:55px!important; }
	 h2.project-title{font-weight:400!important; font-size:24px!important; line-height:36px!important;}
	 .title-cover h2{font-weight:400; font-size:20px; line-height:30px;}
	 .title-wrap p{ font-size: 18px; line-height: 28px;}
	 /*.title-wrap{padding:37px 0 30px!important; display:block;}	 */
	 .masthead {  margin-bottom: 1.0rem;}
	 .nav-masthead .nav-link + .nav-link {  margin-left: 16px!important; font-size: 12px!important; }
	 .nav-masthead .active {    font-size: 12px!important;   }
	 .btn-resume{font-size: 12px!important; margin: 0 0 0 16px; }
	 
	 .masthead-brand{float:left;}
	 .nav-masthead{float:right;}
	 .container{margin:0 auto; width:100%!important; padding-left:30px!important; padding-right:30px!important;}
	 h4.title3 { margin:0px 0px 28px; font-size:12px; }
	 h4.title3 span{font-weight:700!important;}
	 .brand-wrap{font-size:18px!important;}
	 .wrap-width{width:100%!important;}
	 
	 .row-image-50 img{width:90%; }
	 .client-col{width:50%; }		 
	.footer{ padding:30px 0px 30px!important; text-align:center; }
	.footer p{ float:none!important;}
	.footer p span{ font-size:12px; line-height:18px; padding:0 20%; }
	.social-list {width:90px; float:none!important; text-align:center!important; margin:10px auto 0px!important; transition: all ease 0.5s; }
	.social-list li {float:none!important; display: inline-block; margin:0 0 0 5px; }
	.social-list li:nth-child(1) {margin:0px; }
	.social-list li img{height:15px;   }
	.marg-40{margin-top:30px;}
	
	.expertise-col{width:100%!important; float:none; }
	.expertise-col:nth-child(2) {margin-top:50px!important; }
	.full-stretch{width:100%!important; float:none!important;}
	
	.work-wrap{padding:0px 0 30px!important;}
	.title-wrap{padding:80px 0 50px!important; }
	.clientele{padding:76px 0 88px!important; }
	
	.col-role{float:none; padding:3px 0px 20px 0!important; margin-bottom:20px!important; border-right:0px solid #BEBEBE; border-bottom:1px solid #BEBEBE!important;  width:100%!important;}
	.col-role:nth-last-child(-n + 2){margin-bottom:0px!important; border-bottom:0px solid #BEBEBE!important; padding-bottom:0px!important; }
	
	/* Zoom animation */
	.zoom, .small{overflow: hidden; padding: 0; width: 100%; height: auto;  margin:0px;}
	.zoom img, .small img{  width: 100%;  height: auto;}
}

@media (max-width: 600px) {
     h1.Title-global{ color:#221429!important; font-size:32px; line-height:40px!important; font-weight:bold; letter-spacing:-1px;}
	 h1.Title-global br{ display:inline!important;}
	 .cover p{ font-size: 16px; line-height: 26px;}
	 .btn-portfolio{padding:5px 20px!important; font-size:14px; line-height:25px; }
	 .cover p.partop{ margin:20px 0 45px; }
	 .mastfoot {  font-size:12px!important; }
	 .masthead{padding:0px;}
	 .masthead-brand{float:left;}
	 .nav-masthead{float:right;}	 
	 .cover h1 span.page-break{display:inline!important;}
	 
	 .approach-col{width:100%!important; float:none!important; padding:0 0 30px!important; border-left:0px!important; 
	 border-bottom:2px dotted #BEBEBE!important; margin-top:30px!important;}
	.approach-col:nth-child(3) {padding-left:0px!important; border-bottom:2px dotted #BEBEBE!important;}
	.approach-col:nth-child(4){ border-bottom:0px dotted #BEBEBE!important;}
	.approach-row{margin:0px 0px 0px;}
	.approach-col:nth-child(3), .approach-col:nth-child(4){margin-top:30px!important;}
	.client-col img{width:auto!important; }
	
	.work-wrap{padding:0px 0 30px!important;}
	.title-wrap{padding:50px 0 50px!important; }
	.clientele{padding:76px 0 88px!important; }
	h1{ font-size:35px; line-height:45px!important; }
	h2{ font-size:35px!important; line-height:45px!important; }
	.card-body h5{font-size: 16px; margin-bottom: 4px!important;}
	.card-body p{font-size: 14px;}
	
}
@media (max-width: 480px) {
	.client-col{width:100%; }
	
}