body {
	font-family: urw-form, helvetica, arial, sans-serif;
	background-color: rgb(235, 235, 235);
	color: rgb(56, 61, 68);
}

img	{
	max-width: 100%;
}

video {
	max-width: 100%;
	height: auto;
}

/* TYPOGRAPHY */

h1, h2, h3, h4, h5, h6 {
	font-family: urw-form, helvetica, arial, sans-serif;
	line-height: 120%;
	margin-bottom: 16px;
}

h1 {
  font-size: 48px;
  font-weight: 600;
  margin-bottom: 15px;
}

h2 {
  font-size: 40px;
  font-weight: 500;
}

h3 {
  font-size: 33px;
  font-weight: 500;
}

h4 {
  font-size: 28px;
  font-weight: 500;
}

h5 {
  font-size: 24px;
  font-weight: 500;
}

h6 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 8px;
}

.label {
	font-family: urw-form, helvetica, arial, sans-serif;
	font-size: 18px;
  font-weight: 600;
  letter-spacing: 0px;
  line-height: 132%;
}

.paragraph-large {
  font-size: 18px;
  font-weight: 400;
  line-height: 150%;
}

p {
  font-size: 16px;
  font-weight: 400;
  line-height: 147%;
  margin-bottom: 12px;
}

.bullet-list {
	font-size: 16px;
  font-weight: 400;
  line-height: 147%;
  list-style-type: disc;
  margin-left: 14px;
}

.bullet-list li {
	margin-bottom: 2%;
}

.caption {
	font-size: 15px;
}

.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-heavy {
  font-weight: 600;
}

.center {
  text-align: center;
}

.right {
	float: right;
}

@media only screen and (max-width: 480px) {

h1 {
	font-size: 42px;
}

h2 {
  font-size: 34px;
}

H3 {
	font-size: 28px;
}

h4 {
 font-size: 24px;
}

h5 {
 font-size: 20px;
}

h6 {
	font-size: 18px;
}

.paragraph-large {
  font-size: 16px;
}

p {
 font-size: 14px;
}

.bullet-list {
	font-size: 14px;
}

.caption {
	font-size: 13px;
}

}

/*Global styles*/

header {
	padding-top: 8%;
	margin-bottom: -20%;
	padding-bottom: 25%;
}

header h1 {
	text-align: center;
	margin-bottom: 5%;
}

header h4 {
	font-weight: 300;
	font-size: 20px;
	line-height: 30px;
}

section {
	padding-top: 10%;
}

.intro {
	padding-bottom: 3%;
}

.btn {
	padding: 12px 35px;
	background-color: rgba(246, 188, 47);
	border: 2px solid rgba(246, 188, 47);
	border-radius: 23px;
  color: rgb(0, 0, 0);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  font-family: urw-form, helvetica, arial, sans-serif;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  display: inline-block;
}

.btn:hover {
	background-color: rgba(194, 140, 35);
	border: 2px solid rgba(255, 195, 49);
}

.btn-secondary {
	padding: 12px 35px;
	border: 2px solid rgb(255, 255, 255);
	border-radius: 23px;
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  font-family: urw-form, helvetica, arial, sans-serif;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.btn-secondary:hover {
	background-color: rgba(255, 255, 255);
	color: rgb(0, 0, 0);
}

.shadow {
	-webkit-box-shadow: 1px 2px 4px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 1px 2px 4px 0px rgba(0,0,0,0.2);
	box-shadow: 1px 2px 4px 0px rgba(0,0,0,0.2);
}

.corners {
	border-radius: 12px;
}

.extra-padding-top {
	padding-top: 3%;
}

.extra-padding-bottom {
	padding-bottom: 3%;
}

.extra-copy-padding-right {
	padding-right: 50px;
}

.extra-copy-padding-left {
	padding-left: 50px;
}

.extra-copy-padding-bottom {
	padding-bottom: 2%;
}

.more-padding-bottom {
	padding-bottom: 6%;
}

@media only screen and (max-width: 1200px) {

header {
	padding-top: 12%;
}

#iphone-3up {
	margin-top: 5%;
}

}

@media only screen and (max-width: 767px) { 

header {
	padding-top: 14%;
}

header h4 {
	margin-bottom: 24px;
}

#iphone-3up img {
	max-width: 60%;
}

.extra-copy-padding-right {
	padding-right: inherit;
	padding-bottom: 20px;
}

}

@media only screen and (max-width: 500px) { 

header {
	padding-top: 20%;
}

#iphone-3up img {
	max-width: 70%;
}

}

footer {
	height: 50px;
	background-color: black;
	color: rgb(255, 255, 255);
}

footer ul {
	line-height: 48px;
	width: 222px;
	margin: 0 auto;
}

footer ul li {
	float: left;
	margin-right: 20px;
}

footer ul li a {
	text-decoration: none;
	color: rgb(255, 255, 255);
	font-family: urw-form, helvetica, arial, sans-serif;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 300;
}

footer ul li a:hover {
	text-decoration: underline;
}

/*Pager styles*/

#pager {
	height: 120px;
	background-color: rgb(85, 85, 85);
	color: rgb(255, 255, 255);
}

#pager-left, #pager-right {
	height: 120px;
	width: 50%;
	display: block;
	float: left;
}

#pager-left {
	border-right: 1px solid rgb(160, 160, 160);
	margin-right: -1px;
}

#pager-left:hover {
	border-right: none;
	margin-right: 0;
}

#pager h5 {
	letter-spacing: 3px;
	font-weight: 100;
}

#pager h6 {
	letter-spacing: 2px;
	font-weight: 100;
	text-transform: uppercase;
}

#pager-left img {
	margin-left: 10%;
}

#pager-right img {
	float: right;
	margin-right: 10%;
}

#pager a {
	color: rgb(255, 255, 255);
	text-decoration: none;
}

#pager-copy-left, #pager-copy-right {
	position: relative; 
	top: 50%; 
	transform: translateY(-50%);
}

#pager-copy-left {
	text-align: right;
	margin-right: 10%;
}

#pager-copy-right {
	margin-left: 10%;
}

.pager-uberUI:hover {
	background-image: url("../images/Prefooter_UberUI_1920.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.pager-goGet:hover {
	background-image: url("../images/Prefooter_GoGet_1920.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.pager-cvex:hover {
	background-image: url("../images/Prefooter_Cvex_1920.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.pager-sc:hover {
	background-image: url("../images/Prefooter_SC_1920.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.pager-lenovo:hover {
	background-image: url("../images/Prefooter_Lenovo_1920.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.pager-natGeo:hover {
	background-image: url("../images/Prefooter_NatGeo_1920.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.pager-mr:hover {
	background-image: url("../images/Prefooter_MR_1920.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.pager-minecraft:hover {
	background-image: url("../images/Prefooter_Minecraft_1920.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.pager-circle:hover {
	background-image: url("../images/Prefooter_Circle_1920.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.pager-hololens:hover {
	background-image: url("../images/Prefooter_Holo_1920.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.pager-upgrade:hover {
	background-image: url("../images/Prefooter_Upgrade_1920.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.pager-dibble:hover {
	background-image: url("../images/Prefooter_Dibble_1920.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.pager-photography:hover {
	background-image: url("../images/Prefooter_Photography_1920.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

.pager-print:hover {
	background-image: url("../images/Prefooter_Print_1920.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}

@media only screen and (max-width: 1300px) {

.pager-uberUI:hover {
	background-image: url("../images/Prefooter_UberUI_1300.jpg");
}

.pager-goGet:hover {
	background-image: url("../images/Prefooter_GoGet_1300.jpg");
}

.pager-sc:hover {
	background-image: url("../images/Prefooter_SC_1300.jpg");
}

.pager-cvex:hover {
	background-image: url("../images/Prefooter_Cvex_1300.jpg");
}

.pager-lenovo:hover {
	background-image: url("../images/Prefooter_Lenovo_1300.jpg");
}

.pager-natGeo:hover {
	background-image: url("../images/Prefooter_NatGeo_1300.jpg");
}

.pager-mr:hover {
	background-image: url("../images/Prefooter_MR_1300.jpg");
}

.pager-minecraft:hover {
	background-image: url("../images/Prefooter_Minecraft_1300.jpg");
}

.pager-circle:hover {
	background-image: url("../images/Prefooter_Circle_1300.jpg");
}

.pager-hololens:hover {
	background-image: url("../images/Prefooter_Holo_1300.jpg");
}

.pager-upgrade:hover {
	background-image: url("../images/Prefooter_Upgrade_1300.jpg");
}

.pager-dibble:hover {
	background-image: url("../images/Prefooter_Dibble_1300.jpg");
}

.pager-photography:hover {
	background-image: url("../images/Prefooter_Photography_1300.jpg");
}

.pager-print:hover {
	background-image: url("../images/Prefooter_Print_1300.jpg");
}

}

@media only screen and (max-width: 920px) {

.pager-uberUI {
	background-image: url("../images/Prefooter_UberUI_920.jpg");
}

.pager-uberUI:hover {
	background-image: url("../images/Prefooter_UberUI_920.jpg");
}

.pager-goGet {
	background-image: url("../images/Prefooter_GoGet_920.jpg");
}

.pager-goGet:hover {
	background-image: url("../images/Prefooter_GoGet_920.jpg");
}

.pager-sc {
	background-image: url("../images/Prefooter_SC_920.jpg");
}

.pager-sc:hover {
	background-image: url("../images/Prefooter_SC_920.jpg");
}

.pager-cvex {
	background-image: url("../images/Prefooter_Cvex_920.jpg");
}

.pager-cvex:hover {
	background-image: url("../images/Prefooter_Cvex_920.jpg");
}

.pager-lenovo {
	background-image: url("../images/Prefooter_Lenovo_920.jpg");
}

.pager-lenovo:hover {
	background-image: url("../images/Prefooter_Lenovo_920.jpg");
}

.pager-natGeo {
	background-image: url("../images/Prefooter_NatGeo_920.jpg");
}

.pager-natGeo:hover {
	background-image: url("../images/Prefooter_NatGeo_920.jpg");
}

.pager-mr {
	background-image: url("../images/Prefooter_MR_920.jpg");
}

.pager-mr:hover {
	background-image: url("../images/Prefooter_MR_920.jpg");
}

.pager-minecraft {
	background-image: url("../images/Prefooter_Minecraft_920.jpg");
}

.pager-minecraft:hover {
	background-image: url("../images/Prefooter_Minecraft_920.jpg");
}

.pager-circle {
	background-image: url("../images/Prefooter_Circle_920.jpg");
}

.pager-circle:hover {
	background-image: url("../images/Prefooter_Circle_920.jpg");
}

.pager-hololens {
	background-image: url("../images/Prefooter_Holo_920.jpg");
}

.pager-hololens:hover {
	background-image: url("../images/Prefooter_Holo_920.jpg");
}

.pager-upgrade {
	background-image: url("../images/Prefooter_Upgrade_920.jpg");
}

.pager-upgrade:hover {
	background-image: url("../images/Prefooter_Upgrade_920.jpg");
}

.pager-dibble {
	background-image: url("../images/Prefooter_Dibble_920.jpg");
}

.pager-dibble:hover {
	background-image: url("../images/Prefooter_Dibble_920.jpg");
}

.pager-photography {
	background-image: url("../images/Prefooter_Photography_920.jpg");
}

.pager-photography:hover {
	background-image: url("../images/Prefooter_Photography_920.jpg");
}

.pager-print {
	background-image: url("../images/Prefooter_Print_920.jpg");
}

.pager-print:hover {
	background-image: url("../images/Prefooter_Print_920.jpg");
}

}

@media only screen and (max-width: 630px) { 

#pager-left:hover {
	border-right: 1px solid rgb(160, 160, 160);
	margin-right: -1px;
}

.pager-uberUI {
	background-image: none;
}

.pager-uberUI:hover {
	background-image: none;
}

.pager-goGet {
	background-image: none;
}

.pager-goGet:hover {
	background-image: none;
}

.pager-sc {
	background-image: none;
}

.pager-sc:hover {
	background-image: none;
}

.pager-cvex {
	background-image: none;
}

.pager-cvex:hover {
	background-image: none;
}

.pager-lenovo {
	background-image: none;
}

.pager-lenovo:hover {
	background-image: none;
}

.pager-natGeo {
	background-image: none;
}

.pager-natGeo:hover {
	background-image: none;
}

.pager-mr {
	background-image: none;
}

.pager-mr:hover {
	background-image: none;
}

.pager-minecraft {
	background-image: none;
}

.pager-minecraft:hover {
	background-image: none;
}

.pager-circle {
	background-image: none;
}

.pager-circle:hover {
	background-image: none;
}

.pager-hololens {
	background-image: none;
}

.pager-hololens:hover {
	background-image: none;
}

.pager-upgrade {
	background-image: none;
}

.pager-upgrade:hover {
	background-image: none;
}

.pager-dibble {
	background-image: none;
}

.pager-dibble:hover {
	background-image: none;
}

.pager-photography {
	background-image: none;
}

.pager-photography:hover {
	background-image: none;
}

.pager-print {
	background-image: none;
}

.pager-print:hover {
	background-image: none;
}

}

@media only screen and (max-width: 767px) { 

#pager h5 {
	font-size: 1.1rem;
}

#pager-copy-right {
	margin-left: 5%;
}

#pager-copy-left {
	margin-right: 5%;
}

#pager-left img {
	margin-left: 6%;
	width: 11px;
}

#pager-right img {
	margin-right: 6%;
	width: 11px;
}

}

@media only screen and (max-width: 560px) {
#pager h5 {
	font-size: 13px;
}

#pager h6 {
	font-size: 10px;
}

}

/*Homepage Styles*/

.case-back-btn {
	position: absolute;
	display: flex;
	align-items: center;
	left: 30px;
	top: 8px;
	height: 16px;
	padding: 12px 15px;
	border: 2px solid rgb(245, 245, 245);
	border-radius: 23px;
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  font-family: urw-form, helvetica, arial, sans-serif;
  z-index: 99999;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.case-back-btn:hover {
		background-color: rgb(245, 245, 245);
		color: rgb(0, 0, 0);
		border: 2px solid rgb(245, 245, 245);
}


#case-nav {
  background-color: rgba(0, 0, 0, 0.7);
  font-family: urw-form, helvetica, arial, sans-serif;
  font-size: 16px;
	letter-spacing: 1px;
	overflow: hidden;
  position: fixed;
  text-align: center;
  width: 100%;
  height: 60px;
  line-height: 60px;
  transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  z-index: 9999;
}

#case-nav-items {
  list-style: none;
  margin: 0 34px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 50px;
  white-space: nowrap
}

.case-nav-link {
  display: inline-block;
  margin: 0 -.11111em;
  padding: 0 20px
}

.case-nav-link a, #home-nav a {
	color: rgb(255, 255, 255);
	text-decoration: none;
	font-weight: 400;
}

.case-nav-link a:hover, #home-nav ul li a:hover {
    color: rgb(255, 181, 0);
}

@media only screen and (max-width: 1225px) {
	#case-nav {
		text-align: right;
	}
}

@media only screen and (max-width: 1100px) {
	#case-nav-items {
		margin-left: 170px;
	}
}

#home-nav {
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  left: 0;
  width: 100%;
  height: 60px;
  transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  z-index: 9999;
  font-family: urw-form, helvetica, arial, sans-serif;
}


#home-nav ul {
	float: right;
	position: relative;
	/*
	text-align: center;
	
	transform: translate(0px, -50%);*/
	
}

#home-nav ul li {
	display: inline-block;
}

#home-nav ul li a {
	color: rgb(255, 255, 255);
	font-weight: 400;
}

.default {
  top: 0;
}
.fixed {
  top: -60px;
}

#logo {
	color: white;
	font-size: 26px;
	line-height: normal;
	letter-spacing: 1px;
	position: relative;
	top: 12px;
	left: 50px;
}

#home-nav ul #logo::after {
	height: 0;
}

#main-links {
	font-size: 16px;
	letter-spacing: 1px;
	position: relative;
	right: 175px;
	top: 9px;
}

#main-links li {
	padding: 8px;
	margin-right: 10px;
}

#social-icons {
	right: 50px;
	top: 8px;
}

#social-icons li {
	padding: 10px;
}

#social-icons img {
	height: 16px;
}

#social-icons li a:hover {
	opacity: 0.7;
}

#hero{
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 400px, rgb(0, 0, 0) 555px), url(../images/hero_desktop.jpg);
  background-size:cover;
  background-position: center top;
  position:relative;
  height:70vh;
}

.hero-copy{
  position: absolute;
  top: 53%;
  left: 10%;
  width: 565px;
  color: rgb(255, 255, 255);
  -ms-transform: translate(0,-50%); /* IE 9 */
  -webkit-transform: translate(0,-50%); /* Safari */
  transform: translate(0,-50%);  
}

.hero-copy h1 {
	font-size: 58px;
	line-height: 110%;
}

.hero-copy h5 { 
	font-weight: 300;
	margin-bottom: 20px;
}

.hero-copy .btn {
	padding: 13px 30px;
}

#hero-cta{
  display: inline-block;
  padding: 19px 28px;
  margin: 10px 0;
  position: relative;
  color: rgb(255, 255, 255);
  background-color: #fc9f41;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#hero-cta:hover{
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  -o-transform: translateX(10px);
  transform: translateX(10px);
}

#recent-work {
	background-color: rgb(0, 0, 0);
	padding-top: 1%;
	padding-bottom: 6%;
}

#recent-work .grid-pad{
	padding-left: 40px;
	padding-top: 40px;
}

#recent-work .col-1-2, #about .col-1-2 {
	padding-right: 40px;
}

#recent-work a {
	text-decoration: none;
	letter-spacing: 2px;
	font-weight: 600;
}

#recent-work h2 {
	text-align: center;
	color: rgb(255, 255, 255);
}

.cta-button {
	display: inline-block;
	padding: 16px 20px;
	margin: 20px 0;
	position: relative;
	text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
	border: 2px solid rgb(250, 250, 250);
	border-radius: 28px;
	font-family: urw-form, helvetica, arial, sans-serif;
  	color: rgb(255, 255, 255);
  	overflow: hidden;
  	transform: translateY(0%);
  	-webkit-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
}

.cta-button:before {
  	content: "";
  	z-index: -1;
  	position: absolute;
  	width: 100%;
  	height: 100%;
  	top: 0;
  	left: -100%;
  	background-color: rgb(250, 250, 250);
  	-webkit-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
}

.cta-button:hover {
  	color: rgb(85, 85, 85);
  	text-shadow: none;
}

.cta-button:hover:before {
  	left: 0;
}

.card-home {
	background-color: rgb(39, 40, 46);
	color: rgb(255, 255, 255);
	padding: 30px;
	border: 1px solid rgb(61, 68, 80);
	border-radius: 24px;
}

.card-home img {
	border-radius: 16px;
}

.card-home h4 {
	margin-bottom: 8px;
}

.card-home h6 {
	font-weight: 200;
	padding-top: 40px;
}

.card-home a {
	margin-top: 30px;
}

img.lock-icon {
	border-radius: 0px;
	padding-right: 8px;
}

#about {
  background-image: url(../images/about.jpg);
  background-size:contain;
  background-position: 100% 0%;
  background-repeat: no-repeat;
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  padding-bottom: 6%;
}

#about h5 {
	margin-top: 30px;
}

.button-group {
	display: flex;
	margin-top: 35px;
}

.button-group a {
	margin-right: 20px;
}

@media only screen and (max-width: 1400px) {

#main-links {
	right: 130px;
}

#hero {
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 400px, rgb(0, 0, 0) 555px), url(../images/hero_tablet.jpg);
}

}

@media only screen and (max-width: 1080px) {

.card-home {
	padding: 24px;
}

#recent-work .col-1-1 {
	margin-top: 30px;
}

}

@media only screen and (max-width: 767px) {

#main-links {
	right: 70px;
}

#social-icons {
	right: 30px;
}

#hero {
	background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 400px, rgb(0, 0, 0) 555px), url(../images/hero_mobile.jpg);
}

.hero-copy {
	text-align: left;
	top: 70%;
	left: 10%;
	width: 475px;
}

.hero-copy h1 {
	font-size: 48px;
}

#recent-work .grid {
	padding-right: 0;
	margin-top: -10px;
}

#recent-work .grid-pad {
	padding-top: 0px;
}

#recent-work .col-1-2 {
	margin-top: 25px;
}

#about .col-4-12 {
	margin-right: 20px;
	margin-left: 20px;
}

#about .col-5-12 {
	margin-right: 25px;
	margin-left: 20px;
}

}

@media only screen and (max-width: 580px) {

#logo {
	left: 20px;
}

#social-icons {
	display: none;
}

#main-links {
	right: 30px;
}

.hero-copy {
	left: 5%;
	width: 390px;
}

.hero-copy h1 {
	font-size: 40px;
}

}

@media only screen and (max-width: 450px) {

#main-links {
	right: 2px;
}

.hero-copy {
	text-align: center;
	left: auto;
	width: 100%;
}

.hero-copy h1 {
	font-size: 36px;

}

.card-home {
	padding: 20px;
}

}

@media only screen and (max-width: 375px) {

#home-nav ul li {
	padding: 4px;
}

#logo {
	font-size: 24px;
}

.main-links {
	font-size: 14px;
}

}


@media only screen and (max-width: 540px) {

.cta-button {
	padding: 12px;
	color: rgb(85, 85, 85);
	text-shadow: none;
	font-size: 13px;
}

.cta-button:before {
	left: 0;
}

}


/*Components*/
.fiftyfifty-first {
	padding-top: 5%;
}

.fiftyfifty {
	padding-top: 7%;
}

#stats-module {
	text-align: center;
  background-size: cover;
  padding: 8% 0;
  margin-top: 5%;
}

#stats-module h2 {
	color: rgb(255, 255, 255);
}

#three-up-stats {
	display: flex;
	justify-content: center;
	align-items: center;	
}

.stat {
  width: 24%;
  margin: 3%;
  padding: 2%;
  display: inline-block;
  vertical-align:top;
  border-radius: 10px;
  background-color: rgb(50, 50, 50);
  text-align: left;
  -webkit-box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.2); 
	box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.2);
	color: rgb(255, 255, 255);
}

.stat:nth-child(1) {
	margin-left: 0;
}

.stat:nth-child(2) {
	margin: 0;
}

.stat:nth-child(3) {
	margin-right: 0;
}

.stat img {
	width: 24px;
	padding-bottom: 2%;
}

#three-up-stats-mini {
	display: flex;
	justify-content: center;
	align-items: center;	
	border-radius: 16px;
  -webkit-box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.2); 
	box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.2);
	padding: 1% 0;
	margin-top: 5%;
}

.stat-mini {
  width: 26%;
  margin: 3%;
  display: inline-block;
  vertical-align:top;
	text-align: center;
}

.stat-mini h5 {
	margin-bottom: 5px;
	font-weight: 600;
}

.stat-mini p {
	font-weight: 300;
}

.stat-mini:nth-child(1) {
	margin-left: 0;
}

.stat-mini:nth-child(2) {
	margin: 0;
}

.stat-mini:nth-child(3) {
	margin-right: 0;
}

#login-page {
	background-color: rgb(0, 0, 0);
}

#login {
	display: flex;
	justify-content: center;
}

#login form {
	background-color: rgb(39, 40, 46);
  color: rgb(255, 255, 255);
  padding: 60px;
  border: 1px solid rgb(61, 68, 80);
  border-radius: 24px;
  text-align: center;
  width: 300px;
}

#login form img {
	display: block;
	margin: 0 auto;
	padding-bottom: 8px;
}

#login form p {
	font-family: urw-form, helvetica, arial, sans-serif;
  letter-spacing: 1px;
	font-size: 22px;
	font-weight: 500;
  line-height: 32px;
  margin-bottom: 20px;
}

#login form input {
	width: 100%;
	height: 32px;
	border: 2px solid rgb(171, 175, 201);
	border-radius: 4px;
	background-color: rgb(106, 109, 125);
	color: rgb(255, 255, 255);
	font-size: 16px;
	margin-bottom: 30px;
}

#login form input:active {
  border: 2px solid rgb(140, 156, 255);
}

#login form input:focus {
  border: 2px solid rgb(140, 156, 255);
}

#login form input:focus-visible {
  border: 2px solid rgb(140, 156, 255);
  outline: none;
}

#login form button {
	width: 100%;
	margin-bottom: 15px;
}

@media only screen and (max-width: 767px) { 

#three-up-stats-mini {
	text-align: center;
}

#three-up-stats, #three-up-stats-mini {
	display: block;
}

.stat, .stat-mini {
	padding: 4%;
	width: 50%;
}

.stat:nth-child(1), .stat-mini:nth-child(1) {
	margin: 3% 0%;
}

.stat:nth-child(2), .stat-mini:nth-child(2) {
	margin: 3% 0%;
}

.stat:nth-child(3), .stat-mini:nth-child(3) {
	margin: 3% 0%;
}

}

@media only screen and (max-width: 550px) { 

#goGet-social {
	max-width: 55%;
	margin: 0 auto;
	display: block;
}

.stat {
	width: 75%;
}

}

/*Thriveworks Styles*/

#tw-body {
	background-color: rgb(238, 232, 219);
}

#tw-header {
	background-color: rgb(255, 232, 179);
	color: rgb(23, 28, 33);
}

#tw-logo {
	width: 230px;
	display: block;
	margin: 0 auto 2%;
}

.tw-copy {
	color: rgb(7, 89, 66);
}

#tw-illy {
	position: relative;
	width: 27%;
	bottom: 52px;
}

#tw-solution {
	background-color: rgb(255, 232, 179);
	padding-top: 4%;
	margin-top: 11%;
}

#tw-designs {
	padding: 6%;
}

.tw-stats-mini {
color: rgb(255, 242, 214);
background-color: rgb(7, 89, 66);
}

.tw-stats-mini .stat-mini h5 {
	color: rgb(255, 213, 108);
}

.tw-stats {
	background-image:url(../portfolio/TW_Stats.png);
	background-position: center;
	margin-top: 0 !important;
}

.tw-stats .stat {
	color: rgb(255, 255, 255);
	background-color: rgb(7, 89, 66);
}

#tw-next-steps {
	padding: 4% 6% 6% 6%;
	background-color: rgb(255, 232, 179);
	background-image:url(../portfolio/TW_Next.png);
	background-position: right bottom;
	background-size: 100%;
	background-repeat: no-repeat;
}

#tw-next-steps p {
	color: rgb(0, 0, 0);
}

@media only screen and (max-width: 1350px) {

#tw-illy {
	bottom: 36px;
}

}

@media only screen and (max-width: 850px) {

#tw-illy {
	bottom: 24px;
}

}

@media only screen and (max-width: 767px) {

#tw-next-steps {
	padding: 4% 6% 20% 6%;
}

}

@media only screen and (max-width: 550px) {

#tw-illy {
	display: none;
}

}

/*Bloc Styles*/

#bloc-header {
	background-color: rgb(26, 83, 90);
	color: rgb(255, 255, 255);
}

.bloc-copy {
	color: rgb(26, 83, 90);
}

#bloc-dark-section {
	background-color: rgb(31, 31, 31);
	padding-bottom: 10%;
	margin-top: -5px;
}

#bloc-dark-section h2, #bloc-dark-section h4 {
	color: rgb(1, 184, 202);
}

#bloc-dark-section p {
	color: rgb(255, 255, 255);
}

.bloc-stats-mini {
color: rgb(165, 227, 236);
background-color: rgb(1, 105, 116);
border: 1px solid rgb(4, 127, 140);
}

.bloc-stats-mini .stat-mini h5 {
	color: rgb(255, 255, 255);
}

.bloc-stats {
	background-image:url(../portfolio/Bloc_Stats.png);
	background-position: center;
}

.bloc-stats .stat {
	color: rgb(255, 255, 255);
	background-color: rgb(31, 31, 31);
}

/*Go Get Styles*/

#goGet-body {
	background-color: rgb(247, 247, 247);	
}

#goGet-header {
	background-color: rgb(255, 213, 136);
	color: rgb(0, 0, 0);
}

#Uber-Logo {
	width: 50px;
	display: block;
	margin: 0 auto 1%;
}

.goGet-video-wrapper {
	height: 0;
	width: 76%;
	padding-bottom: 118%;
	background-image: url("../portfolio/GG_Webpage.png");
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
	left: 12%;
}

.goGet-video-wrapper video {
	position: absolute;
	width: 54%;
	left: 21.4%;
	top: 8.4%;
}

.goGet-copy {
	color: rgb(159, 100, 2);
}

#goGet-section {
	background-color: rgb(235, 235, 235);
}

#goGet-first-section {
	background-color: rgb(235, 235, 235);
	margin-top: -12.3%;
	position: relative;
}

#goGet-last-section {
	background-color: rgb(235, 235, 235);
	padding-bottom: 5%;
}

#goGet-dark-section {
	background-color: rgb(0, 0, 0);
	padding-bottom: 10%;
	margin-top: -5px;
}

#goGet-dark-section h2, #goGet-dark-section h5 {
	color: rgb(246, 188, 47);
}

#goGet-dark-section p {
	color: rgb(255, 255, 255);
}

#goGet-dark-section .fiftyfifty-first {
	padding-bottom: 3%;
}

#goGet-trail-1 {
	background-color: rgb(249, 207, 105);
	height: 30px;
}

#goGet-trail-2 {
	background-color: rgb(251, 226, 163);
	height: 30px;
}

#goGet-trail-3 {
	background-color: rgb(253, 242, 213);
	height: 30px;
}

.goGet-mood {
	max-width: 76%;
	float: none;
	margin: 0 auto;
	padding-top: 4%;
}

#goGet-social {
	max-width: 75%;
}

.goGet-stats {
	background-image:url(../portfolio/GG_Insights.jpg);
}

.goGet-stats-mini {
color: rgb(159, 100, 2);
background-color: rgb(251, 229, 182);
border: 1px solid rgb(230, 189, 120);
}

.goGet-stats-mini .stat-mini h5 {
	color: rgb(107, 65, 0);
}

#three-up-stats-mini.goGet-stats-mini {
	box-shadow: none;
}

@media only screen and (max-width: 550px) { 

#goGet-social {
	max-width: 55%;
	margin: 0 auto;
	display: block;
}

}

/*Uber Product UI Styles*/

#uber-product-header {
	background-color: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
}

.uber-product-video-wrapper {
	height: 0;
	width: 100%;
	padding-bottom: 47%;
	position: relative;
}

.uber-product-video-wrapper video {
	position: relative;
	width: 83%;
	left: 8.5%;
	top: 14%;
}

.uber-product-copy {
	color: rgb(0, 0, 0);
}

.uber-product-stats-mini {
color: rgb(159, 159, 159);
background-color: rgb(31, 31, 35);
border: 1px solid rgb(69, 69, 69);
}

.uber-product-stats-mini .stat-mini h5 {
	color: rgb(255, 255, 255);
}

.uber-product-stats {
	background-image:url(../portfolio/UberProduct_Stats.png);
	background-position: center;
}

.uber-product-stats .stat {
	color: rgb(0, 0, 0);
	background-color: rgb(220, 220, 220);
}

/*Cvex Platform Styles*/

#cvex-header {
	background-color: rgb(46, 55, 86);
	color: rgb(255, 255, 255);
}

#cvex-logo {
	width: 45px;
	display: block;
	margin: 0 auto 0.7%;
}

.cvex-copy {
	color: rgb(115, 99, 227);
}

.cvex-alert {
	background-color: rgb(251, 240, 213);
	border: 1px solid rgb(240, 197, 87);
	padding: 30px;
	border-radius: 16px;
}

.cvex-alert img {
	width: 28px;
	position: relative;
	transform: translateY(15%);
	padding-right: 8px;
}

.cvex-alert p {
	padding-top: 4px;
}

#cvex-dark-section {
	background-color: rgb(26, 31, 45);
	padding-bottom: 10%;
	margin-top: 10%;
}

#cvex-dark-section h2, #cvex-dark-section h4 {
	color: rgb(240, 150, 87);
}

#cvex-dark-section p {
	color: rgb(255, 255, 255);
}

#cvex-designs h5 {
	padding-bottom: 20px;
}

#cvex-designs img {
	margin-bottom: 10%;
}

.cvex-stats-mini {
color: rgb(200, 206, 223);
background-color: rgb(32, 41, 66);
border: 1px solid rgb(72, 84, 122);
}

.cvex-stats-mini .stat-mini h5 {
	color: rgb(255, 255, 255);
}

.cvex-stats {
	background-image:url(../portfolio/Cvex_Stats.jpg);
	background-position: top;
}

.cvex-stats .stat {
	color: rgb(255, 255, 255);
	background-color: rgb(24, 32, 55);
}

#cvex-star {
	width: 28px;
}

#cvex-bat {
	width: 28px;
}

/*SureCritic Platform Styles*/

#sc-header {
	background-color: rgb(3, 85, 131);
	color: rgb(255, 255, 255);
}

#sc-logo {
	width: 42px;
	display: block;
	margin: 0 auto 0.7%;
}

.sc-copy {
	color: rgb(6, 125, 186);
}

.sc-copy-dark {
	color: rgb(255, 255, 255);
}

#sc-dark-bg {
	background-color: rgb(21, 59, 89);
	margin-top: -5px;
}

.sc-dark-bg-lower {
	background-color: rgb(21, 59, 89);
	margin-bottom: -400px;
	padding-bottom: 400px;
}

.sc-stats-mini {
color: rgb(225, 244, 254);
background-color: rgb(7, 108, 158);
border: 1px solid rgb(22, 134, 190);
}

.sc-stats-mini .stat-mini h5 {
	color: rgb(255, 255, 255);
}

.sc-stats {
	background-image:url(../portfolio/SC_Stats.jpg);
	background-position: center;
}

.sc-stats .stat {
	color: rgb(255, 255, 255);
	background-color: rgb(2, 50, 74);
}


@media only screen and (max-width: 1690px) {

.sc-dark-bg-lower {
	margin-bottom: -340px;
	padding-bottom: 340px;
}

}

@media only screen and (max-width: 1380px) {

.sc-dark-bg-lower {
	margin-bottom: -280px;
	padding-bottom: 280px;
}

}

@media only screen and (max-width: 1130px) {

.sc-dark-bg-lower {
	margin-bottom: -225px;
	padding-bottom: 225px;
}

}

@media only screen and (max-width: 920px) {

.sc-dark-bg-lower {
	margin-bottom: -180px;
	padding-bottom: 180px;
}

}

/*Lenovo Styles*/

#lenovo-header {
	background-color: rgb(62, 123, 188);
	color: rgb(255, 255, 255);
}

#lenovo-logo {
	width: 105px;
	display: block;
	margin: 0 auto 1%;
}

.lenovo-copy {
	color: rgb(62, 123, 188);
}

/*#lenovo-components {
	background: url("../portfolio/Lenovo_Components_Desktop.jpg") no-repeat;
	background-size: cover;
	width: 100%;
	height: 840px;
	color: rgb(255, 255, 255);
}*/

#lenovo-mobile {
	margin-bottom: -5px;
	position: relative;
}

#lenovo-mobile-copy {
	position: absolute;
	top: 15%;
	right: 25%;
	z-index: 9999;
}

@media only screen and (max-width: 1173px) {
#lenovo-mobile-copy {
	position: absolute;
	top: 15%;
	right: 8%;
}

#lenovo-mobile .col-4-12 {
width: 50%;	
}

}

@media only screen and (max-width: 992px) {
#lenovo-mobile-copy {
	top: 10%;
}
}

@media only screen and (max-width: 767px) {
#lenovo-mobile-copy {
	display: none;
	width: 0;
	height: 0;
}
}

/*NatGeo Styles*/

#natGeo-header {
	background-color: rgb(82, 130, 66);
	color: rgb(255, 255, 255);
}

#natGeo-logo {
	width: 115px;
	display: block;
	margin: 0 auto 2%;
}

.natGeo-copy {
	color: rgb(82, 130, 66);
}

#natGeo-lifestyle {
	padding-top: 4%;
}

#natGeo-footer {
	padding-top: 7%;
	margin-bottom: -5px;
}

/*Mixed Reality Styles*/

#mr-header {
	background-color: rgb(17, 101, 120);
	color: rgb(255, 255, 255);
}

#mr-logo {
	width: 105px;
	display: block;
	margin: 0 auto 2%;
}

.mr-copy {
	color: rgb(17, 101, 120);
}

.mr-row2 {
	padding-top: 20px;
}

#mr-mobile {
	background-color: rgb(106, 158, 141);
	color: white; 
	height: auto;
	margin-top: 10%;
}

.mr-video-wrapper {
	height: 0;
	width: 100%;
	padding-bottom: 56.25%;
	background-image: url("../portfolio/macBook.png");
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
}


.mr-video-wrapper video {
	position: absolute;
	width: 69.1%;
	left: 15%;
	top: 14%;
}


/*Minecraft Styles*/

#minecraft-header {
	background-color: rgb(120, 93, 185);
	color: rgb(255, 255, 255);
}

#minecraft-Logo {
	width: 115px;
	display: block;
	margin: 0 auto 1%;
}

.minecraft-copy {
	color: rgb(120, 93, 185);
}

#minecraft-elements {
	position: relative;
}

#minecraft-elements h3, #minecraft-elements p {
	padding-left: 10%;
} 

#minecraft-mobile {
	background-color: rgb(122, 187, 85);
	color: white; 
	height: auto; 
	margin-top: -186px;
}

#chicken-desktop {
	position: relative;
	bottom: 70px;
	right: 30px;
}

#chicken-tablet {
	display: none;
}

#chicken-mobile {
	display: none;
}


#texture-tablet {
	display: none;
}

#texture-mobile {
	display: none;
}

#minecraft-mobile h2 {
	padding-bottom: 75px;	
}

@media only screen and (max-width: 1360px) {

#chicken-desktop {
	display: none;
}

#chicken-tablet {
	position: relative;
	display: block;
	right: 30px;
	bottom: 185px;
}

#texture-desktop {
	display: none;
} 

#texture-tablet {
	display: block;
	position: absolute;
	bottom: 271px;
	right: 0;
}

#minecraft-mobile {
	margin-top: -271px;
}
	
}

@media only screen and (max-width: 1100px) {

#texture-tablet {
	display: none;
}

#texture-mobile {
	display: block;
	position: absolute;
	bottom: 271px;
	right: 0;
}
}

@media only screen and (max-width: 900px) {

#texture-mobile {
	display: none;
}

#chicken-tablet {
	display: none;
}

#chicken-mobile {
	position: relative;
	display: block;
	right: 30px;
	bottom: 105px;
}
#minecraft-mobile {
	margin-top: -150px;
}
}

@media only screen and (max-width: 767px) {

#minecraft-mobile {
	margin-top: 10%;
}

#minecraft-elements h3, #minecraft-elements p {
	padding-left: 0;
} 

}

/*HoloLens Styles*/

#holo-header {
	background-color: rgb(47, 47, 47);
	color: rgb(255, 255, 255);
}

#holo-headline {
	font-size: 14vw;
	font-weight: 800;
	left: -1vw;
	line-height: 10vw;
	letter-spacing: 5px;
	position: absolute;
	color: rgb(255, 255, 255);
}

#holo-mobile {
	background-color: rgb(172, 172, 172);
	color: white; 
	height: auto;
	margin-top: 10%;
}

#holo-mobile h2 {
	padding-bottom: 75px;
}

#holo-tablet {
	margin-left: -5%;
}

.holo-copy {
	color: rgb(47, 47, 47);
}

@media only screen and (max-width: 767px) {

#holo-mobile h2 {
	padding-bottom: 30px;
}

}

/*Dibble Styles*/

#dibble-header {
	background-color: rgb(82, 60, 107);
	color: rgb(255, 255, 255);
	padding-top: 25%;
}

#dibble-headline {
	font-size: 14vw;
	font-weight: 800;
	left: -1vw;
	top: -0.5vw;
	line-height: 11vw;
	letter-spacing: 5px;
	position: absolute;
	color: rgb(255, 255, 255);
}

#dibble-mobile {
	background-color: rgb(82, 60, 107);
	color: rgb(255, 255, 255);
	height: auto;
	margin-top: 10%;
}

/*Upgrade Styles*/

#upgrade-header {
	background-color: rgb(70, 70, 70);
	color: rgb(255, 255, 255);
	padding-top: 22%;
}

#upgrade-headline {
	font-size: 11vw;
	font-weight: 800;
	left: -1vw;
	top: -0.6vw;
	line-height: 9.2vw;
	letter-spacing: 5px;
	position: absolute;
	color: rgb(255, 255, 255);
}

#upgrade-mobile {
	background-color: rgb(0, 96, 172);
	color: rgb(255, 255, 255);
	height: auto;
	margin-top: 10%;
}

/*Circle Styles*/

#circle-header {
	background-color: rgb(17, 114, 167);
	color: rgb(255, 255, 255);
}

#circle-headline {
	font-size: 16vw;
	font-weight: 800;
	left: -0.4vw;
	line-height: 11.4vw;
	letter-spacing: 5px;
	position: absolute;
	color: rgb(255, 255, 255);
}

#circle-hero {
	background-image: url("../portfolio/Circle_Home_Desktop.png");
	background-repeat: no-repeat;
	background-size: 3513px  1724px;
	min-height: 1724px;
	background-position: center top;
}

.circle-copy {
	color: rgb(0, 112, 169);
}

#circle-dashboard  {
	background: -webkit-linear-gradient(top, rgb(235, 235, 235) 38%,rgb(249, 249, 249) 38%,rgb(235, 235, 235) 100%); /* For Safari 5.1 to 6.0 */
	background: -moz-linear-gradient(top, rgb(235, 235, 235) 38%,rgb(249, 249, 249) 38%,rgb(235, 235, 235) 100%); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to bottom, rgb(235, 235, 235) 36%,rgb(249, 249, 249) 36%,rgb(235, 235, 235) 100%);
}

#circle-dashboard h3 {
	padding-top: 75%;
}

@media only screen and (max-width: 1400px) {

#circle-hero {
	background-image: url("../portfolio/Circle_Home_Tablet.png");
	background-repeat: no-repeat;
	background-size: 2000px 981px;
	min-height: 981px;
	background-position: center top;
}
}

@media only screen and (max-width: 960px) {

#circle-hero {
	background-image: url("../portfolio/Circle_Home_Mobile.png");
	background-repeat: no-repeat;
	background-size: 1400px  687px;
	min-height: 687px;
	background-position: center top;
}
}

@media only screen and (min-width: 600px) {

#circle-dashboard-copy-mobile {
	display: none;
}

}

@media only screen and (max-width: 600px) {
#circle-dashboard{
	background: none;
}

#circle-dashboard h3 {
	padding-top: 0;
}

#circle-dashboard-image {
	width: 70%;
	margin-left: 16%;
}

#circle-dashboard-copy-desktop {
	display: none;
}

#circle-dashboard-copy-mobile {
	display: block;
	margin-bottom: 7%;
}

}
/*Photography Styles*/
#photography-header {
	background-color: rgb(147, 76, 0);
	color: rgb(255, 255, 255);
}

#photography-headline {
	font-size: 11vw;
	font-weight: 800;
	left: -1vw;
	line-height: 8vw;
	letter-spacing: 5px;
	position: absolute;
	color: rgb(255, 255, 255);
}

#social-media {
	background-color: rgb(82, 38, 37);
	color: rgb(255, 255, 255);
}

#candy {
	background-color: rgb(19, 49, 70);
	color: rgb(255, 255, 255);
}

.photo-copy {
	padding-bottom: 3%;
}

/*Print Styles*/

#print-header {
	background-color: rgb(190, 87, 62);
	color: rgb(255, 255, 255);
}

#print-headline {
	font-size: 14vw;
	font-weight: 800;
	left: -1vw;
	line-height: 10vw;
	letter-spacing: 5px;
	position: absolute;
	color: rgb(255, 255, 255);
}

#print-work section {
	padding: 5% 0;
}

#print-work section h6 {
	margin-top: 6%;
	font-weight: 300;
}

#fluent, #sweet-gem, #oscar, #youth {
	color: rgb(255, 255, 255);
}

#camera, #bike, #artclub {
	color: rgb(85, 85, 85);
}

#fluent {
	background-color: rgb(141, 145, 180);
}

#sweet-gem {
	background-color: rgb(144, 98, 61);
}

#oscar {
	background-color: rgb(19, 49, 70);
}

#camera {
	background-color: rgb(252, 237, 222);
}

#youth {
	background-color: rgb(115, 10, 13);
}

#bike {
	background-color: rgb(163, 187, 128);
}

#artclub {
	background-color: rgb(244, 174, 38);
}

@media only screen and (max-width: 767px) and (min-width: 500px) {
	.print-copy {
		padding-left: 10%;
		padding-right: 10%;
	}
}

@media only screen and (max-width: 345px) {
	#print-header {
		padding-top: 21%;
	}
}