/* GLOBAL STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
	.arial{
		font-family: Arial;
	}

	.wte{
		background-color: #F4F4F4;
	}

	.orn{
		background-color: #FFBF73;
	}

	.blk{
		background-color: #252525;
		color: #eeeeee;
	}

	.colDisp{
		display: flex;
	}

/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){

	/* HERO SECTION ////////// */
		.octDotsBg{
			background-image: url(../images/mobile/octDotsbg_m.jpg);
		}

		.brief{
			margin-bottom: 7.142857142857142%;
		}

		.brief{
			line-height: 5vw;
		}

		.mockUpDots{
			background-image: url(../images/mobile/octDotsmockup_m.png);
			margin-left: auto;
			margin-right: auto;
			padding-top: 71.428571428571429%;
			width: 85.714285714285714%;
		}

	/* CASE STUDY ////////// */
		.octoid{
			margin-bottom: 7.142857142857142%;
			width: 100%;
		}

		.octoid .body{
			margin-bottom: 0.5rem !important;
		}

		.arial{
			font-size: 6vw;
			line-height: 8vw;
		}

		.colorOctBlock{
			font-size: 2.5vw;
			padding-bottom: 2%;
			padding-left: 2%;
			padding-top: 25%;
			width: 25%;
		}

		#odWireVis{
			background-image: url(../images/octDotsVis.jpg);
			padding-top: 102%;
		}

		.sum{
			margin-bottom: 7.142857142857142%;
		}
	/**/
/**/
}

/* TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 768px) and (max-width: 1024px){

	/* HERO SECTION ////////// */
		.octDotsBg{
			background-image: url(../images/tablet/octDotsbg_t.jpg);
		}

		.mockUpDots{
			background-image: url(../images/tablet/octDotsmockup_t.png);
			margin-top: 18%;
			padding-top: 33.055555555555556%;
			position: relative;
			width: 48.333333333333333%;
			z-index: 1;
		}

	/* CASE STUDY ////////// */
		.procPrev{
			width: 100%;
		}

		.octoid{
			margin-bottom: 3.333333333333333%;
			padding-top: 5.555555555555555%;
			width: 48.333333333333333%;
		}

		.arial{
			font-size: 3vw;
			line-height: 4vw;
		}

		.colorOctBlock{
			font-size: 1.25vw;
			padding-bottom: 2%;
			padding-left: 2%;
			padding-top: 25%;
			width: 25%;
		}

		#odWireVis{
			background-image: url(../images/octDotsVis.jpg);
			padding-top: 102%;
		}
	/**/
/**/
}

/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 1025px){

	/* HERO SECTION ////////// */
		.octDotsBg{
			background-image: url(../images/desktop/octDotsbg_d.jpg);
		}

		.base{
			margin-left: 8.588957055214724%;
			padding-top: 15.337423312883436%;
			position: relative;
			width: 39.775051124744376%;
			z-index: 2;
		}

		.mockUpDots{
			background-image: url(../images/desktop/octDotsmockup_d.png);
			margin-top: 18%;
			padding-top: 32.924335378323108%;
			position: relative;
			width: 42.740286298568507%;
			z-index: 1;
		}

	/* CASE STUDY ////////// */
		.procPrev{
			width: 100%;
		}

		.octoid{
			margin-bottom: 3.067484662576687%;
			padding-top: 4.9079754601227%;
			width: 48%;
		}

		.arial{
			font-size: 2.5vw;
			line-height: 3.5vw;
		}

		.colorOctBlock{
			font-size: 1vw;
			padding-bottom: 2%;
			padding-left: 2%;
			padding-top: 25%;
			width: 25%;
		}

		#odWireVis{
			background-image: url(../images/octDotsVis.jpg);
			padding-top: 102%;
		}
	/**/
/**/
}