@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;1,400&display=swap');

html,

div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav,
summary, hgroup {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: 'Poppins', sans-serif;


}



html {
  // your css to create a cover image 
  padding: env(safe-area-inset); // <- this is the missing piece. Add it.
}

html,body{
    overflow-x: hidden;
	margin: 0;
	padding: 0;
}

.roundborder {
	border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
-moz-border-radius: 0px 0px 0px 0px;
}

.boxborder {
	box-shadow: 0 0 0 2px #D8D8D8;
}

.tal {
	text-align: left;
}

.logohp {
	justify-content: center;  
	z-index: 2; 
	position: relative; 
	padding-top: 12%; 
	padding-bottom: 0%; 
	width: 20%;
}



.ls{
    letter-spacing: 0.5em;
}

.bg {
background: #0e1322;

}

.border_img {
	border: 2px white solid;
}


.splash_container {
	
	background:url("../images/overhead_top.png")no-repeat;
	height: 100vh;
	background-repeat: no-repeat;
	width: 100%;
	background-size: cover;
	background-position: center;
	margin: 0;
	
	
}

.container {
	
}



.center {text-align: center;}



h1 {font-size: 3.5rem;
	font-weight: 400;
	line-height: 3.5rem;
}

h2 {font-size: 2.5rem;
	font-weight: 300;
	line-height: 1em;
	padding-top: 2%;
}

h3 {font-size: 2.2rem;
	font-weight: 200;
	line-height: 1.2em;


}
h4 {font-size: 2rem;
	font-weight: 500;
	line-height: 1em;
	padding-bottom: 2%;
	
	
}

h5 {font-size: 1.7rem;
	padding-top: 4%;
line-height: 1.3em;
	font-weight:300;
}


h6 {
	font-size: 10vw; 
	font-weight: 600; 
	color: #0698fc;
}

p {
	font-size: 1.4em;
line-height: 1.6em;
	font-weight:300;
}

.colorBoxes {
	margin: auto;
	width: 100px;
  height: 100px;
  border-radius: 10%;

}

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


.oval1Dwell {
	background: #1f455e;
}

.oval2Dwell {
	background: #f88c00;
}

.oval3Dwell {
	background: #5b9cae;
}

.oval4Dwell {
	background: #e8e8e8;
}

.oval1BS {
	background: #032e4a;
}

.oval2BS {
	background: #c2af87;
}

.oval3BS {
	background: #2096d6;
}

.oval4BS {
	background: #bfc0c4;
}

.oval1CF {
	background: #701b2d;
}

.oval2CF {
	background: #437f98;
}

.oval3CF {
	background: #e1e1e1;
}

.oval4CF {
	background: #333333;
}

.oval1bloom {
	background: #d53c8f;
}

.oval2bloom {
	background: #0baba2;
}

.oval3bloom {
	background: #239c69;
}

.oval4bloom {
	background: #bbbbbc;
}

.oval1NN {
	background: #FF9900;
}

.oval2NN {
	background: #3399FF;
}

.oval3NN {
	background: #035FBA;
}

.oval4NN {
	background: #AAD208;
}

.iframe-wrapper{
	position: relative;
	padding-top: 56.25%;
}

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

.icontainer{
	max-width: 650px;
}


.fs60 {
	font-size: 60px;
	line-height: 60px;
}

.fs25 {
	font-size: 25px;
	line-height: 25px;
}

.fs18 {
	font-size: 18px;
	line-height: 25px;
}




.hero_header {
	
	text-align: center; 
	line-height: 1.2em;
	}

.hero_subheader {
	text-align: center;
	}

/* Bread Crumb*/




.upper {
	text-transform: uppercase;
}

.add_pad1 {
	padding-top: 1%;
}

.add_pad5 {
	padding-top: 5%;
}

.add_pad10 {
	padding-top: 10%;
}

.add_pad20 {
	padding-top: 20%;
}

.padbottom10 {
	padding-bottom: 8%;
}

.padbottom5 {
	padding-bottom: 3%;
}

.padbottom1 {
	padding-bottom: 1%;
}
.clear {
	
	clear: both;
}


.button_wrapper {
	flex: auto; 
	justify-content: center;
	align-content: center;
	padding-top: 5em; 
	padding-bottom: 5em;
	
}

.button_FJD {
	width: 165px;
	padding: 15px;
	text-decoration: none;
	font-size: 1.3em;
	background: #56BC06;
	color: #ffffff;
	border-radius: 6px;
	


}

.button_FJD a {
	color: #ffffff;
	
}

.button_FJD:hover {
    color: #ffffff;
	background: #4AA504;
	transition-duration: 0.3s;
	box-shadow: 0px 12px 24px -12px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 12px 24px -12px rgba(0, 0, 0, 0.5);
}


/* SPLASH BUTTON STARTS*/



.animated-button1 {
  padding: 20px 40px;
  margin: 12px;
  display: inline-block;
  -webkit-transform: translate(0%, 0%);
          transform: translate(0%, 0%);
  overflow: hidden;
  color: #f7d4d4;
  font-size: .9em;
	font-weight: 200;
  letter-spacing: 2.5px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.animated-button1::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: .2s opacity ease-in-out;
  transition: .2s opacity ease-in-out;
}



.animated-button1:hover::before {
	
}

.animated-button1 span {
  position: absolute;
}

.animated-button1 span:nth-child(1) {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, right top, left top, from(rgba(86, 188, 6, 0)), to(#56BC06));
  background: linear-gradient(to left, rgba(86, 188, 6, 0), #56BC06);
  -webkit-animation: 2s animateTop linear infinite;
          animation: 2s animateTop linear infinite;
}

@keyframes animateTop {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

.animated-button1 span:nth-child(2) {
  top: 0px;
  right: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(6, 152, 252, 0)), to(#0698fc));
  background: linear-gradient(to top, rgba(6, 152, 252, 0), #0698fc);
  -webkit-animation: 2s animateRight linear -1s infinite;
          animation: 2s animateRight linear -1s infinite;
}

@keyframes animateRight {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

.animated-button1 span:nth-child(3) {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 2px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(86, 188, 6, 0)), to(#56BC06));
  background: linear-gradient(to right, rgba(86, 188, 6, 0), #56BC06);
  -webkit-animation: 2s animateBottom linear infinite;
          animation: 2s animateBottom linear infinite;
}

@keyframes animateBottom {
  0% {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

.animated-button1 span:nth-child(4) {
  top: 0px;
  left: 0px;
  height: 100%;
  width: 2px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(6, 152, 252, 0)), to(#0698fc));
  background: linear-gradient(to bottom, rgba(6, 152, 252, 0), #0698fc);
  -webkit-animation: 2s animateLeft linear -1s infinite;
          animation: 2s animateLeft linear -1s infinite;
}

@keyframes animateLeft {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}


.columns_intro {
	display: inline-block;
	width: 100%;
	height: 70px;
	padding: 20%;
	flex-direction:column;
	justify-content: center;
	vertical-align: middle;
	background: #E31E21;
	column-gap: 20px;
	
	

}

.column_intro {
	display: inline-block
	margin: 20px;
	padding: 10px;
	background:#24B164;
	column-gap: 20px;

}

/* SPLASH BUTTON ENDS*/

.button_primary {
 text-decoration: none;
  display: inline-block;
  background-color: #56BC06;
  border-radius: 8px;
  font-size: 1.5rem;
  padding: 0.5em 2em;
  color: #ffffff;
	margin: 2%;


}

.button_primary a {
	color: #ffffff;
	
}

.button_primary:hover {
    color: #ffffff;
	background: #4AA504;
	transition-duration: 0.3s;
	box-shadow: 0px 12px 24px -12px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 12px 24px -12px rgba(0, 0, 0, 0.5);
}


.button_BS {
	width: 165px;
	padding: 15px;
	border: 2px solid #B2B2B2;
	text-decoration: none;
	font-size: 1.3em;


}

.button_BS a {
	color: #0e1322;
	
}

.button_BS:hover {
    color: #ffffff;
	background: #2995d0;
	border: 2px solid #2995d0;
	transition-duration: 0.3s;
}


.button_BF {
	width: 165px;
	padding: 15px;
	border: 2px solid #B2B2B2;
	text-decoration: none;
	font-size: 1.3em;


}

.button_BF a {
	color: #0e1322;
	
}

.button_BF:hover {
    color: #ffffff;
	background: #d53c8f;
	border: 2px solid #d53c8f;
	transition-duration: 0.3s;
}



.button_CF {
	width: 165px;
	padding: 15px;
	border: 2px solid #B2B2B2;
	text-decoration: none;
	font-size: 1.3em;


}

.button_CF a {
	color: #B2B2B2;
	
}

.button_CF:hover {
	background: #701b2d;
	border: 2px solid #701b2d;
	transition-duration: 0.3s;
}

.button_DR {
	width: 165px;
	padding: 15px;
	border: 2px solid #B2B2B2;
	text-decoration: none;
	font-size: 1.3em;


}

.button_DR a {
	color: #333333;
	
}

.button_DR:hover {
	background: #f88c00;
	border: 2px solid #f88c00;
	transition-duration: 0.3s;
}



.button_nosh {
	width: 165px;
	padding: 15px;
	border: 2px solid #B2B2B2;
	text-decoration: none;
	font-size: 1.3em;


}

.button_nosh a {
	color: #333333;
	
}

.button_nosh:hover {
	background: #afd907;
	border: 2px solid #afd907;
	transition-duration: 0.3s;
}





.button_project {
	width: 160px;
	padding: 10px;
	border: 2px solid #0e1322;
  	color: #c76428;
	text-decoration: none;
	font-size: 1.2em;


}

.button_project a {
	color: #c76428;
	font-weight: 400;
}

.button_project:hover {
	border: 2px solid #c76428;
    transition-duration: 0.3s;
	
}


.headerCopy {
	font-size: 1.4em;
	line-height: 1.9em;
	justify-content: center;
	text-align: justify;
	color:#868686;
	font-weight: 300;
}




.name_wrapper {
	float: right;  
	width: 60%;; 
	display: flex;	
}

.name_svg {
	width: 50%; 
	margin: 0 auto;
}


.intro_wrapper {
	display:grid;
	width: 100%;
	display: flex; 

	
}

.intro_bkgrd {
	
	background:url("../images/overhead_top.png")no-repeat;
	background-position: 70% 100% ; 
	background-size: cover;
	width: 100%;
	height: auto;
	z-index: -34;
}



.intro_copy {
	width: 40%;
	padding: 3%;
	margin:  0 auto;
	float: right;
}








.project_title {
	text-align: center; 
	padding-top: 3px;
	line-height: 35px;
}


.logoWrapper {
	width: 100%; 
	height: auto; 
	margin: 0 auto; 
	float: left;
	list-style: none;
}

.logoWrapperstack{ 
	list-style: none;
	padding-bottom: 8%;
	float: none;
	padding-top: 3%;
}

.light_gray {
	color: #;
}

.fjd_blue {
	color: #2d353f;
}

.light_blue {
	color: #437f98;
}

.blue {
	color: #0e1322;	
}

.cognac {
	color: #c76428;
}

.light {
	color: #5a6689;
}

.white {
	color: #ffffff;
	
}

.gray {
	color: #383838;
}

.teal {
	color: #0baba2
}

.fjd-color {
	color: #0698fc;
}

.bluestone_light_blue {
	color: #2995d0;
}

.core_burgendy {
	color: #701b2d;
}

.dwell_blue {
	color: #2D5C7B;
}

.nosh_blue {
	color: #3399FF;
}


.project_header {
	font-size: 2em; 
	font-weight: 500; 
	text-align: center; 
	padding-top: 2vh; 
	padding-bottom: 2vh;
}

.reach_header {
	font-size: 2em; 
	font-weight: 200; 
	
	padding-top: 1vh; 
	padding-bottom: 1vh;
}

.reach_header span {
	font-weight: 600; 

}



.reach_wrapper {

	background:#0e1322;
	height: auto;
	padding: 5%;
	
}

.resume_button_wrapper {
	margin: 0 auto; 
	width: 100%; 
	display: block; 
	
	
}

.list-inline {
    list-style: none;
    
}

.list-inline > li {
    display: inline;
	text-decoration: none;
	text-align: center;
	 margin:10px 6px 10px 6px;
}

.list-inline > li a {
    display: inline;
	text-decoration: none;
}


@media only screen and (max-width: 320px)  {
.mobile {
	margin-top: 8%;
	}
	

	
.logohp {
	justify-content: center;  
	z-index: 2; 
	position: relative; 
	padding-top: 15%; 
	padding-bottom: 4%; 
	width: 40%;
}
	
	h1 {font-size: 3.5rem;
	font-weight: 400;
	line-height: 3vh;
}
	
	
	
	h2 {font-size: 2.2em;
	font-weight: 200;
	line-height: 1em;
    }
	
	h3 {font-size: 2.2em;
	font-weight: 200;
	line-height: 1.2em;


}
h4 {font-size: 3.2em;
	font-weight: 500;
	line-height: 1em;
	padding-top: 4%;	
}


.logohp {
	justify-content: center;  
	z-index: 2; 
	position: relative; 
	padding-top: 15%; 
	padding-bottom: 4%; 
	width: 36%;
	
}
	

    

@media only screen and (max-width: 520px) {
.mobile {
	padding-top: 10%;
}
	
	h1 {font-size: 3.5rem;
	font-weight: 400;
	line-height: 1em;
}
	
	h2 {font-size: 2.2em;
	font-weight: 200;
	line-height: 1em;
    }
	
	h3 {font-size: 2.2em;
	font-weight: 200;
	line-height: 1.2em;


}
h4 {font-size: 2.1em;
	font-weight: 500;
	line-height: 1em;
	padding-top: 4%;
	
}

h5 {font-size: 1.8em;
	font-weight: 300;
	line-height: 1.2em;
	}
	
.logohp {
	justify-content: center;  
	z-index: 2; 
	position: relative; 
	padding-top: 15%; 
	padding-bottom: 4%; 
	width: 36%;
	
}
	
	.intro_bkgrd {
	
	background:url("../images/overhead_top.png")no-repeat;
	background-position: 70% 100% ; 
	background-size: 100%;
	width: 100%;
	height: auto;
	z-index: -34;
}