@charset "UTF-8";

/* Container */
.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

nav {
	float: right;
	width: 100%;
	text-align: right;
	margin-top: 15px;
	margin-right: 15px;
}

header nav ul {
	list-style: none;
	float: right;
}

nav ul li {
	float: left;
	color: #000000;
	font-size: 18px;
	text-align: left;
	margin-right: 25px;
	letter-spacing: 2px;
	font-weight: normal;
}
ul li a {
	color: #000000;
	text-decoration: none;
}
ul li:hover a {
	color: #4D4D4D;
}

body {
	font-family: "Helvetica";
	background-color: #FFFFFF;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-style: normal;
	font-weight: 200;
}

/* index page */

span {
	display:table;
	margin:0 auto;
}

.profile {
    float: right;
    /*width: 30%;*/
    text-align: left;
    margin-left: auto;
    padding-right: 30px;
    padding-bottom: 30px;
}

.profile h1 {
  font-size:   80px;
  line-height: 0px;	
  font-weight: lighter;
}

.profile h2 {
  font-size:   41px;
  line-height: 41px;	
  font-weight: lighter;
}

.profile h3 {
  font-size:   20px;
  line-height: 10px;
  font-weight: lighter;
}

.profile p {
  font-size:   16px;
  line-height: 19px;	
  font-weight: lighter;
}

.capabilities {
    position: absolute;
    bottom: 20px;
}

.text_column {
	width: 15%;
	line-height: 25px;
	float: left;
	padding-left: 40px;
	padding-right: 40px;
}


/* use case study */

.usecase {
    float: left;
    width: 40%;
    
    text-align: left;
	padding-left: 42px;
	padding-top: 20px;
    margin-right: auto;
}

.usecase_vid {

    float: right;
    width: 40%;

    width: 252px;
    height: 598px;

    top: 100px;
    margin-right: 200px;

 	padding-left: 14px; 
	padding-right: 50px;
 	padding-top: 109px;

 	background-image: url('../images/dongl_live_3x.jpg'); 
    background-size: 252px 598px;
 	background-repeat: no-repeat; 
	background-position-y: 60px;

	display: block;
}

.usecase_vid_ds {

    float: right;

    top: 100px;
    margin-right: 200px;

 	padding-left: 20px; 
	padding-right: 50px;
 	padding-top: 109px;

/* 	background-image: url('../images/do_something_splash_3x.jpg'); */
    background-size: 334px 720px;
 	background-repeat: no-repeat; 
	background-position-y: 60px;

	display: block;
}

.usecase_vid_ds_wide img {

	padding-top: 40px;
	padding-left: 20px;
	padding-right: 20px;
}


.usecase_vid_ds_wide {

    float: right;
    width: 45%;

	padding-top: 140px;
	padding-left: 100px;
	margin-left: auto;
  	margin-right: auto;

	display: block;
}

.usecase_vid video {

	width: 225px; 
	height: 400px; 
	object-fit: fill;
}

.usecase_hero_image {
    float: right;
    width: 35%;

	padding-right: 50px;
	padding-top: 30px;
    margin-right: auto;

	display: block;
}

.usecase_hero_image_wide {
    float: right;
    width: 45%;


	padding-right: 50px;
	padding-top: 140px;
    margin-right: auto;

	display: block;
}

.usecase_title img {
	display: none;
}

.usecase_title_wide img {
	display: none;
}

hr {
  border-top: 2px solid black;
}

.usecase h1 {
    font-size:40px;
    font-weight: lighter;

    height: 30px;
}

.usecase h2 {
    font-size: 20px;
    line-height: 10px;
    font-weight: lighter;    
}

.usecase h3 {
    font-size: 16px;
	line-height: 30px;
	font-weight: 320;
}

.usecase h4 {
    font-size: 12px;
	line-height: 24px;    
	font-weight: lighter;
}

.usecase li {
    font-size: 12px;
	line-height: 24px;    
	font-weight: lighter;
}

.usecase_title .media-body {
	-ms-flex: 1;
	flex: 1;

	padding-left: 0px;
}

.media-body a {
	color: 		 #000000;
	font-size:   12px;
	font-weight: lighter;
}

.usecase a {
	color: 		 #000000;
	font-size:   12px;
	font-weight: lighter;
}

.usecase b {
	color: 		 #000000;
	font-weight: 500;
}


/* about page */

.history {
	float: left;
    text-align: left;
    margin-left: 30px;
    margin-right: auto;
    width: 30%;
    padding-top: 50px;
}

.talents {
	float: left;
    text-align: left;
    margin-left: auto;
    margin-right: 30px;
    width: 30%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.skills {
	float: left;
    text-align: left;
    margin-left: auto;
    margin-right: 30px;
    width: 30%;
    padding-top: 50px;
}

.about_profile_higher {
	display: block;

	float: left;
    margin-left: 30px;
    margin-right: auto;
    width: 80%;
    padding-top: 10px;

	display: -ms-flexbox;
  	display: flex;
  	-ms-flex-align: start;
  	align-items: flex-start;
}

.media-body {
  -ms-flex: 1;
  flex: 1;
  padding-left: 20px;
}

.about img {
    padding-bottom: 10px;
}

.about a {
   text-decoration: none !important;
   border:0px !important;
   outline:none;
   border-width: 0px;
   outline-width:0px;
   border-bottom: none;
}

.about_links {
    padding-top: 10px;	
}

.about h1 {
    font-size:40px;
    line-height: 5px;
    font-weight: lighter;

    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
}

.about h3 {
    font-size: 14px;
    line-height: 10px;
    font-weight: lighter;
}

.about h4 {
    font-size: 12px;
	line-height: 30px;
    font-weight: lighter;

	margin-block-start: 0.0em;
	margin-block-end: 0.0em;
}

.about h4 a {
    color: #000000;
    font-style: italic;
}

.row {
	width: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	display: inline-block
}
.row.blockDisplay {
	display: block;
}

.columns {
	width: 50%;
	float: left;
	line-height: 24px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: justify;
	margin-top: 15px;
	margin-bottom: 15px;
	padding-left: 0px;
	padding-right: 0px;
	margin-left: 0px;
	margin-right: 0px;
}

.row .columns h1 {
	padding-left: 10%;
	padding-right: 10%;

	font-size:   40px;
	line-height: 40px;	
	font-weight: lighter;
}

.row .columns h2 {
	padding-left: 10%;
	padding-right: 10%;

	font-size:   20px;
    line-height: 20px;	
    font-weight: lighter;
}

.row .columns h3 {
	padding-left: 10%;
	padding-right: 10%;

	font-size:   14px;
    line-height: 24px;	
    font-weight: lighter;
}

.row .columns h4 {
	padding-left: 10%;
	padding-right: 10%;

	font-size:   12px;
    line-height: 24px;	
    font-weight: lighter;
}

.thumbnail {
	height: 319px; 
	margin-left: auto;
    padding-bottom: 20px;
}

.thumbnail_wide {
	width: 414px; 
	margin-left: auto;
    padding-bottom: 20px;
}

.thumbnail_align {
	text-align: center;
}


/****************************/
/*       				 	*/
/* Mobile/Small Tablets  	*/
/*        				 	*/
/****************************/


@media (max-width: 767px) {

	/* Container & nav */

	.container {
    	max-width: 90%;
    	overflow-x: hidden;
	}

	.container header nav {
		float: right;
		width: 100%;
		text-align: right;
		margin-top: 5px;
		margin-right: 0px;	
	}

	header nav ul {
		list-style: none;
		float: right;
	}
	nav ul li {
		float: left;
		color: #000000;
		font-size: 18px;
		text-align: left;
		margin-right: 15px;
		letter-spacing: 2px;
		font-weight: normal;
	}
	ul li a {
		color: #000000;
		text-decoration: none;
	}
	ul li:hover a {
		color: #4D4D4D;
	}

	.text_column {
		width: 100%;
		padding-top: 0px;
		padding-right: 10px;
		padding-bottom: 0px;
		padding-left: 10px;
	}

	.profile {
	    float: left;
	    /*width: 100%;*/
	    text-align: left;
	    margin-left: 10px;
	    margin-right: 10px;
	}

	.profile h1 {
	  font-size:   50px;
	  line-height: 50px;	
	  font-weight: lighter;

	  margin-block-end: 0.4em;
	}

	.profile h2 {
	  font-size:   20px;
	  line-height: 20px;	
	  font-weight: lighter;
	}

	.profile h3 {
	  font-size:   14px;
	  line-height: 14px;	
	  font-weight: lighter;
	}

	.profile p {
	  font-size:   16px;
	  line-height: 18px;	
	  font-weight: lighter;
	}

	.capabilities {
		position: initial;

		float: left;
	    width: 100%;
	    text-align: left;
		padding-top: 20px;
		padding-bottom: 50px;
	    margin-left: auto;
	    margin-right: auto;
	}

	.text_column {
		width: 90%;
		line-height: 25px;
	}

	.usecase {
	    float: left;
	    width: 90%;
	    
	    text-align: left;
		padding-top: 10px;
	    margin-left: 10px;
	    margin-right: 10px;
		padding-left: 0px;

		padding-bottom: 0px;
	}

	.usecase_title {
		display: block;

		display: -ms-flexbox;
	  	display: flex;
	  	-ms-flex-align: start;
	  	align-items: flex-start;

	    padding-top: 10px;
	}

	.usecase_title img {
		display: block;

	    margin-right: 20px;
	    margin-bottom: 10px;
	}

	.usecase_title_wide img {
		display: inline-block;
		*display: inline;
		zoom: 1;

	    margin-top: 10px;
	    margin-left: 40px;
	}

	.usecase_hero_image {
		display: none;
	}

	.usecase_hero_image_wide {
		display: none;
	}	

	.usecase_vid {
		display: none;
	}

	.usecase h1 {
	  font-size:   30px;
	  font-weight: lighter;

	  line-height: 0px;
	  height: 10px;

/*	   	color: #F0E8F2;	*/
	}

	.usecase h2 {
	  font-size:   20px;
	  line-height: 20px;	
	  font-weight: lighter;
	}

	.usecase h3 {
	  font-size:   16px;
	  line-height: 14px;	
	  font-weight: 300;
	}

	.usecase p {
	  font-size:   16px;
	  line-height: 18px;	
	  font-weight: lighter;
	}

	.history {
		float: left;
	    width: 90%;

	    text-align: left;
	    margin-left: 10px;
	    margin-right: auto;
	    padding-top: 10px;
		padding-bottom: 20px;
	}

	.skills {
		float: left;
	    width: 90%;

	    text-align: left;
	    margin-left: 10px;
	    margin-right: auto;
	    padding-top: 10px;
		padding-bottom: 20px;
	}

	.talents {
		float: left;
	    width: 90%;

	    text-align: left;
	    margin-left: 10px;
	    margin-right: auto;
	    padding-top: 10px;
	    padding-bottom: 50px;
	}

	.about_profile_higher {
		display: block;

		float: left;
	    margin-left: 10px;
	    margin-right: auto;
	    width: 80%;
	    padding-top: 10px;
		padding-bottom: 20px;

	}

	.media-body {
		-ms-flex: 1;
		flex: 1;
		padding-left: 0px;
		width: 110%
	}

	.about h1 {
	    font-size:	 30px;
	    line-height: 5px;
	    font-weight: lighter;
	}

	.about h3 {
	    font-size: 	 14px;
	    line-height: 10px;
	    font-weight: lighter;
	}

	.about h4 {
	    font-size:   12px;
		line-height: 30px;
	    font-weight: lighter;

    	margin-block-start: 0.0em;
    	margin-block-end: 0.0em;
	}

	.columns {
		width: 100%;
		margin-top: 6px;
		margin-right: 0px;
		margin-bottom: 6px;
		margin-left: 0px;
		padding-top: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
	}

	.usecase_vid_ds {
		display: none;
	}

	.usecase_vid_ds_wide {
		display: none;
}

	.thumbnail_wide {
		width: 300px; 
		margin-left: auto;
	    padding-bottom: 20px;
	}
}

@media (min-width: 768px) and (max-width: 986px) {

	.capabilities {	
		
		position: initial;

		float: left;
	    width: 30%;
	    text-align: left;
	    margin-left: auto;
	    margin-top: 0px;
	    padding-top: 0px;
	}

	.text_column {
		width: 100%;
		line-height: 25px;
		padding-top: 5px;
	}


	.profile {
	    float: right;
	    /*width: 50%;*/
	    text-align: left;
	    margin-left: 10px;
	    margin-right: 10px;
	}


	.profile h1 {
	  font-size:   50px;
	  line-height: 50px;	
	  font-weight: lighter;

	  margin-block-end: 0.4em;
	}

	.profile h2 {
	  font-size:   20px;
	  line-height: 20px;	
	  font-weight: lighter;
	}

	.profile h3 {
	  font-size:   16px;
	  line-height: 14px;	
	  font-weight: lighter;
	}

	.profile p {
	  font-size:   16px;
	  line-height: 18px;	
	  font-weight: lighter;
	}

	.usecase_vid_ds_wide {

	    float: right;

		padding-top: 140px;
		padding-left: 00px;
		padding-right: 20px;
		margin-left: auto;
	  	margin-right: auto;

		display: block;
	}

	.usecase_vid_ds_wide video {

	    width: 320px;
	    height: 180px;
	}

	.usecase_vid_ds_wide img {

	    width: 300px;
	    height: 230px;
	}

}


@media (min-width: 987px) and (max-width: 1156px) {

	.profile {
	    float: right;
	    /* width: 55%; */
	    text-align: left;
	    margin-left: 10px;
	    margin-right: 10px;
	}

	.capabilities {	
		
		position: initial;

		float: left;
	    width: 30%;
	    text-align: left;
	    margin-left: auto;
	    margin-top: 0px;
	    padding-top: 0px;
	}

	.text_column {
		width: 100%;
		line-height: 25px;
		padding-top: 5px;
	}

	.usecase {
	    float: left;
	    width: 40%;
	    
	    text-align: left;
		padding-top: 10px;
	    margin-left: 0px;
	    margin-right: 15px;
	}

	.usecase_vid {
	    margin-right: auto;
	}

	.usecase h1 {
	  font-size:   40px;
	  line-height: 40px;	
	  font-weight: lighter;

/* 	   	color: #FF7469;	do something */
	}

	.usecase_vid_ds {

	    float: right;

	    top: 100px;
	    margin-right: 100px;

	 	padding-left: 20px; 
		padding-right: 50px;
	 	padding-top: 109px;

	/* 	background-image: url('../images/do_something_splash_3x.jpg'); */
	    background-size: 334px 720px;
	 	background-repeat: no-repeat; 
		background-position-y: 60px;

		display: block;
	}

	.usecase_vid_ds_wide {

	    float: right;
	    width: 500px;

		padding-top: 140px;
		padding-left: 00px;
		padding-right: 20px;
		margin-left: auto;
	  	margin-right: auto;

		display: block;
	}

	.usecase_vid_ds_wide video {

	    width: 480px;
	    height: 270px;
	}

	.usecase_vid_ds_wide img {

	    width: 450px;
	    height: 347px;
	}

	.usecase h2 {
	  font-size:   20px;
	  line-height: 20px;	
	  font-weight: lighter;
	}

	.usecase h3 {
	  font-size:   16px;
	  line-height: 14px;	
	  font-weight: lighter;
	}

	.usecase h4 {
	  font-size:   12px;
	  line-height: 24px;	
	  font-weight: lighter;
	}

	.usecase li {
	  font-size:   12px;
	  line-height: 24px;	
	  font-weight: lighter;
	}

	.usecase p {
	  font-size:   16px;
	  line-height: 18px;	
	  font-weight: lighter;
	}

	/* about page */

	.history {
		float: left;
	    text-align: left;
	    margin-left: 10px;
	    margin-right: auto;
	    width: 40%;
	    padding-top: 10px;
	}

	.skills {
		float: right;
	    text-align: left;
	    margin-left: 10x;
	    margin-right: 30px;
	    width: 40%;
	    padding-top: 10px;
	}

	.talents {
		float: right;
	    text-align: left;
	    margin-left: 10x;
	    margin-right: 30px;
	    width: 40%;
	    padding-top: 30px;
	}

	.about_profile_higher {
		display: block;

		float: left;
	    margin-left: 10px;
	    margin-right: auto;
	    width: 80%;
	    padding-top: 10px;

		display: -ms-flexbox;
	  	display: flex;
	  	-ms-flex-align: start;
	  	align-items: flex-start;
	}

	.about h1 {
	    font-size:	 40px;
	    line-height: 5px;
	    font-weight: lighter;
	}

	.about h3 {
	    font-size: 	 14px;
	    line-height: 10px;
	    font-weight: lighter;
	}

	.about h4 {
	    font-size:   12px;
		line-height: 30px;
	    font-weight: lighter;
	}

	.columns {
		width: 50%;
		float: left;
		padding-left: 0px;
		padding-top: 0px;
		padding-right: 0px;
		padding-bottom: 0px;
	}
}


/********************************/
/*       				 		*/
/* Medium Desktop / iPad 10.2 	*/
/*        				 		*/
/********************************/


@media (min-width: 1157px) and (max-width: 1200px) {

	.profile {
	    float: right;
	    /* width: 35%;*/
	    text-align: left;
	    margin-left: 10px;
	    margin-right: 10px;
	}

	.capabilities {
		
		position: initial;

		float: left;
	    width: 30%;
	    text-align: left;
	    margin-left: auto;
	}

	.text_column {
		width: 100%;
		line-height: 25px;
		padding-top: 20px;
	}

	.usecase h1 {
	    font-size:40px;
	    font-weight: lighter;

	    height: 30px;
/* 	   	color: #09C536; */
	}

	.usecase {
	    float: left;
	    width: 35%;
	    
	    text-align: left;
		padding-left: 42px;
		padding-top: 20px;
	    margin-right: auto;
	}

	.usecase_hero_image_wide {
	    float: right;
	    width: 55%;

		padding-left: 0px;
		padding-right: 0px;
		padding-top: 140px;

		display: block;
	}

	.usecase_vid_ds_wide {

	    float: right;
	    width: 660px;

		padding-top: 140px;
		padding-left: 00px;
		padding-right: 20px;
		margin-left: auto;
	  	margin-right: auto;

		display: block;
	}
}

/****************************/
/*       				 	*/
/* Medium Desktop  			*/
/*        				 	*/
/****************************/

@media (min-width: 1201px) and (max-width: 1616px) {

	.usecase h1 {
	    font-size:40px;
	    font-weight: lighter;

	    height: 30px;
/*	   	color: #5F2D98; */
	}

	.profile {
	    float: right;
	    /* width: 35%; */
	    text-align: left;
	    margin-left: 10px;
	    margin-right: 10px;
	}

	.usecase_hero_image_wide {
	    float: right;
	    width: 50%;

		padding-right: 00px;
		padding-top: 140px;
	    margin-right: auto;

		display: block;
	}

	.usecase_vid_ds_wide {

	    float: right;
	    width: 660px;

		padding-top: 140px;
		padding-left: 00px;
		padding-right: 20px;
		margin-left: auto;
	  	margin-right: auto;

		display: block;
	}

	.text_column {
		width: 15%;
		line-height: 25px;
		float: left;
		padding-left: 30px;
		padding-right: 30px;
	}

}

/****************************/
/*       				 	*/
/* Height  					*/
/*        				 	*/
/****************************/


@media (max-height: 600px) and (min-width: 768px) {

	.profile {
	    float: right;
	    /*width: 30%;*/
	    text-align: left;
	    margin-left: 10px;
	    margin-right: 10px;
	}

	.capabilities {	

		position: initial;

		float: left;
	    width: 30%;
	    text-align: left;
	    margin-left: auto;
	    margin-top: 0px;
	    padding-top: 0px;
	}

	.text_column {
		width: 100%;
		line-height: 25px;
		padding-top: 5px;
	}

	.usecase h1 {
	  font-size:   40px;
	  line-height: 40px;	
	  font-weight: lighter;

/*	   	color: #FFF59A;	 */
	}
}