/* {
  border: 1px solid #f00 !important;
}
*/
@media (min-width: 1200px) {
  .container {
	max-width: 1280px;
  }
}

body {
	font-family: 'poppins', 'inter', Helvetica, sans-serif;

hr {
	max-width:100%;
  }
a:hover, a:focus {
	color: #999999;
	text-decoration: none;
	border:none;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

p {
	font-size:1rem;
	font-weight:400;
	line-height:1.5;
	font-family:'inter', helvetica, sans-serif;
}

p.italic {
	font-family: 'inter', helvetica, sans-serif;
	font-size:.75rem;
	font-weight:500;
	line-height:2;
	font-style:italic;
	color: #525252;

}
p.bold {
	font-weight: 700;
}

h1, h2, h3, h4, h5, h6 {
	text-transform: none !important;
	font-family: 'poppins', Helvetica, sans-serif;
	padding:1% 0;
	font-weight: 700
}
.project-title {
  font-size: clamp(1.5rem, 4vw, 2.3rem)
}
ul {
	margin:0;
	padding:0;
	font-family: 'inter', helvetica, sans-serif;
}

a {
	border:none;
}

#mainNav {
	background: transparent;
	padding:0;
	}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #000;
background-color:#000;
border-radius: 0;
font-weight: bold;
}

#mainNav.navbar-shrink {
	background-color: #fff;

}

#mainNav .navbar-collapse
.navbar-nav > .nav-item >
.nav-link.active, #mainNav
.navbar-collapse .navbar-nav >
.nav-item > .nav-link.active:focus,
#mainNav .navbar-collapse .navbar-nav >
.nav-item > .nav-link.active:hover {
color:#fff;
border-radius: 0;
border-radius: 5px;
font-weight: 600
}
.my-auto {
  margin-top: 20% !important;
  }

  header.masthead {
  height: 40vh;

  }

header.masthead .masthead-title {
	font-family: 'poppins', Helvetica, sans-serif;
	font-size:clamp(2rem, 5vw, 6rem);
	text-transform: none;
	font-weight: 700;

}


.me-desc {
	font-family: 'poppins', Helvetica, sans-serif;
	margin-top:2%;
	font-size: clamp(1rem, 1.75vw, 3rem);
	font-weight: 400;
}

 .guitar_dude {

}
.guitar_dude img {
	float:right;
	margin-right: 10px;
	margin-bottom: 10px;
}



/* */
.newport {
	margin:75px 0;
}

.newport-wrapper{
	border:1px solid #eeeeee;
	border-radius:16px;
	margin:0;
	padding:30px 40px;
	-webkit-box-shadow: 0px 2px 2px 0px rgba(153,153,153,1);
	-moz-box-shadow: 0px 2px 2px 0px rgba(153,153,153,1);
	box-shadow: 0px 1px 1px 0px rgba(216, 216, 216, 1);
}
 .newport-content {
	border-radius:6px;
	background:#F6F6F6;
	padding:30px 40px;
	min-height: 330px;
}
.newport-wrapper .btn-sm {
	border-radius: 5px;
	border-color: #c8c8c8;
	background: #383B54;
	font-size:.7rem;
	color:#fff;
}


 .fm_claims {
	background: radial-gradient(228.28% 112.09% at 15.45% -6.63%, #4C54A2 0%, #1C1F3C 100%);
	padding: 5% 10%;
	border-radius: 24px;
}

.fm_underwriting {
	background: #FF5100;
	padding: 5% 0;
	border-radius: 24px;
}

.krow {
	background: #E7EAF1;
	padding:10%;
	color:rgba(93, 44, 111, 1);
	border-radius: 24px;
}

.xc {
	padding:15% 0;
	border-radius: 24px;
}

.sfx {
 background-image:url('../img/sfx_proj_bg.jpg');
	 background-repeat: no-repeat;
	 background-size: cover;
	 padding:15% 0;
	 border-radius: 24px;
}

.smash {
	background: #000;
	color: #fff;
	width: 300px;
	height: 60px;
	border-radius: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}
.x-blast {
  display: inline-block;
  color: #E1328F;
  opacity: 0;
  transform: translateY(20px);
  animation: blastIn 1s ease-out forwards;
  animation-delay: 0.5s;
}

/*----___-----_____-----___----/* SFX /*----___-----_____-----___----*/

		#portfoliolist .portfolio {
			width: 100%;
			margin: 1%;
			display: none;
			overflow: hidden;
			text-align: left;
			}

			.portfolio {
			width:100%;
			}
			.caption-text {
			background-color:#000;

			}

			.portfolio-wrapper {
			 height:480px;
			margin-bottom: 5%;
			}

		/*.project-desc {
			position: relative;
		left: 186px;
		top: 146px;
		right: 262px;
		bottom: 19px;
		z-index: 1;
		width: 400px;
		margin-top: 0px;
		margin-right: 0px;
		margin-left: 0px;
		padding:15px;
		float: right;
		background:#fff;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
		}


		.project-desc-left {
			position: relative;
		left: -50px;
		top: 146px;
		right:0px;
		bottom: 19px;
		z-index: 1;
		width: 400px;
		margin-top: 0px;
		margin-right: 0px;
		margin-left: 0px;
		padding:15px;
		float: left;
		background:#fff;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
		}




			.project-desc ul {
				font-size:1rem;
				list-style: none;
			}
		*/

		.sfx_button {
			position:relative;
			top:78%;
			left:13%;
			background:#000;
			color:#fff;
			border:none;
			text-transform: none;
			border-radius:50px;
			font-weight: 200;
			font-size:.75rem;
		}


		.ehs-mob {
			padding:5% 10%;
		}

		.st-dashboard {
			float:right;
			padding:120px 40px;
		}



		header.project {
		padding-top:10%;
		}


		strong.bold {
			font-weight: bold;
		}


		ul {
			list-style: none;

		}

		ul li {
			padding:10px 0;
		}


		.sfx_graphic_bg {
		 margin-top:10%;
		 background-image:url('../img/sfx_proj_bg.jpg');
		 background-repeat: no-repeat;
		 background-position: center center;
		 background-size: contain;
		}


		section {
			margin-top:10%;
		}

		section.home_portfolio {
			margin-top:12%;
		}
		.page_title {
			padding:0 0 3% 0;
		}

		/*--------------------------------------Persona-----------------------------------------*/

		section.persona {
			margin-top:10%;
			font-family:'poppins', Helvetica, sans-serif;
		}


		.persona h3 {
			text-transform: none;
			font-family: 'poppins', Helvetica, sans-serif;
			font-size: 2vw;
		}


		.archetype {
			margin-top:10%;
			padding-bottom:5%;
		}

		.archetype h5 {
			text-transform: none;
		}

			.archetype_user h3 {
			 margin-top:10%;
			}

		.archetype_user {
			max-height: 455px;

		}

		.sourcer {
			background:#F5F5F5;
			width:100%;
			border:1px solid #f5f5f5;
			border-radius:15px;
		  box-shadow: 3px -3px 2px  rgba(0,0,0,0.2);
		  -moz-box-shadow: 3px -3px 2px rgba(0,0,0,0.2);
		  -webkit-box-shadow: 3px -3px 2px  rgba(0,0,0,0.2);
		  -o-box-shadow: 3px -3px 2px  rgba(0,0,0,0.2);
		}

			.archetype_user p {
				font-size:.75rem;
				padding: 5%;
				margin-top:5%;
				overflow: hidden ;
			}


		.recruiter {
			background:#E2F7FF;
			width:100%;
			border:1px solid #f5f5f5;
			border-radius:15px;
		  box-shadow: 3px -3px 2px  rgba(0,0,0,0.2);
		  -moz-box-shadow: 3px -3px 2px rgba(0,0,0,0.2);
		  -webkit-box-shadow: 3px -3px 2px  rgba(0,0,0,0.2);
		  -o-box-shadow: 3px -3px 2px  rgba(0,0,0,0.2);
		}

		.talent_marketer {
			background:#FFF9E2;
			width:100%;
			border:1px solid #f5f5f5;
			border-radius:15px;
		  box-shadow: 3px -3px 2px  rgba(0,0,0,0.2);
		  -moz-box-shadow: 3px -3px 2px rgba(0,0,0,0.2);
		  -webkit-box-shadow: 3px -3px 2px  rgba(0,0,0,0.2);
		  -o-box-shadow: 3px -3px 2px  rgba(0,0,0,0.2);
		}

		/*----------------------------------Features------------------------------*/
		.features {
			background-image:url('../img/search-icon-lrg.png');
			background-size: 50%;
			background-position:90% 15%;
			background-repeat: no-repeat;
			background-color: #044AFF;
			clip-path: polygon(0 0, 100% 16%, 100% 100%, 0% 100%);
			color:#fff;
			padding:10% 0 ;
		}

		.features p {
			width:100%;

		}

		.features img {
			padding-top:5%;
		}


		/*-----------------------------USER - RESEARCH--------------------------------*/
		 .primary {
			padding:5% 0;
		}

		.methods img {
			padding-top:5%
			}
		.grey {
			background-color:#F3F3F3;
			padding:10% 0;
			clip-path: polygon(0 20%, 100% 8%, 100% 100%, 0% 100%);
		}

		.legacy-text  {
			margin:0 auto;
			padding-left: 7%;
		}
		.sf_search {
			padding-right:0 !important;
		}
		.circle {
			background: #fff;
			color:black;
			width: 12vmax;
		  height: 12vmax;
		  border-radius: 50%;
		  padding-top: 8%;
		}
		.circle h2 {
			margin:0;
			padding:0;
			font-size:calc(5.5rem + 1vw) !important;
		}
		.circle h6 {
			margin:-10px 0 0 0;
			padding:0;
			font-size: calc(.55rem + .25vw);
		}

		/*-----------------------------RESEARCH Findings--------------------------------*/

		.number-users h2{
			font-size:6rem;
		}
		.research {
			font-family: 'poppins', helvetica, san-serif;
			background:#000;
			color:#fff;
			padding:0;
			clip-path: polygon(0 12%, 100% 0, 100% 100%, 0% 100%);
		}
		.research_data {
			background:#000;
			margin-top: 0;
			padding-top:0;
			color:#fff;
		}

		.research_data .row {
			padding:10% 0;

		}
		.research_data ul li {
			font-size:.75rem;
		}

		.research ul {
			list-style-position: inside;
			padding-left:0;
		}

		.research ul li {
			font-size:.75rem;

		}

		.research p {
			font-size:.85rem;
		}

		.results {
			padding:10% 0;
		}
		.magenta {
			color:#f71ca3;
		}
		.section-title {
			margin:20% 0 0 0;
		}


		/*-----------------------------wireframes/Prototypes----------------------*/
		.wireframes {
			/*background-image:url('../img/Path_32.svg');
			background-position: right top;
			background-repeat: no-repeat;*/
			background-color:#044AFF;
			color:#fff;
			padding:10% 0 3% 0;
			clip-path: polygon(0 5%, 100% 17%, 100% 100%, 0% 100%);
		}

		/*.shape {
			padding:10% 0;
			z-index: -1000;
			clip-path: polygon(17% 0, 100% 0, 100% 100%, 38% 100%);
			background-color:#4C3F9A;
		}*/
		.wireframes  .col-5 {
			margin-top:5%;
		}

		.prototype  .btn {
			background:#000;
			padding:5px 10px;
			border:none;
		}
		.proto_content {

		}

		.prototyping {
			background-color:#8DC685;

		}
		.wireframes .btn {
			background:#000;
			padding:5px 10px;
			border:none;
		}

		.wireframes a {
		margin-right:50px;
		}

		.circle-button {
			display: inline-block;
		  border-radius: 60px;
		  box-shadow: 0px 6px 20px #0031a9;
		  padding: 0.6em 0.7em;
		  background: #fff;
		}
		.flow {
			padding-bottom:10%;
		}


		.outcomes {
		clip-path: polygon(0 5%, 100% 17%, 100% 100%, 0% 100%);
		}


/*----------___________-----------______----------SHEILD Project----------___________-----------______----------*/
.shield {
background:url('../img/ehs/hero-spot.jpg');
	background-repeat: no-repeat;

  background-position: 25% 40%;
}

.hero-mobile {

}
.copy {
	font-weight: 300;
	 font-size:.85rem;
	line-height: 2em;
}


.vertical_center {
padding-top: 25%;
}

.row_padded {
	padding:10% 0 3% 0;
}
.row_small {
	padding:5% 0 0 0;
}
.research_insights {
	padding :5% 0 0 0;
}

.experience {
	margin-top:0;
}

/*----------___________-----------______----------X-CLOUD----------___________-----------______----------*/

.xcloud {
	background:#007cea;
	margin-top:0;
	color:#fff;
	padding-bottom:10%;
}
.xcloud .proj-descripton {
	color:#fff;

}


/*----------___________-----------______----------KROW----------___________-----------______----------*/

.krow {
	background:#F2F7FA;
	margin-top:0;
	color:#333;
	padding-bottom:1%;
	padding-top: 3%;
}
 .krow_role {
	 margin-top:15%;
	 font-size:
 }

.how_this_works {
	padding-bottom:5%;
}
.mobile_apply ul li{
	font-size:.75rem;
	font-weight: 600;
}

.chilis_mobile_screens {
	padding-top:15%;
}


.design_system {
	padding-top:5%;
}


/*----------___________-----------______----------FM----------___________-----------______----------*/

.fm-details p {
	font-size:.85rem !important;
	margin-bottom: 1.5rem;
}
.fm-details img {
	margin-right: 10px;
}
.fm {
	background:#11172c;
	margin-top:4%;
}
.role {
	margin-left:20px;
	list-style-position:outside;
	padding:5px 20px;
}

.role li i {
  position: absolute;
  left:37px;
  margin-top: 4px;
}
.role li {
	font-size:.75rem;
	font-weight: 500;
	float:left;
	clear:both;
}


.fm_research {
	margin-left:20px;
	list-style-position:outside;
}

.fm_research li i {
  position: absolute;
  left:30px;
  margin-top: 4px;
}
.fm_research li {
	font-size:.75rem;
	font-weight: 200;
}

.pain_points li {
	font-style:italic;
	font-size:.95rem;
	font-weight: 200;
	color: #575757;
}


.data-summary {
	border-radius:8px;
	padding:20px;

	box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}


.inset li {
	padding:5px 0;
	margin-left:15px;
	list-style-position:outside;
	font-size:.65rem;

}
.role .inset li i {
  position: absolute;
  left:60px;
  margin-top:4px;
  font-size:.5rem;

}
.fmwires img {
	padding:20px;
}

 div.fnol  img {
	 vertical-align: top;
	 margin:30px;
 }


 .value {
	 margin-left:20px;
	 list-style-position:outside;
	 padding:5px 20px;
 }

 .value li i {
   position: absolute;
   left:37px;
   margin-top: 4px;
 }
 .value li {
	 font-size:.95rem;
	 font-weight:700;
	 float:left;
	 clear:both;
 }

.value p {
	font-size:.85rem;
}
/*----------___________-----------______----------About----------___________-----------______----------*/

.profile {
	margin-top:0;
}
.profile_img {
	padding-top: 25%;
}

.bio {
	color:#252525;
}

h2.ideaology {
	font-weight: 200;
}


.skills {
	margin-top: 15%;
	list-style-position:outside;
}

.skills_2 {
	list-style-position:outside;
}


.skills li {
	margin:25% 0;

	padding :0 0 4% 6% ;
	border-left:1px solid #d0d0d0;

}

li span.service {
	padding-left:15px;
	position: absolute;
	  left:40px;



}

/*----------___________  other Stuff__________----------*/

.pinyon-script-regular {
  font-family: "Pinyon Script", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 4rem;
}
.pinyon-script-regular span {
	font-size:6rem;
}

 .square {
  width: 100%;
  padding-top: 100%; /* This makes it a perfect square */
  position: relative;
}
.square-content {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}
.square--yellow { background-color:#FCD34D; }

.square--stan_fit {background-image: url('../img/other/stan_fit_bg.png');
  /* Bonus points: cover whole area and center it */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


.square--aplus
{background-image: url('../img/other/chris_bg.png');
  /* Bonus points: cover whole area and center it */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/*----------___________ Footer__________----------*/


footer.footer .footer-contact-details {
	margin:10px 0;
}

footer.footer p {
	font-size:.75rem;
}

/*________----------- _____________-------Modals------------_____________--------______-------______----*/
.portfolio-modal .modal-dialog .close-modal .lr .rl {
	background-color: #000;
}
.portfolio-modal .modal-dialog .close-modal .lr {
	background-color:#000;
}
.portfolio-modal {
	background:#fff;
}

.wireframe-flows {
	color:#000;
}

	.flow img {
	box-shadow: 0 0 35px 0 rgba(0,0,0,.23);
	}
.modal-header {
	border-bottom:none;
}

.modal-content {
	background:rgba(0,0,0,0.7);
}



.modal-dialog {
	height: 800px;
  position: relative;
  width: auto;
  margin: 12.5rem;
  pointer-events: none;
}


 .modal-xl {
	width: 100%;
	height:100%;
	}


/*--------------------------table------------------------*/
.custom-table {
	display: table;
	width: 100%;

	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 2rem;
	font-family: inherit;
  }

  .custom-row {
	display: table-row;
  }

  .custom-cell {
	display: table-cell;
	padding: 1rem;
	border: 1px solid #dee2e6;
	vertical-align: top;
	font-size: 0.85rem;
	line-height: 2rem;
	color: #212529;
  }

  .custom-row.header-row .custom-cell {
	font-weight: bold;
	font-size: 1rem;
	background-color: #f1f1f1;
  }

  .custom-row:nth-child(even):not(.header-row) {
	background-color: #f9f9f9;
  }

  /* Hover effect (optional) */
  .custom-row:not(.header-row):hover .custom-cell {
	background-color: #fdfdfd;
  }

  /* Responsive for mobile */
  @media (max-width: 768px) {
	.custom-table {
	  display: block;
	}

	.custom-row {
	  display: block;
	  margin-bottom: 1rem;
	}

	.custom-cell {
	  display: block;
	  border: none;
	  border-bottom: 1px solid #dee2e6;
	}

	.custom-cell::before {
	  content: attr(data-label);
	  font-weight: bold;
	  font-size: 0.85rem;
	  display: block;
	  margin-bottom: 0.25rem;
	  color: #495057;
	}

	.header-row {
	  display: none;
	}
  }