@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap');
body{ color: #484848; font-size: 18px; font-family: 'Source Sans Pro',sans-serif; margin: 0; padding: 0; font-weight: 300}
h1{font-size: 1.5em}
h2{font-size: 2em; font-weight: 400}
.font-base{font-size:1.2em; line-height:1.5em; font-weight: 300}
li{list-style: none; float: left; width: 48.5%;padding: 0; margin: 0; border-radius: 8px; border: #e1e1e1 1px solid; }
.firstBlock{margin-right: 2%;}
.headerCard{ font-size:1em;font-weight: 700;width: 100%; position: relative; height: 72px; display: flex; flex-direction: row}
.headerCard div{flex: 100%; align-self: center}
.headerCard img {position: absolute; top: 12px; left: 12px; height: 48px; width: auto;}
/*img{margin: 12px;position: absolute;top: 0%;}*/
.title{position: absolute;top: 35%; left: 68px;}
.descriptionCard{ padding: 0; padding-bottom: 40px; clear: both; background-color: #fff; text-align: center; display: none}

p{clear: both}

.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 30%; 
  height: 100px;
	background-color: RED
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
	
}

.descriptionHome{padding:20px;}

.maincard{ border: 1px solid #e1e1e1; border-radius: 8px}


.fontBaseXSmall{ font-size: 0.6em; font-weight: 300}
.fontBaseSmall{ font-size: 0.8em; font-weight: 300}
.fontBase{ font-size: 1em; line-height: 1.5em; font-weight: 300}
.fontBaseLarge{ font-size: 1.2em; line-height: 1.5em; font-weight: 300}
.fontBaseXLarge{ font-size: 1.5em;font-weight: 300}
.fontLegend{ text-align: center; color: #737373; font-style: italic;}

.tag{ font-size: 0.5em; line-height: 1.2em; text-transform: uppercase; font-weight: 400; color: #FFF;  border-radius: 4px;padding: 1px 4px 1px 4px; }
.ic{background-color:#BD4784;}
.lead{background-color:#4B6EB2;}


.contact{ display: flex; flex-direction: column}
.socialmedia{ display: flex; flex-direction: row}
.contact div{ flex: 32px; padding: 0; height: 32px;  margin: 0; margin-right: 20px; border: 0; border-radius: 0px; width: 32px  }
.contact img{margin: 0;position: relative;}

.container{padding: 80px; clear: both;}
.containerCases{padding: 70px; clear: both;}


/* unvisited link */
a:link {
    color: #027BAF;
	text-decoration: none;
}

/* visited link */
a:visited {
    color: #027BAF;
	text-decoration: none;
}

/* mouse over link */
a:hover {
    color: #027BAF;
	text-decoration: underline;
}

/* selected link */
a:active {
    color: #027BAF;
	text-decoration: none;
}


@media screen and (max-width: 768px) {
	li{ width: 100%}
	.firstBlock{margin-right: 0;margin-bottom: 30px}
	
}






/* Cases */

.hero{ width: 100%; height: 800px; background-color: #000; position: relative; }
.caseDashboard{ background-image: url("/work/images/Hero_Dashboard.jpg"); background-repeat: no-repeat; background-size:cover; background-position: center center;position: absolute; top: 0; z-index: 100  }
.caseLubele{ background-image: url("/work/images/Hero_Lubele.JPG"); background-repeat: no-repeat; background-size:cover; background-position: center center;position: absolute; top: 0; z-index: 100}

.caseCareerProfile{ background-image: url("/work/images/Hero_CareerProfile.jpg"); background-repeat: no-repeat; background-size:cover; background-position: center center;position: absolute; top: 0; z-index: 100}


.caseSpark{ background-image: url("/work/images/Hero_spark35.jpg"); background-repeat: no-repeat; background-size:cover; background-position: center center;position: absolute; top: 0; z-index: 100  }


.caseReports{ background-image: url("/work/images/Hero_reports.jpg"); background-repeat: no-repeat; background-size:cover; background-position: center center;position: absolute; top: 0; z-index: 100  }


.backdrop { width: 100%; height: 100%; background-color: black; position: absolute; top: 0; z-index: -1; opacity: 0.4}


.heroContent{
  position: relative;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
	text-align: center;
	color: white;
	
}
.heroContent h1{ padding: 0px; margin: 0; font-size: 3em}
.heroContent p{ padding: 0px; margin: 0; }

.caseConent{ max-width: 960px; margin: 0 auto; border-bottom: 1px solid #e1e1e1  }
.firstRowContent{ margin-top: 800px;}
.final{ max-width: 850px;} 
.caseConent  h2{ font-size: 1.5em; font-weight: 400}
.caseConent  ul{ clear: both;position: relative;}
.caseConent  li{list-style: inside;   width: 99%; padding: 0; margin:0; border-radius: 0px; border: 0; margin-bottom: 10px; }


.caseProblem, .caseFinal {background-color: #303030; color: #fff}
.caseSolution {background-color: #FAFAFA; color: #303030; border-top: 1px solid #e1e1e1;  border-bottom: 1px solid #e1e1e1; }
.caseSolution, .caseFinal h2{text-align: center}

.NewFeatures {
  display: flex;
	/* flex-direction: row-reverse; */
	flex-direction: row;
	margin-bottom: 40px;
	
	
}
.FeatureDescription{text-align: left;width: 50%; margin: 40px;align-self: center;}


.CasesFlex{display: flex;
	/* flex-direction: row-reverse; */
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0px;
	
}

.CasesFlexHome{display: flex;
	/* flex-direction: row-reverse; */
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0px;
	
}


.columnHome {
  flex: 33.33%;
  max-width: 33.33%;
  padding: 0px;
  overflow: hidden;
 position: relative;

}

.columnHomeOpenSpacer{ flex: 30px;
  max-width: 30px; height: 30px;
  padding: 0px;
  overflow: hidden;
 position: relative;
}

.columnHomeOpen {
  flex: 20%;
  max-width: 20%;
  padding: 0px;
  overflow: hidden;
 position: relative;

}





.wordDescription{ background-color:#FAFAFA; margin: 0 10px 20px 10px; padding: 20px}



.category{display: flex;
	/* flex-direction: row-reverse; */
	flex-direction: row;
	}

.WorkCategory{display: flex; flex-direction: row;flex:50%; max-width:50%}

.categoryColumn{text-align: left;width: 100%;}

.thumbLubele{background-image: url("/work/images/Hero_Lubele.JPG"); }
.thumbDashboard{background-image: url("/work/images/thumb_Dashboard.png")}
.thumbSpark{background-image: url("/work/images/thumb_Spark.png")}
.thumbCareerProfile{background-image: url("/work/images/thumb_Careers.png") }
.thumbCoursePlanner{background-image: url("/images/Hero_CoursePlanner.jpg") }
.thumbReports{background-image: url("/work/images/thumb_reports.png") }


.caseThumb{background-repeat: no-repeat; background-size:cover; background-position: center center; height: 400px; position: relative;transition: transform .2s; margin: 10px }

/* Inline styles moved from index.html */
.containerIntro{ padding-top: 20px; padding-bottom: 0; max-width: 1640px; margin: 0 auto; }
.contentMax900{ max-width: 900px; }
.lineHeight25{ line-height: 2.5em; }
.caseConentWide{ max-width: 1640px; }
.caseMenuAdjust{ border: 0; padding-bottom: 0; padding-top: 0; }
.caseConent > h2 { margin: 0 0 12px; }
.containerIntro .font-base p:last-child { margin-bottom: 0; }
.contact h2 { margin-top: 0; }
.mvotThumbLink{ display: block; }
.mvotThumb{ background-image: url("images/mvot_cover.png"); background-size: cover; background-position: center; width: 100%; aspect-ratio: 16 / 9; }

.caseThumb:hover {
  transform: scale(1.03); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
	
}

.titleThumb:hover, .titleThumb:active{
   filter: alpha(opacity=1);
  opacity: 1;
}




.CaseStudyTag{ font-size:.8em; text-transform: uppercase; line-height: 1.5em; background-color: #7A38D2; color: white; padding: 2px 6px 2px 6px; position: absolute; top: 0px; z-index: 1020}

.thumbOdd{ padding: 10px 10px 10px 0;}
.thumbEven{ padding: 10px 0px 10px 10px;}


.titleThumb{  background-color: rgb(0, 0, 0, 0.7); position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; opacity: 0; 
 -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -ms-transition: opacity 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out;
  transition: opacity 0.25s ease-in-out;
	display: flex;
	flex-direction: column;
  justify-content: center;
  align-items: center;color: white; font-size: 1.5em;
}

.titleThumb div {padding-bottom: 5px;}


.NewFeatures img{width: 100%;}
.flexReverse{flex-direction: row-reverse}

.headerFeatureWithImg{ width: 100%; text-align: center}

.headerFeatureWithImg img{ width: 120px; border-radius: 100px;}

.featuredImage{clear: both; width: 100%; margin: 0 auto; position: relative;padding: 0; border: 1px solid #e1e1e1; border-radius: 8px;overflow: hidden;  }
.featuredImagenoBorder{clear: both; width: 100%; margin: 0 auto; position: relative;padding: 0; border: 0; background-color: #FFF}
.featuredImage img{width: 100%;margin: 0px;position: relative;}
.featuredImagenoBorder img{width: 100%;margin: 0px;position: relative;}

.splitContent{width: 80px; height: 4px; background-color: #000; margin: 32px 0}

.highlightText{background-color:#FFE5F3}

.back{ width: 28px; height: 28px;  
  	position: fixed; top: 0; background-color: rgb(0, 0, 0, 0.5); padding: 16px; z-index: 250}
.back img {height: 100%;}

.newCLass{padding: 90px}


.quote{ background-color: #484848; font-size: 1.5em; color: #FAFAFA; padding: 30px; max-width: 700px; border-radius: 8px; margin: 0 auto; font-weight: 300 }

.quoteOpen{font-size: 1.5em; color: #FFF; font-weight: 300}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	
	.CasesFlexHome{flex-direction: column;}
	.columnHomeOpen {flex: 100%;
  max-width: 100%; }
	
	.descriptionCard{display: block}
	
	.container, .containerHome{ padding: 40px 20px; }
	.containerCases{padding: 10px;}
	
	.lubeleresults{text-align: center}

.hero{height: 300px;}
.firstRowContent{ margin-top: 300px;}
.heroContent h1{ font-size: 2em;}
	
	.category, .WorkCategory{flex-direction: column;}
	
	.NewFeatures {
  display: flex;
	/* flex-direction: row-reverse; */
	flex-direction: column-reverse;
	
	
}
	
	.flexReverse{flex-direction: column-reverse}
	.FeatureDescription{width: 100%; margin: 0;}
	
	.columnHome{
  flex: 100%;
  max-width: 100%;	
}
	
	

	
	.thumbEven, .thumbOdd{ padding: 10px 0}
	.caseThumb{height: 280px}
	
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	
	
	.CasesFlexHome{flex-direction: column;}
	.columnHomeOpen {flex: 100%;
  max-width: 100%; }
	
	.descriptionCard{display: block}
	
	.container.container, .containerHome{ padding: 20px 20px; }
	.containerCases{padding: 10px;}

	.hero{height: 400px}
	.firstRowContent{ margin-top: 400px;}
	.heroContent h1{ font-size: 2em}
	
	.category{flex-direction: column;}
	
	
	.NewFeatures {
  display: flex;
	/* flex-direction: row-reverse; */
	flex-direction: column-reverse;
	
	
}
	.flexReverse{flex-direction: column-reverse}
	.FeatureDescription{width: 100%; margin: 0;}
	
	.columnHome {
  flex: 100%;
  max-width: 100%;	
}
	
	
	
	.thumbEven, .thumbOdd{ padding: 10px 0}
	
	.caseThumb{height: 280px}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	
	.CasesFlexHome{flex-direction: column;}
	.columnHomeOpen {flex: 100%;
  max-width: 100%; }
	
	.descriptionCard{display: none}
	
	.category, .WorkCategory{flex-direction: row;}
	.hero{height: 500px}
	.firstRowContent{ margin-top: 500px;}
.heroContent h1{ font-size: 3em}

	.NewFeatures {
  display: flex;
	/* flex-direction: row-reverse; */
	flex-direction: column-reverse;
	
	
}
	.flexReverse{flex-direction: column-reverse}
	.FeatureDescription{width: 100%; margin: 0;}
	
	.columnHome {
  flex: 50%;
  max-width: 50%;
}


.thumbOdd{ padding: 10px 10px 10px 0;}
.thumbEven{ padding: 10px 0px 10px 10px;} 
	
	.container.container, .containerHome{padding: 40px 80px;}
	.containerCases{padding: 70px;}
	
	.caseThumb{height: 320px}
	

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	.category{flex-direction: row;}
	.hero{height: 600px;}
.firstRowContent{ margin-top: 600px;}
	.NewFeatures {
  display: flex;
	/* flex-direction: row-reverse; */
	flex-direction: row;
		
	
	
}
	
	.CasesFlexHome{flex-direction: row;}
	.columnHomeOpen {flex: 31%;
  max-width: 31%; }
	
	.FeatureDescription{width: 50%; margin: 40px;}
	.flexReverse{flex-direction: row-reverse}
	
	.columnHome{
  flex: 50%;
  max-width: 50%;	
}
	
	.thumbOdd{ padding: 10px 10px 10px 0;}
.thumbEven{ padding: 10px 0px 10px 10px;}
	
	.container.container, .containerHome{padding: 40px 80px;}
	.containerCases{padding: 70px;}
	.containerHome{padding: 40px 80px;}
	
	.caseThumb{height: 400px}
	
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	
	
	.CasesFlexHome{flex-direction: row;}
	.columnHomeOpen {flex: 31%;
  max-width: 31%; }
	
	.category{flex-direction: row;}
	
	
	.columnHome {
  flex: 50%;
  max-width: 50%;
		
}
	
	
	
.thumbOdd{ padding: 10px 10px 10px 0;}
.thumbEven{ padding: 10px 0px 10px 10px;}

	
.hero{ height: 800px;}
.firstRowContent{ margin-top: 800px;}
.heroContent h1{ font-size: 3em}

	.NewFeatures {
  display: flex;
	/* flex-direction: row-reverse; */
	flex-direction: row;
	
	
}
	.FeatureDescription{width: 50%; margin: 40px;}
	.flexReverse{flex-direction: row-reverse}
	
	.container.container, .containerHome{padding: 40px 80px;}
	.containerCases{padding: 70px;}
	
	.caseThumb{height: 400px}
	
}