@font-face {
    font-family: AlienLeague;
    src: url(../fonts/alienleague.ttf);
}

@font-face {
    font-family: Bebas;
    src: url(../fonts/BEBAS.ttf);
}

.loading {
  font-size: 16px;
  position: absolute;
  text-align: center;
  z-index: 10;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image:url("../videos/loading.gif");
  background-repeat: no-repeat;
  background-position: center;
}

body {
	font-family: bebas, helvetica, 'Source Sans Pro', sans-serif;
	font-weight:300;
	background-color: #white;
	padding:0;
	margin:0;
  scroll-behavior: smooth;
  color: #262626;
}
body #sp-page.loaded {
  /*background-image:url("../images/bg_bees.png");*/
  /*background-color: rgba(116,232,238,.3);*/
  background-color: white;

}

body #sp-page {
	background-repeat: repeat-x;
	background-size: auto 100%;
	overflow: scroll;
	min-height:100%;
	height:100%;
	width:100%;
  background-color: white;
	/*background-color: rgba(116,232,238,1);*/
	background-blend-mode: overlay;
	/*box-shadow: 10px 0px 10px rgba(0,0,0,.25);*/
	z-index:1;
  top:0;

	-webkit-transition: background 1s linear;
    -moz-transition: background 1s linear;
    -ms-transition: background 1s linear;
    -o-transition: background 1s linear;
    transition: background 1s linear;
}

body #sp-nav {
	-webkit-transition: background 1s linear;
    -moz-transition: background 1s linear;
    -ms-transition: background 1s linear;
    -o-transition: background 1s linear;
    transition: background 1s linear;
}
body.project_grid, body.project_grid #sp-page, body.project_grid #sp-nav  {
	background-color: white;
}

/*body.e2e, body.e2e #sp-page, body.e2e #sp-nav  {
	background-color: #40BFE5;
}

body.adidas, body.adidas #sp-page, body.adidas #sp-nav  {
	background-color: #2C95B4;
}
body.startrek, body.startrek #sp-page, body.startrek #sp-nav {
	background-color: #C999C5;
}
body.tallyo, body.tallyo #sp-page, body.tallyo #sp-nav {
	background-color: rgba(100,222,159,1);
}
body.xoom, body.xoom #sp-page, body.xoom #sp-nav {
	background-color: #25B2E3;
}

body.guess, body.guess #sp-page, body.guess #sp-nav {
	background-color: rgba(255,255,255,1);
}

body.mpowering, body.mpowering #sp-page, body.mpowering #sp-nav {
	background-color: #4F5A5B;
}
body.starstarme, body.starstarme #sp-page, body.starstarme #sp-nav {
	background-color: rgba(0,171,216,1);
}
body.howclose, body.howclose #sp-page, body.howclose #sp-nav {
	background-color: rgba(28,229,229,1);
}

body.levis, body.levis #sp-page, body.levis #sp-nav {
	background-color: rgba(255,255,255,1);
}

body.chayoCeramics, body.chayoCeramics #sp-page, body.chayoCeramics #sp-nav {
	background-color: #8DB2A3;
}

body.bees, body.bees #sp-page, body.bees #sp-nav {
	background-color: #ffffff;
}

body.acme, body.acme #sp-page, body.acme #sp-nav {
	background-color: #ffffff;
}

body.yca, body.yca #sp-page, body.yca #sp-nav {
	background-color: rgba(116,205,252,1);
}

body.sirchido, body.sirchido #sp-page, body.sirchido #sp-nav {
	background-color: rgba(206,242,189,1);
}

body.promotores, body.promotores #sp-page, body.promotores #sp-nav {
	background-color: rgba(220,254,255,1);
}

body, body.facesofprevention #sp-page, body.facesofprevention #sp-nav {
	background-color: rgba(255,255,255,1);
}

body.latinomayors, body.latinomayors #sp-page, body.latinomayors #sp-nav {
	background-color: rgba(81,94,86,1);
}

body.yell, body.yell #sp-page, body.yell #sp-nav {
	background-color: rgba(251,255,128,1);
}

body.evas, body.evas #sp-page, body.evas #sp-nav {
	background-color: rgba(208,218,255,1);
}*/
.clear {
  clear:both;
  display:block;
}
footer {
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    margin-top: 32px;
    margin-bottom: 72px;
    clear:both;
    width:100%;
    display:block;
}

@keyframes color_change {
	from { background-color: rgba(0,171,216,.3); }
	to { background-color: rgba(64,64,163,.3); }
}

h1, h2, .category {
	font-family: Bebas, helvetica, 'Source Sans Pro', sans-serif;
}

#modal {
  /*background-color: #303030;*/
  background-color: white;
  width:100%;
  height: 100%;
  position: absolute;
  z-index: 100;
  top:0px;
  left:0px;
  padding-top: 5%;
  text-align: center;
  cursor: zoom-out;
}

#modal img {
  width:95%;
  background-color: white;
}

.other_image {
  cursor: zoom-in;
}

.project_menu {
  background-color: #303030;
  font-family: Bebas, helvetica, 'Source Sans Pro', sans-serif;
  width:100%;
  height: 100%;
  position: absolute;
  z-index: 100;
  color: white;
  top:0px;
  left:0px;
  overflow-y: scroll;
  padding-top: 10%;
  padding-bottom: 10%;
  padding-left:30%;
}

.project_menu p {
  padding: 8px;
  font-size: 30px;

  -webkit-transition: padding-left .2s ease-in;
  -moz-transition: padding-left .2s ease-in;
  -ms-transition: padding-left .2s ease-in;
  -o-transition: padding-left .2s ease-in;
  transition: padding-left .2s ease-in;
}
.project_menu p:hover {
  cursor: pointer;
  /*color: #F8E71C;*/
  padding-left: 16px;
  border-left: 1px solid #F8E71C;
}

.top_bar {
	padding-top: 24px;
	padding-left: 62px;
	padding-bottom: 24px;
	font-size: 36px;
	line-height: 36px;
	display: flex;
  	align-items: center;
}
.logo {
	font-size: 36px;
	line-height: 36px;
}

.moon_logo {
	background-image:url("../images/moon_logo.png");
	width:42px;
	height:42px;
	display: inline-block;
	margin-right: 10px;
}

.whit_logo {
	background-image:url("../images/whitney_logo.png");
  width: 167px;
  height: 57px;
	background-size:100%;
	cursor: pointer;
  background-repeat: no-repeat;
}

.about_page {
  background-color: white;
  margin-top: 170px;
  padding-top:34px;
  text-align: center;
}

.about p {
	text-align: left;
}

.about p, .about figure {
	max-width:80%;
	margin-left:10%;
	margin-right:10%;
	display: table;
}

.about figcaption p {
	text-align:center;
	display:block;
}
.about_page div {
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

.whit {
	width:200px;
  /*margin-top: -230px;*/
  position:absolute;
  left: 0;
  right: 0;
  /*margin-left: auto;
  margin-right: auto;*/
  /*box-shadow: rgba(50, 50, 50, 0.1) 0px -5px 11px;*/
  border-radius: 100px;
  float:left;
  width:30%;
  max-width:200px;
  margin-right: auto;
  margin-left:auto;
  display: inline-block;
}

.about_me {
  display: inline-block;
  width: 60%;
  text-align: left;
  margin-bottom: 10px;
}

.section-separator {
    position: absolute;
    top: 0px;
    left:0px;
    width: 100%;
    height: 120px;
    transform-origin: 0 0;
    transform: skew(0, -2deg);
    background: #fff;
    z-index: -10;
    border-top:1px solid #efefef;
    /*box-shadow: rgba(50, 50, 50, 0.1) 0px -5px 11px;*/
}

.about .section-separator {
    top: 250px;
}

.about p, .details p.description {
	font-family: helvetica, 'Source Sans Pro', sans-serif;
	font-weight:300;
	font-size: 16px;
	color: #262626;
	line-height: 24px;
  margin-top: 0;
}

.about p {
  background: rgba(255,255,255,1);
  padding-right: 10%;
  padding-left: 10%;
  padding-top: 2px;
  padding-bottom: 2px;
}

.about a, .about a img {
	font-weight: 700;
}

.about .images img {
	float: left;
}
.about a, .about a :hover, .about a :active, .about a :visited {
	color:black;
	text-decoration: none;
	cursor: pointer;
}

.about hr {
	border-bottom: none;
	margin-top:20px;
  margin-bottom:20px;
}

.projects_grid {
  max-width:1200px;
  /*padding: 30px;*/
  margin:auto;
  clear:both;
  display:block;
  text-align: center;

    /*padding: 1em;*/
}

#about_header {
  min-height: 360px;
  text-align: center;
  /*background-color:#f8f8f8;*/
  padding:40px;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

#about_header p {
  font-family: helvetica, 'Source Sans Pro', sans-serif;
  padding:10px 40px 10px 0px;
  text-align: left;
  max-width: 600px;
  margin-left: 0;
}

#about_header .whit {
  margin-top: 0px;
  position: relative;
}
.projects_grid h2 {
  text-align: center;
  padding: 30px;
  font-size: 19px;
  background-color: #f8f8f8;
}
.projects_grid_ {
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-span: 1; /* Chrome, Safari, Opera */
    -moz-column-span: 1; /* Firefox */
    column-span: 1;
    padding: 1em;
}

.projects_grid_ {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; /* or space-around */
  column-span: 1;
  padding: 1em;
}

.project_grid_item{
  position:relative;
  background-color: white;
  background-repeat:no-repeat;
  cursor: pointer;
  float: left;
  /*display: table-cell;*/
  width:100%;
  padding-top:100%;/*133%; 4:3*/
  display: inline-block;
  /*height:300px;*/

  /*text-align: center;*/
}

.project_grid_item .text {
  font-family: helvetica, 'Source Sans Pro', sans-serif;
  padding: 4px 12% 0 8%;
  font-size: 14px;
  display: none;
  /*position: absolute;
  bottom: 50px;*/
}

.grid_item {
  width: 24%;
  display: inline-block;
  overflow: hidden;

  /*margin-right: 1%;
  margin-left: 1%;*/
}
/*
.grid_item:nth-of-type(3n) {
    margin-right: 0;
}
.grid_item:first-child {
    margin-left: 0;
}*/

.project_grid_item:hover{
  /*background-image:url("../images/screen_xoom.png");*/
	background-size: 50%;
  color:white;
  /*height:300px;*/
}

.project_grid_item .title{
  /*padding-top:.4em;
  padding-bottom:.4em;*/
  padding: 10% 16% 0 8%;
  display: none;

}

.project_grid_item:hover .title, .project_grid_item:hover .category{
display: block;
color:white;
padding-left: 10%;
  /*color: rgba(0,0,0,.2);*/
  /*background-color:white;*/
}

.project_grid_item:hover .category, .project_grid_item:hover .text{
  /*display: block;*/
  /*background-color:#F8E71C;*/
  color:white;
}

.project_grid_item .overlay {
  background-color:rgba(0,0,0,.8);
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  right:0;
  overflow: hidden;
  margin-top: 100%;
  padding-bottom: 40px;
  color: white;
  visibility:hidden;
  text-align: left;

   transition: 0.3s;
}

.project_grid_image {
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  right:0;

  background-size: 80%;
  background-origin: content-box;
  background-position: center;
  background-repeat: no-repeat;

  -webkit-transition: background-size .2s ease-in;
  -moz-transition: background-size .2s ease-in;
  -ms-transition: background-size .2s ease-in;
  -o-transition: background-size .2s ease-in;
  transition: background-size .2s ease-in;
}

.project_grid_image.screen_thumb {
  background-size: 50%;
}

.project_grid_item:hover .project_grid_image.screen_thumb {
  background-size: 75%;
}

.project_grid_item:hover .project_grid_image {
  background-size: 100%;
}

.project_grid_item:hover .overlay {
  margin-top: 0%;
  visibility: visible;
}

.image {
	width:50%;
	float: left;
	display: inline-block;
	position: relative;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.page {
	display: flex;
	flex-direction: row;
  	width: 100%;
  	/*height:100%;*/
  	overflow:hidden;
}

.phone {
	width: 90%;
	height: auto;
	float:right;
}

.screen_image {
	width:100%;
	height: auto;
	position:absolute;
}

.screen_image img {
	width: 90%;
	height: auto;
	float:right;

	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;

	-ms-transform: translate(28%,11%) scale(.535,.535);
 	-webkit-transform: translate(28%,11%) scale(.535,.535);
  transform: translate(28%,11%) scale(.535,.535);

  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  transform-origin: left top;

  -webkit-transition: background-image .5s linear;
  -moz-transition: background-image .5s linear;
  -ms-transition: background-image .5s linear;
  -o-transition: background-image .5s linear;
  transition: background-image .5s linear;
}

.android.screen_image img {
  -ms-transform: translate(26.5%,16%) scale(0.564,0.564);
 	-webkit-transform: translate(26.5%,16%) scale(0.564,0.564);
  transform: translate(26.5%,16%) scale(0.564,0.564);
}

.project_image {
	width: 100%;
	height: auto;
}

.project_image img {
	width: 70%;
	height: auto;
	float:right;

	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;

	-webkit-transition: background-image .5s linear;
  -moz-transition: background-image .5s linear;
  -ms-transition: background-image .5s linear;
  -o-transition: background-image .5s linear;
  transition: background-image .5s linear;
}

.screen {
	/*background-image:url("../images/screen_xoom.png");*/
	background-size: 100%;
	background-repeat:no-repeat;
	background-color:black;
	width:288px;
	height:510px;
	top: 106px;
  left: 151px;
  position: absolute;

  -webkit-transition: background-image .5s linear;
  -moz-transition: background-image .5s linear;
  -ms-transition: background-image .5s linear;
  -o-transition: background-image .5s linear;
  transition: background-image .5s linear;
}

/*.android.screen {
	width:305px;
	height:501px;
	top: 143px;
  left: 151px;
}*/

.e2e .screen, .e2e .screen_image img {
	/*background-image:url("../images/screen_e2e.png");*/
  background-image:url("../videos/E2E_prototype.gif");
}

.adidas .screen, .adidas .screen_image img {
	/*background-image:url("../images/screen_adidas.png");*/
	background-image:url("../videos/adidas.gif");
}

.android .phone {
	background-image:url("../images/android_phone.png");
  background-size: 100%;
	background-repeat:no-repeat;
}

/*.startrek .screen {
	visibility:hidden;
	background-image:none;
}
.startrek .startrekscreen, .startrek .phone_image img {
	background-image:url("../images/startrek.png");
  background-image:url("../videos/startrek.gif");
	background-size: 100%;
	background-repeat:no-repeat;
}*/

.content {
	max-width: 500px;
	width: 40%;
    float: left;
    padding-top: 10%;
    margin-left: 5%;
    min-height: 460px;
    margin-left: auto;
    margin-right: auto;
}

h1.title {
	font-family: Bebas, helvetica, 'Source Sans Pro', sans-serif;
	font-size: 32px;
  letter-spacing: 2px;
	color: #303030;
	line-height: 37px;
	margin-after: .0em;
  margin-before: .0em;
	-webkit-margin-after: .0em;
  -webkit-margin-before: .0em;
}

figure {
	display:inline-block;
	text-align: center;
	margin-left:0;
	margin-right:0;

	background: rgba(255,255,255,1);
}

figure.left{
	float:left;
}

figcaption {
	font-family: helvetica, 'Source Sans Pro', sans-serif;
	font-weight:700;
	font-size: 16px;
	color: #262626;
	line-height: 24px;
	text-align: left;
	margin-bottom: 5px;

	background-color: #F8E71C;
    padding: 10px;
    margin-bottom: 20px;
}

.about figcaption p {
	background-color: transparent;
	padding:0;
  padding: 0;
  font-size: 10pt;
  margin: 0;
  text-align: left;
}

p.description {
	font-family: helvetica, 'Source Sans Pro', sans-serif;
	font-weight:300;
	font-size: 24px;
	color: #262626;
	line-height: 28.79px;
}

h1, h2 {
	text-transform: uppercase;
}

.details {
	background-color:white;
	padding:4%;
  position: absolute;
  z-index: 10;
  min-height: 310px;
}

.overview {
	border-left: 1px solid #cccccc;
	padding-left:20px;
	padding-right:20px;
	margin-left:100px;
}

.details .more_info {
	position:absolute;
  top: -26px;
  color: white;
  font-family: 'Source Sans Pro', sans-serif;
	font-weight:700;
	font-size: 30px;
	letter-spacing: 2.15px;
	line-height: 30px;
	text-transform: uppercase;
	left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  width: 170px;
  text-align: center;
}

aside h2 {
	margin-top:0;
}
.overview {
	margin:0;
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}

a.category {
    text-decoration: none;
    color: #262626;
    background-color: #F8E71C;
    -webkit-transform: skew(-30deg);
    -moz-transform: skew(-30deg);
    -o-transform: skew(-30deg);
    padding: 3px 12px;
    margin-right:20px;
    margin-bottom: 20px;
  }

  a.category:hover {
    background-color: #D4C417;
  }

  a.category.long {
    width:210px;
  }
  a.category.short {
    width:80px;
  }
.category {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:700;
	font-size: 13px;
	color: #262626;
	letter-spacing: 2.15px;
	line-height: 25.19px;
	text-transform: uppercase;
  display: inline-table;
  margin-bottom:20px;

  /*background-color: #F8E71C;*/

}

.about .category {
  background-color: rgba(248,231,28,1);
}
a.category .text {
  -webkit-transform: skew(30deg);
  -moz-transform: skew(30deg);
  -o-transform: skew(30deg);
}

.nav {
	display: flex;
	align-items: center;
	justify-content: center;
	position:absolute;
	top: 0;
  right: 5%;
  cursor: pointer;
}

.nav .nav_item {
	text-align:center;
    min-width:88px;
    float:left;
    border-bottom:2px solid white;
}

#sp-nav .nav_item {
	text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    min-width:88px;
}

#sp-nav .nav_item.selected_item {
	background: #F8E71C;
	/*box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15);*/
}

.nav .nav_item:hover, .nav .nav_item.selected_item  {
  border-bottom:2px solid #F8E71C;
}

.nav .nav_item.selected_item .icon {
	visibility: visible;
}

.nav .selected_item span {
	display: block;
}

.nav .icon {
	display:inline-table;
	margin-top: 12px;
	width:30px;
	height:40px;
	background-size: 100%;
*/}

.about .nav .icon {
	visibility: visible;
}

#sp-nav {
	background-color: rgba(2,101,133,.3);/*#B5CDD8;*/
}

#sp-nav .icon {
	display:inline-table;
	width:15px;
	height:20px;
	background-size: 100%;
}

.about .icon {
	background-image:url("../images/icon_about.png");
}

.development .icon {
	background-image:url("../images/icon_development.png");
}

.user_experience .icon {
	background-image:url("../images/icon_user_experience.png");
}

.mobile_design .icon {
	background-image:url("../images/icon_mobile_design.png");
}

.logo_design .icon {
	background-image:url("../images/icon_logo_design.png");
}

.graphics .icon {
	background-image:url("../images/icon_graphics.png");
}

.nav .label, #sp-nav .label {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:700;
	font-size: 13px;
	color: #303030;
	letter-spacing: 2.15px;
	line-height: 15.6px;
	text-transform: uppercase;
	padding:10px;
}
.scroll_to_top {
	display:none;
	position: fixed;
	bottom: 38px;
	z-index: 60;
	left:50%;
	width:120px;
	margin-left:-60px;
	background-color: rgba(248,231,28,1);
	padding:6px;
	text-align:center;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:700;
	font-size: 13px;
  letter-spacing: 2.15px;
	text-transform: uppercase;
  cursor: pointer;

	-webkit-transition: opacity 1s linear;
    -moz-transition: opacity 1s linear;
    -ms-transition: opacity 1s linear;
    -o-transition: opacity 1s linear;
    transition: opacity 1s linear;
}

.social_links {
  display: block;
  margin-bottom: 20px;
}

.pause_btn, .play_btn, .next_btn, .menu_btn, .about_btn {
	width:50px;
	height:50px;
	background-size:100%;
	position: fixed;
	bottom: 40px;
	z-index: 60;

  cursor: pointer;

	-webkit-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  -ms-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
  transition: opacity 1s linear;
}

.pause_btn {
	background-image:url("../images/pause_button.png");
	right:110px;
}

.play_btn {
	background-image:url("../images/play_button.png");
	right:110px;
}

.about_btn {
	background-image:url("../images/about_button.png");
	/*right:180px;*/
  left:40px;
}

.next_btn {
	background-image:url("../images/next_arrow.png");
	right:40px;
}

.next_btn_rotate {
	background-image:url("../images/next_arrow_rotate.png");
  width:50px;
	height:50px;
	background-size:100%;
  opacity: 0;
}

.menu_btn {
	background-image:url("../images/menu_button.png");
	right:110px;
}

.pause_btn:active, .play_btn:active, .next_btn:active, .pause_btn:hover, .play_btn:hover, .next_btn:hover {
	opacity:.8;
	cursor: pointer;
}

.rotating {
  opacity:1;
		-webkit-animation: rotation 10s infinite linear;
}

@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}

.progress_bar {
	background: rgba(48,48,48,0.10);
	height:10px;
	width:100%;

	position: fixed;
	bottom: 0;
	z-index: 70;
}

.progress {
	background: #F8E71C;
	height:100%;
	width:0%;

	-webkit-transition: margin-left 1s linear;
  -moz-transition: margin-left 1s linear;
  -ms-transition: margin-left 1s linear;
  -o-transition: margin-left 1s linear;
  transition: margin-left 1s linear;
}

.store_btns {
  margin-bottom:20px;
}

.store_btns a {
	text-decoration: none;
}

.store_btns a.block{
	display: block;
  margin-top: 20px;
}

.store_btns a div {
	display:inline-block;
	background-size:100% 100%;
}

.learnmorebtn {
  background-color: white;/*rgba(248,231,28,1);*/
  padding:6px;
  width:120px;
  font-family: 'Source Sans Pro', sans-serif;
	font-weight:700;
	font-size: 13px;
  letter-spacing: 2.15px;
  text-align: center;
	text-transform: uppercase;
  cursor: pointer;
}

.googleplaybtn {
	width:146px;
	height:50px;
	background-image:url("../images/google_play_button.png");
}

.appstorebtn {
	width:146px;
	height:50px;
	background-image:url("../images/app_store_button.png");
}

.fwabtn {
	width:137px;
	height:50px;
	background-image:url("../images/fwa.png");
  display: block !important;
  margin-bottom: 16px;
}

.linkbtn {
	background-color: #F8E71C;
	color: #303030;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:700;
	font-size:13px;
	letter-spacing: 2.15px;
	line-height: 25.19px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top:4px;
	padding-bottom:4px;
	text-transform: uppercase;
}

.linkbtn:hover, .linkbn:active {
	background-color: white;
	color: #303030;
	background-color: #D4C417;
	cursor: pointer;
}
.linkbtn:active {
	color: #303030;
	background-color: #D4C417;
}

.anim {
    opacity: 1;
      -webkit-transition: all linear 0.2s;
    -moz-transition: all linear 0.2s;
    -ms-transition: all linear 0.2s;
    -o-transition: all linear 0.2s;
    transition: all linear 0.2s;
}

.fade-it-out {
  opacity: 0;
}

.ng-hide-add, .ng-hide-remove {
    /* ensure visibility during the transition */
    display: block !important; /* yes, important */
}

.cssFade {
    opacity: 1;
    -webkit-transition: all linear 0.5s;
    -moz-transition: all linear 0.5s;
    -ms-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
    transition: all linear 0.5s;
}
.cssFade.ng-hide {
    opacity: 0;
}

.about_page div {
	-webkit-column-count: 1; /* Chrome, Safari, Opera */
  -moz-column-count: 1; /* Firefox */
  column-count: 1;
}

aside {
  width: 100px;
  font-family: 'Source Sans Pro', sans-serif;
	font-weight:300;
	font-size: 16px;
	line-height: 24px;
	padding-right:20px;
	float:left;
}


@media(max-width: 992px){
	h1.title {
		font-size: 32px;
		line-height: 37px;
	}
	p.description {
	    font-size: 18px;
	    line-height: 24px;
	    margin-top: 10px;
	}

  .project_grid_item .text{
    display: none;
  }
}
@media(max-width: 768px){
	.page {
		display:block;
	}
  #about_header .whit {
    display: block;
    float: none;
  }

  #about_header .about_me {
    width:100%;
  }
  .grid_item {
    width: 33%;
  }

  /*.project_grid_item .category, .project_grid_item .text{
    display: block;
    position:initial;
  }*/

  .grid_item {
    width: 49%;
  }

  .learnmorebtn {
    display: none;
  }

	h1.title {
		font-size: 32px;
		line-height: 37px;
	}

	p.description {
		font-size: 18px;
		line-height: 20px;
	}

	.mobile_projects .content {
		order:1;
		padding-top: 8%;
		min-height: 170px;
	}

  .nav {
    display: none;
  }

	.nav {
		left:0;
		right:0;
		position:relative;
		margin-bottom: 10px;
	}

	.nav .nav_item.selected_item {
		display:block;
		background: #F8E71C;
		border: none;
		box-shadow: none;
		width:100%;
		height:auto;
		text-align: center;
	}

	.nav .selected_item span {
		display: inline-block;
	}

	.moon_logo {
		background-image:url("../images/moon_logo_sm.png");
		width:23px;
		height:23px;
		margin-left: 10px;
	}

	.whit_logo {
		background-image:url("../images/whitney_logo.png");
		background-size:100%;
		width:106px;
		height:36px;
		margin-left: 10px;
		margin-top:5px;
		margin-bottom:5px;
	}
	.top_bar {
		margin: 0;
		padding:0;
	}

	.menu {
		background-image:url("../images/menu.png");
		width:18px;
		height:16px;
		position:absolute;
		right:10px;
		top:14px;
	}

  .about_page {
		margin-left: 0%;
		margin-right:0%;
    margin-top:60px;
	}

  .overview {
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;

    border:none;
		padding-left:0px;
		padding-right:0px;
	}

  .about .section-separator {
    top: 104px;
  }

	.about .whit {
    width: 100px;
    margin-top: -80px;
	}

	h1 {
		text-transform: lowercase;
	}

	h1.title {
    font-size: 22px;
    line-height: 24px;
	}

	p.description {
		font-size: 14px;
		line-height: 20px;
	}

	.about p, .about figure {
		max-width:100%;
		margin-left:0;
		margin-right:0;
	}

	.about figure {
		text-align: center;
	}

	figcaption {
		font-family: 'Source Sans Pro', sans-serif;
		font-weight:700;
		font-size: 16px;
		color: #262626;
		line-height: 24px;
		text-align: center;
	}

	.category {
		font-size: 10px;
		letter-spacing: 1.6px;
		line-height: 20px;
    margin-right:5px;
    margin-bottom: 20px;
	}

	.googleplaybtn {
		width:73px;
		height:25px;
	}

	.appstorebtn {
		width:73px;
		height:25px;
	}

	.fwabtn {
		width:66px;
		height:25px;
    margin-left: auto;
    margin-right: auto;
	}

	.content {
	    min-height:200px;
	}

  .bounce {
   bottom: 40px;
 }

}


/*screen*/
@media(max-width: 480px){
	.page {
		display:flex;
	}
	.page, .details {
		flex-direction: column;
	}

  .grid_item {
    width:100%;
  }

  .scroll_to_top {
    bottom:12px;
  }

  .project_grid_item .overlay .text, .project_grid_item .overlay .title {
    display: block;
    padding: 0;
    margin: 0;
  }

  .projects_grid h2 {
    margin-bottom: 0;
  }

  .project_grid_item .text {
    font-size: 12px;
    display: none;
  }

   .project_grid_item , .project_grid_item:hover .project_grid_item {
     padding-top: 0;
   }

   .project_grid_item:hover .project_grid_image {
     background-size: 75%;
   }
   .project_grid_item:hover .project_grid_image.screen_thumb {
     background-size: 50%;
   }

   .grid_item {
     /*border-bottom: 1px solid #f8f8f8;*/
     position:inherit;
   }

   .grid_item:first-of-type {
     border-top: 1px solid #f8f8f8;
   }
   .project_grid_image {
       width: 30%;
       height: 90px;
       position: relative;
       top: 0;
       right: 0;
       background-size: 50%;
       display: inline-block;
   }

  .project_grid_item .overlay {
    position:inherit;
    margin-top:0;
    width:69%;
    background-size: 50%;
    visibility: visible;
    background-color:white;
    height:auto;
    overflow: visible;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #303030;
    display: inline-block;
    float: right;

    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 72px;
  }

  .project_grid_item .overlay .title, .project_grid_item .overlay .text, .project_grid_item .overlay .category {
    color:#303030;
    padding-right: 18px;
  }

  .project_grid_item .overlay .category {
    padding: 0;
    margin: 0;
  }
  .project_grid_item:hover .overlay {
    margin-top:0;
    position:inherit;
    margin-top:0;
  }

  .project_grid_item:hover .project_grid_image {
    background-size: 50%;
  }

	.overview {
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;

    border:none;
		padding-left:0px;
		padding-right:0px;
	}

	.details .more_info {
	    top: -21px;
	    font-size: 20px;
	}

	.image {
		width:70%;
		margin-left: 15%;
	}

	.mobile_projects .image {
		order:2;
	}

	.mobile_projects .content {
		order:1;
		padding-top: 8%;
		min-height: 170px;
	}

	.phone_image img, .screen_image img {
		float:left;
	}

	.project_image img {
		float:none;
		width: 100%;
	}

	.content {
		width:80%;
		margin-left: 10%;
		text-align:center;
		padding-top: 0;
		padding-bottom: 8%;
		min-height:100px;
	}

	aside {
    width: 100%;
		font-size: 12px;
		line-height: 20px;
		padding-right:20px;
		float:none;
	}

	aside h2 {
		font-family: Bebas, helvetica, 'Source Sans Pro', sans-serif;
		margin:0;
		padding:0;
	}

	aside p {
		margin:0;
		padding:0;
		margin-bottom:10px;

	}

	.overview {
		border-left: none;
		padding-left:0px;
		padding-right:0px;
		margin-left:0;
	}

	.overview p.description, .about p, #about_header p {
		font-size:13px;
		line-height:18px;
    margin:0;
    margin-bottom: 10px;
    padding:0;
    text-align: left;
	}
  #about_header {
    padding: 0 30px;
  }
  #about_header h1 {
    text-align: left;
  }


	.about_page {
		margin-left: 0%;
		margin-right:0%;
    margin-top:60px;
	}

	.about .whit, .whit {
    width: 100px;
    /*margin-top: -80px;*/
	}

  .bounce {
   bottom: 20px;
 }

#sp-nav.show+#sp-page {
    transform: translate(-30%,0);
    -webkit-transform: translate(-30%,0);
    -o-transform: translate(-30%,0);
    -moz-transform: translate(-30%,0);
}

 #sp-nav.show, #sp-nav.wide.show {
    width: 30%;
    left: 70%;
}

#sp-nav .icon {
  display:none;
}


}



/* arrow animation */
.show_more_arrow {
  width: 40px;
  height: 20px;
  text-align: center;
  color: #303030;
  bottom: 60px;
  position: absolute;
  left: 50%;
  margin-left:-20px;
  font-size: 14px;
}

.down_arrow {
  width: 40px;
  background-repeat: no-repeat;
  background-position: center;
  height: 20px;
  background-image: url(../images/down_arrow.png);
  background-size: contain;
  margin: 0 auto;
}

.bounce {
 position: absolute;
 animation: bounce 2s infinite;
 -webkit-animation: bounce 2s infinite;
 -moz-animation: bounce 2s infinite;
 -o-animation: bounce 2s infinite;
}

@-webkit-keyframes bounce {
 0%, 80%, 100% {-webkit-transform: translateY(0);}
 20% {-webkit-transform: translateY(-20px);}
 60% {-webkit-transform: translateY(-10px);}
}

@-moz-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
 40% {-moz-transform: translateY(-20px);}
 60% {-moz-transform: translateY(-10px);}
}

@-o-keyframes bounce {
 0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
 40% {-o-transform: translateY(-20px);}
 60% {-o-transform: translateY(-10px);}
}
@keyframes bounce {
 0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 40% {transform: translateY(-20px);}
 60% {transform: translateY(-10px);}
}