/* Common Styles
==========================*/
#projectherodiv{
	position:relative;
	display:inline-block;
	margin: 120px 0 0 0;
}
#projectbg{
	position:relative;
	float:right;
	padding:0;
	width:44%;
}
#herocopyblock2{
	position:absolute;
	top:50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	padding:0;
	margin:0 auto;
	width:100%;
}
.leftsideinfo1{
	float:left;
	padding:0 0 0 10%;
	margin:120px 0 120px 0;
	text-align:right;
	width:22%;
}
.rightsideinfo1{
	float:right;
	padding:0 10% 0 0;
	width:52%;
	margin:120px 0 120px 0;
	text-align:left;
}
.bspadding{
	padding:0 10% 0 10%;
	margin:0;
}
.bspadding2{
	padding:10% 10% 0 10%;
	margin:0;
	background-image: linear-gradient(rgba(6,22,30,1), rgba(6,22,30,1));
}
.blocksection{
	width:100%;
	margin: 120px 0 0 0;
}
.blocksection2{
	width:100%;
	margin:80px 0 0 0;
}
.blocksection3{
	width:100%;
	margin:0 0 0 0;
}
.projecthr{
	opacity:0.2;
	margin:0;
	padding:0;
}
.projecthr2{
	opacity:0.2;
	margin:120px 0 0 0;
	padding:0;
}
.projecthr3{
	opacity:0.2;
	margin:80px 0 0 0;
	padding:0;
}
.extramargin{
	margin:120px 0 120px 0;
}
.desrightside{
	display:block;
	float:right;
	width:44%;
	margin:auto 0;
}
.contactbutton{
	padding:16px 16px 16px 16px;
	border-radius:50px;
	border:1px solid #000;
	color:#000;
	font-size: 18px;
	font-family:Calibre;
	text-align:center;
	font-weight:normal;
	font-style:normal;
}
.indentul{
	padding:0 0 0 20px;
	margin:0;
}
.inlinelinks{
	text-decoration: underline;
}
.button2{
	padding:24px 24px 24px 24px;
	border-radius:50px;
	border:1px solid #2f2f2f;
	color:#2f2f2f;
	font-size: 24px;
	font-family:Calibre;
	text-align:center;
	font-weight:normal;
	font-style:normal;
	margin: 32px 0 0 0;
	display:block;
	float:left;
}
.button3{
	padding:24px 24px 24px 24px;
	border-radius:50px;
	border:1px solid #2f2f2f;
	color:#2f2f2f;
	font-size: 24px;
	font-family:Calibre;
	text-align:center;
	font-weight:normal;
	font-style:normal;
	margin: 8% auto 0 auto;
	display:inline-block;
	float:none;
}
.buttoncenter3{
	display:flex;
	align-content: center;
	justify-content: center;
	
}
/* Images
==========================*/
.twoupcontainer{
	width:100%;
	margin:120px 0 0 0;
}
.twoupcontainer2{
	width:100%;
	margin:2% 0 2% 0;
}
.twoupleftimage{
	float:left;
	background-image: linear-gradient(rgba(0,168,226,1), rgba(25,177,229,1));
	width:50%;
	padding:16% 0 15.8% 0;
	display:flex;
	align-content: center;
	justify-content:space-between;
}
.twouprightimage{
	float:right;
	background-image: linear-gradient(rgba(0,32,66,1), rgba(25,54,85,1));
	width:50%;
	padding:12% 0 12% 0;
	display:flex;
	align-content: center;
	justify-content:space-between;
}
.twoupleftimagealt{
	float:left;
	width:50%;
}
.twouprightimagealt{
	float:right;
	width:50%;
}
.twoupimage{
	width:34%;
	margin:auto;
}
.imagesplitleft{
	width:50%;
	float:left;
}
.imagesplitright{
	width:50%;
	float:right;
}
.imagelightbg{
	background-image: linear-gradient(rgba(225,225,225,1), rgba(230,230,230,1));
	padding:20% 0 20% 0;
	display:flex;
	align-content: center;
	justify-content:space-between;
}
.imagelightbgalt{
	background-image: linear-gradient(rgba(230,230,230,1), rgba(230,230,230,1));
	padding:20% 0 20% 0;
	display:flex;
	align-content: center;
	justify-content:space-between;
}
.imagelightbg2{
	background-image: linear-gradient(rgba(230,230,230,1), rgba(230,230,230,1));
	padding:3% 0 0 0;
	display:flex;
	float:left;
	width:50%;
	align-content: center;
	justify-content: center;
}
.imagelightbg21{
	background-image: linear-gradient(rgba(230,230,230,1), rgba(230,230,230,1));
	padding:3% 0 3% 0;
	display:flex;
	float:left;
	width:50%;
	align-content: center;
	justify-content: center;
}
.imagelightbg22{
	background-image: linear-gradient(rgba(230,230,230,1), rgba(230,230,230,1));
	padding:3% 0 3% 0;
	display:flex;
	float:left;
	width:50%;
	align-content: center;
	justify-content: center;
}
.imagelightbg3{
	background-image: linear-gradient(rgba(230,230,230,1), rgba(230,230,230,1));
	padding:3% 0 0 0;
	display:flex;
	float:left;
	width:100%;
	align-content: center;
	justify-content: center;
}
.imagewhitebg{
	background:#f0f0f0;
	padding:20% 0 20% 0;
	display:flex;
	align-content: center;
	justify-content:space-between;
}
.imagedarkbg{
	background-image: linear-gradient(rgba(6,22,30,1), rgba(14,29,38,1));
	padding:20% 0 20% 0;
	display:flex;
	align-content: center;
	justify-content:space-between;
}
.imageyellowbg{
	background-image: linear-gradient(rgba(255,200,0,1), rgba(255,215,0,1));
	padding:20% 0 20% 0;
	display:flex;
	align-content: center;
	justify-content:space-between;
}
.showcasecontainer{
	width:40%;
	margin:auto;
}
.showcasecontainer2{
	width:100%;
	margin:auto;
}
.showcasecontainerzoom{
	width:50%;
	margin:auto;
}
.imageshadow{
	box-shadow: 0px 0px 20px rgba(20, 20, 20, 0.25);
}
.yts{
	width:50%;
	padding:0;
	margin:0;
	float:left;
}
.yts2{
	width:50%;
	padding:0;
	margin:0;
	float:right;
}
.yts3{
	width:100%;
	padding:0;
	margin:0;
	float:left;
}
.threeupcontainer{
	display:flex;
	align-content: center;
	justify-content:space-between;
	padding:10% 0 10% 0;
}
.threeupleftimage{
	float:left;
	width:25%;
	margin:0 auto auto auto;
}
.threeupcenterimage{
	float:left;
	width:25%;
	margin:0 auto auto auto;
}
.threeuprightimage{
	float:left;
	width:25%;
	margin:0 auto auto auto;
}


/* market + unmet needs
==========================*/
.verticalcontainer, .verticalcontainer2{
	width:100%;
	display:flex;
	align-content: center;
	justify-content: space-between;
}
.marketleftside{
	display:block;
	float:left;
	width:50%;
	margin:auto 0;
}
.marketrightside{
	display:block;
	float:right;
	width:44%;
	margin:auto 0;
}
.unmetleftside{
	display:block;
	float:left;
	width:50%;
	margin:auto 0;
}
.unmetrightside{
	display:block;
	float:right;
	width:44%;
	margin:auto 0;
}

/* persona 
==========================*/
.verticalcontainer{
	width:100%;
	display:flex;
	align-content: center;
	justify-content: space-between;
}
.personaleftside{
	display:block;
	float:left;
	width:20%;
	margin:auto 0;
}
.personarightside{
	display:block;
	float:right;
	width:74%;
	margin:auto 0;
}
.lefthrcontainer{
	display:block;
	float:left;
	width:30%;
	margin:auto 0;
}
.righthrcontainer{
	display:block;
	float:right;
	width:30%;
	margin:auto 0;
}
.stats2{
	width:25%;
}
/* solution
==========================*/
.backgroundcontainer{
	background-image: linear-gradient(rgba(14,29,38,1), rgba(6,22,30,1));
	display:flex;
	align-content: center;
	justify-content:space-between;
	padding:15% 0 5% 0;
}
.mainscreencontainer{
	width:30%;
	margin:auto;
}
.mainscreencontainer2{
	float:none;
	width:100%;
	margin:2% 0 2% 0;
	display:inline-block;
}
.mainscreencontainer3{
	float:none;	
	width:100%;
	margin:4% 0 0 0;
	display:inline-block;
}
.mainscreencontainer4{
	float:none;
	width:100%;
	margin:2% 0 0 0;
	display:inline-block;
}
.screenrightside{
	display:block;
	float:right;
	width:38%;
	margin:auto 0;
}
.desleftside{
	display:block;
	float:left;
	width:50%;
	margin:auto 0;
}

/* Header + Nav
==========================*/
a#logo2{
	display:inline-block;
	width:85px;
	height:62px;
	margin: 0 0 0 48px;
}
#projecta{
	color:#000;
	font-size:24px;
	line-height:18px;
	font-family:Calibre;
	text-decoration:none;
		
}
#projecta:hover{
	text-decoration:underline;
}


/* Text Styles
==========================*/
.ul2{
	margin:0;
}
.ul3{
	padding:0;
	margin:4% 0 0 0;
}
.ul3 li{
	padding:0;
	margin:0;
	list-style: none;
}
.ul4{
	padding:0;
	margin:0;
}
.ul4 li{
	padding:0;
	margin:0;
	list-style: none;
}
.projecttitle{
	color:#000;
	font-size:64px;
	line-height:64px;
	padding:0;
	margin:0;
	font-family:Calibre-semibold;
	text-align:left;
	font-weight:normal;
	font-style:normal;
}
.projectdes{
	color:#2f2f2f;
	font-family:Calibre;
	font-size:32px;
	width:60%;
	padding:0;
	margin:24px 0 0 0;
}
.myrole2{
	color:#aaa;
	font-family:Calibre-medium;
	font-size:16px;
	text-transform:uppercase;
	letter-spacing: 0.05em;
	padding:0;
	margin:4% 0 0 0;
	float:left;
	width:53%;
}
.rolelist{
	list-style:none;
	float:left;
	padding:2% 0 0 0;
	margin:0;
	color:#2f2f2f;
	font-family: Calibre;
	font-size:18px;
	text-transform: none;
	letter-spacing: 0.015em;
}
.bullet2{
	color:#7f7f7f;
	font-size:12px;
}
.piccredit{
	position:relative;
	display:inline-block;
	width:100%;
	font-family: Calibre;
	color:#bbbbbb;
	font-size:14px;
	letter-spacing: 0.015em;
}
.leftjust{
	float:left;
}
.rightjust{
	float:right;
}
.centerjust{
	float:none;
	text-align:center;
	margin:0 auto;
	width:inherit;
	display:inline-block;
}
.minititle{
	color:#000000;
	font-size:42px;
	line-height:42px;
	padding:0;
	margin:0;
	font-family:Calibre-medium;
	font-weight:normal;
	font-style:normal;
}
.minititle2{
	color:#fff;
	font-size:42px;
	line-height:42px;
	padding:0;
	margin:0;
	font-family:Calibre-medium;
	font-weight:normal;
	font-style:normal;
}
.minititlesmall{
	color:#000000;
	font-size:32px;
	line-height:32px;
	padding:0 0 56px 0;
	margin:0;
	font-family:Calibre-medium;
	font-weight:normal;
	font-style:normal;
}
.minititlesmall2{
	color:#fff;
	font-size:32px;
	line-height:32px;
	padding:0 0 56px 0;
	margin:0;
	font-family:Calibre-medium;
	font-weight:normal;
	font-style:normal;
}
.subheader2{
	color:#2f2f2f;
	font-size:32px;
	line-height:32px;
	padding:0 0 32px 0;
	margin:0;
	font-family:Calibre;
	font-weight:normal;
	font-style:normal;
}
.subheader3{
	color:#2f2f2f;
	font-size:24px;
	line-height:32px;
	padding:56px 0 32px 0;
	margin:0;
	font-family:Calibre-medium;
	font-weight:normal;
	font-style:normal;
}
.subheader4{
	color:#007AFF;
	font-size:24px;
	line-height:32px;
	padding:56px 0 32px 0;
	margin:0;
	font-family:Calibre;
	font-weight:normal;
	font-style:normal;
}
.copy2{
	color:#7f7f7f;
	font-size:24px;
	line-height:32px;
	font-family:Calibre-light;
	letter-spacing: 0.015em;
	padding:0;
	margin:0;
	font-weight:normal;
	font-style:normal;
}
.copy3{
	color:#2f2f2f;
	font-size:24px;
	line-height:32px;
	font-family:Calibre-light;
	letter-spacing: 0.015em;
	padding:0;
	margin:0;
	font-weight:normal;
	font-style:normal;
}
.copy4{
	color:#2f2f2f;
	font-size:24px;
	line-height:32px;
	font-family:Calibre-light;
	letter-spacing: 0.015em;
	padding:4px 0 4px 0;
	margin:0;
	font-weight:normal;
	font-style:normal;
}
.copy5{
	color:#fff;
	font-size:24px;
	line-height:32px;
	font-family:Calibre-light;
	letter-spacing: 0.015em;
	padding:0;
	margin:0;
	font-weight:normal;
	font-style:normal;
}
.threeupdes{
	text-align:left;
	color:#fff;
	font-family: Calibre-light;
	font-size:18px;
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
a#logo2{
	width:69px;
	height:50px;
	margin: 0 0 0 48px;
}

.projecttitle{
	margin: 16% 0 0 0;
	font-size:56px;
	line-height:56px;
	text-align:left;
}
.projectdes{
	font-size:28px;
	width:100%;
	padding:0;
	margin:24px 0 0 0;
	text-align:left;
}
#projectherodiv{
	position:relative;
	display:inline-block;
	margin: 64px 0 0 0;
}
#projectbg{
	padding:0;
	width:100%;
	opacity:0;
}
#herocopyblock2{
	position:absolute;
	top:50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	padding:0;
	margin:0 auto;
	width:100%;
    background-color: #f0f0f0;
	height:100%;
}
#heropiccredit{
	position: relative;
	z-index: 999999;
	background:#f0f0f0;
	margin:0;
	padding:16px 0 16px 0;
}
.myrole2{
	padding:0;
	text-align:left;
	width:100%;
	font-size:14px;
	margin:10% 0 0 0;
}
.rolelist{
	padding:2% 0 0 0;
	float:none;
	text-align:left;
	color:#2f2f2f;
	font-family: Calibre;
	font-size:16px;
}
.blocksection{
	width:100%;
	margin: 80px 0 0 0;
}
.blocksection2{
	width:100%;
	margin:120px 0 0 0;
}
.leftsideinfo1{
	float:left;
	padding:0 0 0 5%;
	margin:80px 0 80px 0;
	text-align:right;
	width:30%;
}
.rightsideinfo1{
	float:right;
	padding:0 5% 0 0;
	width:50%;
	margin:80px 0 80px 0;
	text-align:left;
}
.minititle{
	font-size:36px;
	line-height:36px;
	padding:0;
	margin:0;
}
.subheader2{
	color:#2f2f2f;
	font-size:28px;
	line-height:28px;
	padding:0 0 32px 0;
	margin:0;
	font-family:Calibre;
	font-weight:normal;
	font-style:normal;
}
.copy2{
	font-size:20px;
	line-height:20px;
}
.copy3{
	font-size:22px;
	line-height:28px;
}
.copy4{
	font-size:22px;
	line-height:28px;
	padding:4px 0 4px 0;
	margin:0;
}
.twoupcontainer{
	width:100%;
	margin:80px 0 0 0;
}
.minititlesmall{
	font-size:30px;
	line-height:30px;
	padding:0 0 40px 0;
}
.subheader3{
	font-size:22px;
	line-height:28px;
	padding:40px 0 32px 0;
}
.marketleftside, .unmetleftside{
	display:block;
	float:none;
	width:100%;
	margin:auto 0;
}
.marketrightside{
	display:block;
	float:none;
	width:60%;
	margin:10% auto 0 auto;
}
.unmetrightside{
	display:block;
	margin:10% auto 0 auto;
	width:100%;
	float:none;
}
.verticalcontainer{
	width:100%;
	display:initial;
}
.personaleftside{
	display:block;
	float:none;
	width:35%;
	margin:0 0 24px 0;
}
.personarightside{
	display:block;
	float:none;
	width:100%;
	margin:auto 0;
}
.stats2{
	width:40%;
}
.lefthrcontainer{
	display:block;
	float:left;
	width:25%;
	margin:auto 0;
}
.righthrcontainer{
	display:block;
	float:right;
	width:25%;
	margin:auto 0;
}
.desleftside{
	display:block;
	float:none;
	width:100%;
	margin:auto 0;
}
.desrightside{
	display:block;
	float:none;
	width:60%;
	margin:10% auto 0 auto;
}
.screenrightside{
	display:none;
}
.buttoncenter2{
	display:block;
	
}
.threeupcontainer{
	padding:10% 0 10% 0;
}
}
@media only screen and (min-width: 375px) and (max-width: 767px){
a#logo2{
	width:69px;
	height:50px;
	margin: 0 0 0 24px;
}
.projecttitle{
	margin: 20% auto 0 auto;
	font-size:40px;
	line-height:40px;
	text-align:left;
}
.projectdes{
	font-size:20px;
	width:100%;
	padding:0;
	margin:24px auto 0 auto;
	text-align:left;
}
.buttoncenter2{
	display:block;
	
}
.button2{
	padding:16px 16px 16px 16px;
	border-radius:50px;
	border:1px solid #2f2f2f;
	color:#2f2f2f;
	font-size: 24px;
	font-family:Calibre;
	text-align:center;
	font-weight:normal;
	font-style:normal;
	margin: 8% auto 0 auto;
	display:inline-block;
	float:none;
}
#projectherodiv{
	position:relative;
	display:inline-block;
	margin: 64px 0 0 0;
}
#projectbg{
	padding:0;
	width:100%;
	opacity:0;
	margin:0 0 -20% 0;
}
#herocopyblock2{
	position:absolute;
	top:50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	padding:0;
	margin:0 auto;
	width:100%;
    background-color: #f0f0f0;
	height:100%;
}
#heropiccredit{
	display:none;
	position: relative;
	z-index: 999999;
	background:#f0f0f0;
	margin:0;
	padding:16px 0 16px 0;
}
.myrole2{
	padding:0;
	text-align:left;
	width:100%;
	font-size:14px;
	margin:16% 0 0 0;
}
.rolelist{
	padding:4% 0 0 0;
	float:none;
	text-align:left;
	color:#2f2f2f;
	font-family: Calibre;
	font-size:16px;
}
.blocksection{
	width:100%;
	margin: 80px 0 0 0;
}
.blocksection2{
	width:100%;
	margin:120px 0 0 0;
}
.leftsideinfo1{
	float:none;
	padding:0 0 0 0;
	margin:80px 0 40px 0;
	text-align:left;
	width:100%;
}
.rightsideinfo1{
	float:none;
	padding:0 0 0 0;
	width:100%;
	margin:40px 0 80px 0;
	text-align:left;
}
.minititle{
	font-size:32px;
	line-height:32px;
	padding:0;
	margin:0;
}
.subheader2{
	color:#2f2f2f;
	font-size:24px;
	line-height:28px;
	padding:0 0 32px 0;
	margin:0;
	font-family:Calibre;
	font-weight:normal;
	font-style:normal;
}
.copy2{
	font-size:20px;
	line-height:20px;
}
.copy3{
	font-size:22px;
	line-height:28px;
}
.copy4{
	font-size:20px;
	line-height:28px;
	padding:4px 0 4px 0;
	margin:0;
}
.copy5{
	color:#2f2f2f;
	font-size:22px;
	line-height:28px;
}
.twoupcontainer{
	width:100%;
	margin:80px 0 0 0;
}
.minititlesmall{
	font-size:30px;
	line-height:30px;
	padding:0 0 40px 0;
}
.minititlesmall2{
	color:#2f2f2f;
	font-size:30px;
	line-height:30px;
	padding:0 0 40px 0;
}
.subheader3{
	font-size:22px;
	line-height:28px;
	padding:40px 0 16px 0;
}
.subheader4{
	font-size:22px;
	line-height:28px;
	padding:40px 0 16px 0;
}
.marketleftside, .unmetleftside{
	display:block;
	float:none;
	width:100%;
	margin:auto 0;
}
.marketrightside{
	display:block;
	float:none;
	width:60%;
	margin:10% auto 0 auto;
}
.unmetrightside{
	display:block;
	margin:10% auto 0 auto;
	width:100%;
	float:none;
}
.verticalcontainer{
	width:100%;
	display:initial;
}
.personaleftside{
	display:block;
	float:none;
	width:60%;
	margin:0 0 24px 0;
}
.personarightside{
	display:block;
	float:none;
	width:100%;
	margin:auto 0;
}
.stats2{
	width:60%;
}
.lefthrcontainer{
	display:block;
	float:left;
	width:15%;
	margin:auto 0;
}
.righthrcontainer{
	display:block;
	float:right;
	width:15%;
	margin:auto 0;
}
.desleftside{
	display:block;
	float:none;
	width:100%;
	margin:auto 0;
}
.desrightside{
	display:block;
	float:none;
	width:60%;
	margin:10% auto 0 auto;
}
.screenrightside{
	display:none;
}
.threeupcontainer{
	padding:10% 0 10% 0;
}
.twoupleftimage{
	float:left;
	background-image: linear-gradient(rgba(0,168,226,1), rgba(25,177,229,1));
	width:100%;
	padding:20% 0 20% 0;
	display:inline-block;
	margin:auto;
}
.twouprightimage{
	float:left;
	background-image: linear-gradient(rgba(0,32,66,1), rgba(25,54,85,1));
	width:100%;
	padding:20% 0 20% 0;
	display:inline-block;
	margin:auto;
}
.twoupleftimagealt{
	float:left;
	width:100%;
}
.twouprightimagealt{
	float:left;
	width:100%;
}
.bspadding{
	padding:0;
}
.bspadding2{
	padding:0;
	background-image:none;
}
.imagesplitleft{
	width:100%;
	float:none;
}
.imagesplitright{
	width:100%;
	float:none;
}
/*.imagelightbg, .imagewhitebg, .imagedarkbg, .imageyellowbg{
	background-image: linear-gradient(rgba(225,225,225,1), rgba(230,230,230,1));
}*/
.showcasecontainer{
	width:60%;
	margin:auto;
}
.showcasecontainerzoom{
	width:60%;
	margin:auto;
}
#showcasehr{
	margin:80px 0 0 0;		
}
.backgroundcontainer{
	background-image: none;
	display:flex;
	align-content: center;
	justify-content:space-between;
	padding:15% 0 40% 0;
}
.mainscreencontainer{
	width:70%;
	margin:auto;
}
.threeupcontainer{
	display:block;
	padding:10% 0 10% 0;
}
.threeupleftimage{
	float:none;
	width:65%;
	margin:10% auto 0 auto;
}
.threeupcenterimage{
	float:none;
	width:65%;
	margin:auto;
}
.threeuprightimage{
	float:none;
	width:65%;
	margin:auto;
}
.threeupdes{
	margin:0 0 48px 0;
	color:#2f2f2f;
}
.projecthr2{
	opacity:0.2;
	margin:40px 0 0 0;
	padding:0;
}

}