* {
	margin:0;
	padding:0;
	border:0;
	
}
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Lato-Regular';
    src: url('css/Lato-Regular.eot');
    src: url('css/Lato-Regular.eot?#iefix') format('embedded-opentype'),
		 url('css/Lato-Regular.woff2') format('woff2'),
         url('css/Lato-Regular.woff') format('woff'),
		 url('css/Lato-Regular.ttf') format('truetype');
	
    
}

@font-face {
    font-family: 'Lato-Black';
    src: url('css/Lato-Black.eot');
    src: url('css/Lato-Black.eot?#iefix') format('embedded-opentype'),
		url('css/Lato-Black.woff2') format('woff2'),
         url('css/Lato-Black.woff') format('woff'),
		url('css/Lato-Black.ttf') format('truetype');
    
}
 

 
@font-face {
    font-family: 'Lato-Light';
    src: url('css/Lato-Light.eot');
    src: url('css/Lato-Light.eot?#iefix') format('embedded-opentype'),
		url('css/Lato-Light.woff2') format('woff2'),
         url('css/Lato-Light.woff') format('woff'),
		url('css/Lato-Light.ttf') format('truetype');
   
}



a, a:hover{
	font-family: Lato-regular, Segoe, segoe UI, sans-serif;
	font-size:15px;
	letter-spacing:2px;
	color:#777;
	text-decoration: none;
	
	
}

a:hover{
	color:#444;
	
}





h1 {
	padding-bottom:1%;
	letter-spacing:3px;
	font-family: Lato-black, Segoe, segoe UI, sans-serif;
	font-size:20px;
}



h3 {
	
	padding: 1% 0 .7% 0;
	letter-spacing: 2.5px;
	line-height: 25px;
	text-align: left;
	font-size:14.5px;
}

h2, h4{
	padding: 0% 2.5% 3.5% 0;
	font-size:14px;
	color:#222;
	text-align: right;
	letter-spacing: 13px;
	line-height: 45px;
	
}


p {font-family: Lato-light, Segoe, segoe UI, sans-serif;
   color:#626262;}

html{
	
	font-variant-ligatures: no-common-ligatures;
	background-color:#ffffff;
	font-weight:normal;
	height: 100%;
	color:#222;
	
}

header, section, footer, aside, nav, main, article, figure {
  display: block;
}


body {
	font-family: Lato-black, Segoe, segoe UI, sans-serif;
	-webkit-text-size-adjust: none;
	-webkit-backface-visibility: hidden;
	height:100%;
}



#container{
	width:100%;
	height:100%;
	margin:0 auto;
}

#work_list {
	padding:7% 0 5% 0;
}

#home_name, #work_list {
	width:85%;
	display:block;
	padding-top:7%;
	margin:0 auto;
	clear:both;
	overflow:visible;
}

.name {
	float:left;
	margin-top:23%;
	padding-left:9%;
	padding-right:5%;
	width:25%;
}

.name h1, .name h5 {
	font-size:29px;
	color:#444;
	text-align: left;
	padding-bottom:0;
	letter-spacing:10px;
	line-height:44px;
	font-family: Lato-Black, sans-serif, Segoe, segoe UI;
	font-weight:900;
}

.name h5{
	font-size:68px;
	padding-top:2.5%;
	letter-spacing:12px;
	line-height:75px;
	
}

.home_img{
	float:right;
	width:55%;
}

.home_img img{
	width:73%;
	display:block;
	margin-left:20%;
}


#jacket_small
{display:none;}

#main{
	margin:0 auto 0 auto;
	padding-top:10%;
	width:100%;
	will-change:top;
}




#menu{
	top:6%;
	right:3%;
	float:right;
	position:fixed;
	z-index:1;
}

#menu a span {
	font-size:18.5px;
	padding-right: .25%;

}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.95);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 35%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 20px;
  text-decoration: none;
  font-size: 18px;
  color: #999999;
  display: block;
  transition: 0.3s;
  letter-spacing:10px;
  font-family: lato-regular, Segoe, segoe UI, sans-serif;
  
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 4%;
  right: 4%;
  font-size: 60px;
}

/* home */


 
#kaba1 {display:block;}
#kaba2 {display: none;}



.large, .medium, .medium2,.little, .medlit, .largemed{
	clear:both;
	margin-top:2.5%;
	display:inline-block;
	padding:0 1%;
	vertical-align: text-top;
	position:relative;
}

.large{
	width:59.82%;
	
}
#webdesign{
	float:left;
}
.largemed{
	width:49.8%;
	
	
}

.medium{
	width:39.527%;
	
}
.medium2{
	width:36.24%;
}

.medlit {
    width: 26.525%;
}

.little{
	width:19.75%;
}

.large img, .medium img, .medium2 img,.large svg, .little img, .medlit img, .largemed img{
	width:100%;
	display:block;
	margin: 0 auto;
	height:auto;
	}

#tommybahama .line, #office365_home .line, .medium2 .line{
	width:88%;
	display:block;
}


.hovertext {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}


.large:hover .hovertext, .medium:hover .hovertext,  .medium2:hover .hovertext, .little:hover .hovertext , .medlit:hover .hovertext, .largemed:hover .hovertext{
  height: 100%;
}


.hometext{
  color: #222;
  font-size: 16px;
  letter-spacing:4px;
  line-height: 22px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.hometext p{
	padding-top:10%;
	color:#222;
}

#web .hometext p, #emaildesign .hometext p{
	padding-top:6%;
}

.line {
	
	border-top: 1px solid #222;
	width:65%;
	margin:10%  auto 0 auto;
}

#web .line, #emaildesign .line {
	margin:7%  auto 0 auto;
}



/* home end */



/*list*/



.sub{
	width:70%;
	margin:0% auto;
	clear:both;
}


.details{
	margin:0% auto 0% auto;
}


#process{
	margin:8.5% auto 0% auto;
	overflow: hidden;
	
}


#webdesign_samples .marginleft, #webdesign_samples .marginright{
	margin:2% 0;
	width:46.5%;
	display:inline-block;
	position:relative;
	vertical-align: text-top;
    }


#webdesign_samples .marginleft{
	margin-left:1.5%;
	margin-right:1.5%;
    }

.marginboth {
	margin-top:2%;
	margin-left:1.5%;
}
.marginboth img{
	margin-right:1.25%;
	margin-bottom:1.25%;
    }



#webdesign_samples .marginright{
	margin-left:1.5%;
	margin-right:1.5%;}

#webdesign_samples img, #websample_one svg, #websample_two svg, #hive img, #afrobeatnik img {
	width:100%;
	box-shadow: 0 4px 8px 0 rgba(112,112, 112, 0.2), 0 6px 20px 0 rgba(112, 112, 112, 0.19);
}


.projects, #windows{
	margin-top:10%;
	margin-bottom:8%;
	background:#f6f6f6;
	padding:10% 0;
}
.projects img, #windows img{
	width:100%;
	margin:0 auto 5% auto;
	display:block;
	
} 


#windows {
	padding:2% 8%;
	
}




#exploration2 img{
	width:47%;
	display:inline-block;
	margin-right:1.25%;
	margin-left:1.25%;
	
}
#exploration2{
	margin: 0 7%;
	
}
#exploration3{
	margin: 0 10%;
	
}
#exploration3 img{
	width:30%;
	margin:0 1.25%;
	display:inline-block;
	vertical-align: text-top;
	
}

#afrobeatnik {
	margin-left:0;
	display:grid;
	grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
  grid-gap: 4%;
	background:#f6f6f6;
	padding-bottom:34%;
	overflow:auto;
}
#afrobeatnik img {
	margin:0;
}

.item1{
  grid-row: 1/ span 1;
  grid-column: 5/ span 4;
	
}

.item2{
  grid-row: 2/ span 1;
  grid-column: 5/ span 4;
	
}

.item3{
  grid-row: 3/ span 1;
  grid-column: 5/ span 4;
	
}



.item4{
  grid-row: 4/ span 1;
  grid-column: 5/ span 4;
	
}



.item5{
  grid-row: 5/ span 1;
  grid-column: 4/ span 3;
	
}

.item6{
  grid-row: 5/ span 1;
  grid-column: 7/ span 3;
	
}


.item7{
  grid-row: 6/ span 3;
  grid-column: 6/ span 1;
	
}

.item8{
  grid-row: 6/ span 3;
  grid-column: 7/ span 1;
	
}

.webdesign_samples .desktop_img img {
	width:100%;
	margin:10% auto 0 auto;
}


#web_process p{
	margin:17% auto 10%;
	width:100%;
}



#web_process img {
	width:68%;
	margin:0 auto;
	display:block;
}

#websample_one svg, #websample_two svg{
	transform:none !important;
}

#websample_two svg path{
	mix-blend-mode:lighten !important;
}


#icon_review{
	margin:4% auto 11% auto;
	line-height: 25px;
    font-size: 15.5px;
letter-spacing: 3px;
}



#examples {
	overflow:auto;
	margin-bottom:5%;
}

#examples p{
	width:40%;
	padding:0;
	margin:7% 0% 8% 20%;
	float:left;
}



#examples img{
	width:57%;
	margin-right:11%;
	clear:right;
	float:right;
	
}



#icon_review .samewidth{
	width:75%;
	display:block;
	margin:-2% auto;
	clear:both;
	position:relative;
	padding: 2.5%;
}

/*#icon_review #review2{
	
	padding: 0%;
}*/

#icon_review .samewidth p{
	width:49.5%;
	padding:12%;
	float:left;
	/*box-shadow: 30px 20px 20px -20px #efefef, 0px -20px 20px -20px #efefef;
	box-shadow: 0px 0px 20px -50px #efefef, 60px 60px 20px -50px #efefef
	box-shadow:30px 30px 20px -20px #efefef, -30px -30px 20px -20px #fff;*/
	box-shadow: 25px 25px 20px -20px #ededed;
}


#icon_review .samewidth span {
	font-size:43px;
	color:#FCE5D6;
	position:absolute;
	top:50%;
	right:52.5%;
	-ms-transform: translate(-52.5%, -50%);
	transform: translate(-52.5%, -50%);
	font-family: lato-thin;
	
}

#icon_review #review2 span {
	left:53.5%;
	-ms-transform: translate(-52.5%, -50%);
	transform: translate(-52.5%, -50%);
}

#icon_review #review2 p{
	/*box-shadow: -30px 20px 20px -20px #efefef, 0px -20px 20px -20px #efefef;
	background:#FCE5D6;*/
	float:right;
	box-shadow: inset 20px 20px 20px -20px #ededed, inset -20px -20px 20px -20px #ededed;
	padding: 13% 12%;
}

#icon_review #review3 p{
	box-shadow: 20px -20px 20px -20px #ededed;
	/*background:#DEF9EA;
	background:#f9f9f9;*/
	
	
}
#icon_review .samewidth #mono, #icon_review .samewidth #chara, #icon_review .samewidth #moreoption{
	width:50.5%;
	padding: 3%;
	background:#fff;
	float:right;
	position: absolute;
	top:50%;
	right:0%;
	-ms-transform: translateY(-50%);
	transform:translateY(-50%);
	/*display:none;*/
	z-index: -1;
}





#icon_review #review3, #icon_review #review2, #icon_review #review1{
	overflow:hidden;
	
	
}
#icon_review .samewidth #chara{
	top:50%;
	-ms-transform: translateY(-50%);
	transform:translateY(-50%);
	
}




#moreoption{
	left:0;
	padding:3% 0 3% 4%;
}


#mono img, #moreoption img, #chara img {
	width:70%;
	margin:0 auto;
	display:block;
}


#moreoption img, #chara img{
	width:48%;
}









#icon_review #chara img {
	padding-bottom:3%;
	width:50%;
	
}
.amoneimg{
	margin:8% 0 0% 0;
	width:100%;
	padding-bottom:8%;
}



.fourimg  img,  .twoimg img, .amthreeimg img{
	margin:0% auto;
	display:inline-block;
	width:24%;
	padding:5% 1%;
	vertical-align: text-top;
	
}


.oneimg img{
	margin:0% auto;
	display:block;
	padding-bottom:0%;
	vertical-align: text-top;
	width:70%;
	
}







.container img{
	display:inline-block;
	width:47%;
	
}


.amthreeimg img, #signage_samples img {
	margin:3% 1.25%;
	padding:1.5% .75%;
	background: #fff;
	width:30%;
	box-shadow: 0 2px 4px 0 rgba(112,112, 112, 0.15), 0 6px 15px 0 rgba(112, 112, 112, 0.15);
}

#signage_samples img {
	padding:.85%;
}
.sample_large{
	width:66%;
	display:inline-block;
	
}
.sample_large img{
	width:100%;
	padding-top:20%;
}






.small h2, .mobile_img img, .mobile_img p, #production2 .mobile_img  {
	display:none;
}

.sub p{
width:100%;
line-height:25px;
font-size:16px;
letter-spacing:2px;
word-wrap:break-word;
}




#process p {
text-align: center;
}






.selecteditems{
	margin-top:0%;
	width:100%;
	overflow: auto;
	position:relative;
}


#cc_exploration, #webdesign_samples{
	width:100%;
	margin-top:10%;
	padding-bottom:10%;
	position:relative;
 	
    background-color: #fff;
    
	background-image: radial-gradient(#555 6%, transparent 0), radial-gradient(#555 6%, transparent 0);
    background-size: 16px 32px;
    background-position: 0 0, 8px 16px;
	
}



#cc_exploration h3,  #webdesign_samples h3,  .amthreeimg h3, .amoneimg h3, #signage_samples h3{
	text-align:center;
	padding:14.5% 0 3% 0;
	position:relative;
	letter-spacing: 5px;
}


.amoneimg h3{
	padding:12% 0 0% 0;
}

.amthreeimg h3 {
	transform: skewY(11deg);
}

.amthreeimg, #signage_samples {
	background: repeating-linear-gradient(
	  150deg,
	  #a8a8a8,
	  #a8a8a8 .58px,
	  #fff .6px,
	  #fff 9px
	);
	padding-bottom:10%;
	margin-top:8%;
	transform: skewY(-11deg);
	
}

#cc_exploration .exploration,#webdesign_samples .exploration,  .amthreeimg .exploration, #signage_samples .exploration{
	width:75%;
	margin:0 auto;
	position:relative;
	padding:3%;
	display:block;
}

#webdesign_samples .exploration{
	
	width:85%;
	margin-bottom:2%;
}





.amthreeimg .exploration {
	transform: skewY(11deg);
	width:72%;
}

#cc_exploration .exploration img {
	width:31.5%;
	margin:.75% .5%;
	padding:4% 3%;
	
	box-shadow: 0 4px 8px 0 rgba(112,112, 112, 0.1), 0 6px 20px 0 rgba(112, 112, 112, 0.19);
	
}

.selecteditems {
	display:inline-block;
	position:relative;
	margin:5% 0 0% 0;
	
}

#about {
overflow: auto;}



.selecteditems p, .webmessage p,  #about p{
	font-size:65px;
	line-height: 100px;
	letter-spacing: 11px;
	text-transform: uppercase; 
	width:53%;
	padding:14% 8% 5% 14%;
	float:left;
	color:#333;
}


.webmessage p, #about p{
	font-size:58px;
}
.webmessage p{
	width:95%;
	padding: 14% 8% 20% 14%;
}

#about{
	position:relative;
	top: 50%;
	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
	padding: 5%;
	width:65%;
	margin:0 auto;
}

#about p{
	padding:0%;
	width:100%;
}

#about h3{
	font-family: Lato-regular, Segoe, segoe UI, sans-serif;
	font-size:18px;
	letter-spacing: 9px;
	padding-bottom: 4%;
	padding-top:1%;
}

.selecteditems .selected {
	width:65%;
	margin-top:0%;
	margin-bottom:7%;
	float:right;
	
}

.selecteditems .selected .largebox {
	width:90%;
	position:relative;
	overflow:auto;
	margin-top:5%;
	display:block;
	background: repeating-linear-gradient(
	  35deg,
	  #555,
	  #555 .65px,
	  #fff .75px,
	  #fff 10px
	);
	box-shadow: 0 4px 8px 0 rgba(112,112, 112, 0.1), 0 6px 20px 0 rgba(112, 112, 112, 0.19);
	z-index:1;
}

.selecteditems .box{
	right:0;
	width:75%;
	background:#f6eee6;
	height:1100px;
	float:right;
	margin-top:-95%;
	z-index:-1;
	
}


.selecteditems .selected img  {
	width:45%;
	padding:6% 0 6% 1%;
	margin:1%;
	float:left;
	position:relative;
	
	
}

.selecteditems .selected .marginleft{
	margin-left:2%;
	padding-left:3%;
}



.selecteditems .selected .marginright{
	margin-right:2%;
	padding-right:3%;
	
}


.selecteditems .selected .margintop img{
	margin-top:4%;
	margin-bottom:0%;
}

.selecteditems .selected .marginbottom img{
	margin-top:0%;
	margin-bottom:4%;
}

#process .left{
	width:45%;
	position:relative;
	float:left;
	}


#process .right{
	width:55%;
	float:right;
	padding:5% 0 5% 5%;
}

#process .right img{
	padding:5% 0;
	width:100%;
}

.icon_process .left:before{
	content: "";
	margin-left:0%;
	margin-top:12%;
	background:#F9DC3B;	
	
	display:block;
	padding-top:100%;
	position:relative;
	width:70%;
	}



.icon_process .left img{
	position:absolute;
	top: 20%;
	right: 0%;
	max-width:100%;
	padding:12% 0 0% 8%;
}

.email_process .left svg{
	width:100%;
	left:0%;
	padding:10% 0 0 0;
	position:relative;
	vertical-align:text-top;
}

.tb_process .left img {
	width:94.5%;  
	margin:0% auto 0 5%;
}


.fullsize {
		width:100%;
	margin-top:10%;
	padding:0 15%;
	}





.fixed-bg,.fixed-bg2,.fixed-bg3, .fixed-bg4, .fixed-bg5 {
  min-height: 900px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top:10%;
  margin-bottom:10%;
  z-index:-100;
}




.fixed-bg {
	background-image: url("images/seeforks.jpg");
}



.fixed-bg2 {
  background-image: url("images/mayo_large.png");
  
}

.fixed-bg3 {
  background-image: url("images/lemon_large.png");
background-position: bottom right;
 
}

.fixed-bg4 {
  background-image: url("images/ke_large.png");
	background-position: bottom right;
 
}

.fixed-bg5 {
  background-image: url("images/saaff_wide.png");
 background-position: top left;
}




#process .right h2{
	font-size:16px;
	letter-spacing: 3.5px;
	line-height: 27px;
	position:relative;	
	text-align: center;
	margin-bottom: 6%;
		
}




#android h2, #hdpi h2, #fuji_graphic h2, #hive1 h2{
	font-size:14px;
	text-align: left;
	letter-spacing: 3.5px;
	line-height: 27px;
		
}


#android, #hdpi, #fuji_graphic, #hive1{
	margin:2% auto 12% auto;
	overflow: hidden;
	position:relative;
}

.otherprojects{
	margin:13% auto 4% auto;
	overflow: hidden;
	position:relative;
	width:100%;
	
}




.otherprojects h4{
	padding: 0% 1% 3.5% 0;
	font-size:18px;
	text-align: right;
	font-weight:bold;
	letter-spacing: 10px;
	line-height: 50px;
	width:450px;
	float:right;
	}




.otherprojects  p{
	text-align:right;
	letter-spacing: 6px;
	font-size:13px;
	margin-right:3%; 
	margin-top:15%;
	margin-bottom:5%;
	border-bottom: 1px solid #aaa;
	line-height: 0.1em;
	width:230px;
	float:right;
	font-weight:600;
}


.otherprojects p span {
	color: #666;
    background: #fff;
    padding: 0 0  0 13% ;
}



#hdpi .right, #hive1 .right{
	width:60%;
	display:block;
	float:right;
	
	}

#fuji_graphic .left{
	width:55%;
	display:block;
	margin-top:8%;
	float:left;
	
	}
#fuji_graphic .right{
	width:40%;
	display:block;
	float:right;
	
	}
#android .left, #hive .left, #hive .right{
	width:48%;
	display:block;
	
	}

 #hdpi .left, #hive1 .left{
	width:35%;
	
	}


#android .right{
	width:43%;
	float:right;
	}


#hdpi .right img, #android .left img, #fuji_graphic img{
	width:90%;
	display:block;
	
	}

#hdpi .right img{
	float:right;
	
	}
#android .left img{
	float:left;
	
	}

 #fuji_graphic .left img{
	 
	 margin:13% 0 5% 3%;
	 float:left;
	 padding:2.5%;
	box-shadow: 0px 0px 20px 0px rgba(112, 112, 112, 0.19);
	}
#hdpi .text, #hive1 .text{
	text-align: left;
	padding:60% 0% 0% 3.5%;
	}

#fuji_graphic .text{
	text-align: left;
	padding:13% 8% 10% 12%;
	width:100%;
	}

#android .text{
	text-align: left;
	padding:40% 0% 0% 0%;
	}




.top {
position:relative;
	z-index:-1;
}

#illustrationtop{
	background-image: radial-gradient(#555 6%, transparent 0), radial-gradient(#555 6%, transparent 0);
    background-size: 16px 32px;
    background-position: 0 0, 8px 16px;
}




.top #main_sample, .top #main_image, .top #main_web, .top .main_image{
	 width:800px;
	 position:relative;
	display:block;
	margin:0 auto;
	z-index:-1;
}


.top #main_web {
	width:850px;
}

.top #main_sample img, .top #main_image img, .top #main_image svg, .top #main_web img, .top .main_image img{
	 width:100%;
}

.top #main_sample img{
	padding:5.5% 3% 0% 3%;
}



.top .title{
	font-family: Lato-black, Segoe, segoe UI, sans-serif;
	position:relative;
	padding-top:5%;
	left:0%;
	width:100%;
  	animation-name: title;
  	animation-duration: 2s;
  	animation-fill-mode: forwards;
	text-align:center;
	font-size:60px;
	color:#888; 
	background: repeating-linear-gradient(
	  45deg,
	  #888,
	  #888 1.05px,
      #fff 1.1px,
      #fff 2.35px
	); 
	 
	  -webkit-background-clip: text;
	-webkit-text-stroke-width:.5px;
	-webkit-text-fill-color: transparent;
}


@keyframes title {
	
   0%  {top:-50px;}
   100% {top:10px;}
}







#logoblack .title{
  	animation-name: titleblack;
	-webkit-text-stroke-width:.5px;
	-webkit-text-fill-color: transparent;
	background: repeating-linear-gradient(
	  45deg,
	  #888,
	  #888 1.05px,
      #fff 1.1px,
      #fff 2.35px
	); 
	  -webkit-background-clip: text;
	color:#888;
}

@keyframes titleblack {

	0%  {top:-50px;}
   100% {top:40px;}
}

.top p{
	display:block;
	position:relative;
	font-size:110px;
	letter-spacing: 7px;
	line-height:120px;
	
}

.imagedisplay {display:none;}


.display-container {
	position:relative;
	margin:9% auto 0 auto;
	clear:both;
	
}
.arrows {
	position:relative;
	margin:20% auto 0% auto;
    padding: 80px;
}


.content2 img{
	margin:0% auto;
	display:block;
	max-width:64%;
}




.black{
	font-size:13px;
    color: #f0c7ab!important;
	background-color: #fff !important;
	text-decoration:none;
}

.black:hover{
	font-size:13px;
    color: #bbe0bf !important;
    background-color: #fff !important;
	text-decoration:none;
	
    border: #bbe0bf solid 1.5px;
}



.display-left{
	position:absolute;
	top:50%;
	left:8%;
	-ms-transform: translate(-0%,-50%);
    transform: translate(0%,-50%);}

.display-right {
	position:absolute;
    top:50%;
    right: 8%;
	-ms-transform: translate(0%,-50%);
    transform: translate(0%,-50%);
    
}


 .arrows a{
	color:#444;
	font-size:14px;
	font-family:lato-light, sans-serif, Segoe, segoe UI;
	font-weight:600;
    padding-bottom: 70px;
}

 .arrows a:hover{
	color:#444;
	 
}
	
.arrows span {
	font-size:19px;
	border:solid 1px #444;
    font-weight: 100 !important;
	letter-spacing: 0;
	
	}

.arrows span:hover {
	border:solid 1px #ECD113;
	background:#ECD113;
	color: #fff;
	}

.arrows .display-left span{
	margin-right:2.5%;
	/*padding:3.5px 5.2px 4.25px 5.2px;*/
}
.arrows .display-right span{
	margin-left:5%;
	
	/*padding:3.5px 5.2px 4.25px 5.2px;*/
}
.arrows .display-right, .arrows .display-left{
	
	position:absolute;
	top:35%;
	right:0;
	-ms-transform: translate(0%,-35%);
	transform: translate(0%,-35%);
}

.arrows .display-left{
	left:0;
}

.arrows .display-right{
	width:35%;
	text-align: right;
}


.arrows .center {
	font-size:14px;
	letter-spacing: 3px;
	position:absolute;
	text-align:center;
	top:0;
	left:51%;
	
	-ms-transform: translate(-51%,0%);
	transform: translate(-51%,0%);
	border:solid 1px #444;
	padding:27px;
}

.arrows .center:hover {
	background:#ECD113;
	color:white;
	border:solid .1px #ECD113;
	
	font-family:lato-regular;
}

.round{
	border-radius: 50%;
	padding: 3.5px 5px;
}



.btn, .button {
    border: #f0c7ab solid 1.5px;
    display: inline-block;
    padding: 15px 15px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}



.button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
button{
    -webkit-appearance: button;
}
button{
    text-transform: none;
}



.animate-right{position:relative;animation:animateright 1.5s}
@keyframes animateright
{from{right:-300px;opacity:0} 
to{right:0;opacity:1}}









/*firefox*/

@-moz-document url-prefix() {
	
h2,h3,h5, .name h1 {
    font-weight: lighter !important;
  }

.arrows .display-right span, .arrows .display-left span {
    padding: 6.5px 5.5px 4px 5.5px;
}
	
.top .title, #logoblack .title {
    
    -webkit-text-stroke-width: .35px;
}
	
}



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

 .selecteditems .box{
	height:1000px;
}
	

.name {
margin-top:18%;
padding-left:11%;
	width:33%;
}

.name h1{
	font-size:26px;
	line-height:40px;
	
}
.name h5{
	font-size:55px;
	line-height:67px;
	padding-top:0%;
	
}


.home_img img{
	width:60%;
	margin-left:20%;
	
}
	
.fixed-bg2 {
 background-image: url("images/mayo_wide.png");
  
}
.fixed-bg3 {
background-image: url("images/lemon_wide_center.png");
background-position: bottom right;
 
}
	
.fixed-bg4 {
  background-image: url("images/ke_wide_center.png");
 
}
}


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

.name {
padding-left:10%;
}

.selecteditems .box {
    height: 900px;
}
	
.selecteditems p,  .webmessage p,  #about p{
	font-size:55px;
	line-height: 85px;
	letter-spacing: 10px
}
	
.webmessage p,  #about p{
	font-size:50px;
}
	
#icon_review .samewidth{
	overflow:hidden;
}


#icon_review #mono img, #icon_review #moreoption img, #icon_review #chara img {
	width:88%;
	margin:0 auto;
	display:block;
	
}
	
/*#icon_review #mono img{
	float:right;
	margin-right:5%;
}*/

#icon_review #moreoption img{
	width:58%;
}

#icon_review #chara img{
	width:65%;
}	

}


@media screen and (max-width:1600px) {
	
.selecteditems p{
	width:56%;
}

.top #main_sample, .top #main_image,.top .main_image{
	width:780px;
	}

.top #main_web {
	width:830px;
	}

	.home p {
		width:85%;
	}
.hoverzoom {
      height: 720px;
      }
	
.bgtitle{
	padding-top:21%;
	padding-bottom:23%;
}

.bgtitle p {
    width: 35.5%;
}
	

	
.display-left {
	left:4%;}

.display-right {
    right: 4%;
    
}
	
.selecteditems .box {
    height: 800px;
}
	
		
}

@media screen and (max-width:1500px) {
	
.top #main_sample, .top #main_image,.top .main_image {
    width: 740px;
}

.top #main_web {
	width:787px;
	}
	


.selecteditems p{
	font-size:45px;
	line-height: 70px;
	width:53%;

}

.webmessage p, #about p{
	font-size:43px;
	line-height: 70px;
}
.webmessage p {width:95%;}

#about h3 {
    font-size: 16px;
}
	
.fixed-bg, .fixed-bg2, .fixed-bg3, .fixed-bg4, .fixed-bg5 {
    min-height: 820px;
}
}


@media screen and (max-width:1440px) {
.hoverzoom {
      height: 640px;
      }
	
.top p{
	line-height:100px;
	
}	



	
.name {
padding-left:6%;
}
	
.home_img img{
	width:67%;
	display:block;
	margin-left:20%;
}
.top .title, #logoblack .title {
    padding-top:4%;
}
	
.top #main_sample, .top #main_image, .top .main_image{
    width: 680px;
}
	
.top #main_web {
	width:724px;
	}
	

	
.selecteditems .box {
    height: 730px;
}
	

#icon_review .samewidth p {
    padding: 12% 10.5%;
}

	
}




@media screen and (max-width:1366px) {
	.selecteditems p {
    width: 54%;
    padding: 8% 8% 5% 10%;
}

.selecteditems .box{
	height:670px;
	margin-top:-95%;
	
}

	
	
}



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


	
.sub,.exploration{
	width:80%;
	margin:0% auto;
}


		
.details{
	width:100%;
	}


#process .right {
	padding:2.5% 0% 2.5% 8%; 
	}


.icon_process .left:before{
	margin-top:7%;
	padding-top:95%;
	}


.icon_process .left img{
	top: 15%;
}



	
.hoverzoom {
      height: 550px;
      }
	

	
#about {
	width:75%;
}
	
.fullsize {
    padding: 0 10%;
}

}


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



		.name {
		margin-top:21%;
	}
	
	.name h1 {
	font-size:23px;
	line-height:38px;
	letter-spacing: 8px;
	
}
.name h5{
	font-size:48px;
	line-height:54px;
}	
	
	.home_img img {
		width:72%;
	}



.bgtitle{
	min-height: 600px;
	padding-top:26%;
	padding-bottom:26%;
}



.bgtitle p{
	width:42%;
}

	

}

@media screen and (max-height:600px) {
#about{
    top: 0%;
	-ms-transform: translateY(0%);
    transform: translateY(0%);
	margin-top:5%;
}
}


@media screen and (max-height:600px) and (max-width:700px) {
#about{
    top: 30%;
	-ms-transform: translateY(-30%);
    transform: translateY(-30%);
}
}

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


.sub span:before {
	right:26%;
}		
	


.selecteditems .box{
	height:600px;
	margin-top:-95%;
	
}
 .selecteditems p {
    width: 60%;
}
	
		
.hoverzoom {
      height: 480px;
      }
	
.fixed-bg,.fixed-bg2,.fixed-bg3, .fixed-bg4, .fixed-bg5 {
 
  min-height: 550px;
background-size:auto;
	background-attachment: scroll;
  
}
	
.fixed-bg {
	background: #a0d9d8 url("images/seeforks_mid.jpg") no-repeat;
	background-position: bottom;
	
}

.fixed-bg2 {
  background: #ecd119 url("images/mayo_mid.png") no-repeat;
  background-position: bottom;
}

.fixed-bg3 {
  background: #f6f6f6 url("images/lemon_mid1.png") no-repeat;
background-position: bottom right;
 
}

.fixed-bg4 {
  background:#b7e0d9 url("images/ke_mid.png") no-repeat;
	background-position: bottom right;
 
}
	
#examples p{
	width:45%;
	margin: 7% 0% 8% 16%;
	
}
#icon_review .samewidth {
	width: 100%;
	margin:-5% auto;
	}
	
#icon_review .samewidth p,#icon_review .samewidth #mono, #icon_review .samewidth #chara, #icon_review .samewidth #moreoption {
	width:50%;
	}
	
 #icon_review .samewidth span{
	display:none;
	}	

#icon_review #mono img {
    float: none;
    margin-right: auto;
	width: 85%;
}
	
.largemed{
	width:49.7%;
	
	
}

}



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

#about p {
    width: 100%;
}
.webmessage p,  #about p{
	font-size:40px;
}

#menu{
	top:6%;
	right:4%;
	position:absolute;
}
h1 {
	font-size:20px;
	}

h2 {
	font-size:21px;
	letter-spacing: 2.5px;}
	


.selecteditems .selected {
    width: 80%;
    margin-top: 10%;
}

.selecteditems .box {
    height: 670px;
}

.selecteditems p {
    width: 80%;
}
}


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

/*#emailtitle .title{
	left:67%;
	font-size:82px;
	padding-top:1%;
	line-height: 88px;
}*/

 
.name {
		padding-left: 5%;
		margin-top:21%;
	}
	
.name h1 {
	font-size:23px;
	line-height:36px;
	
	
}
.name h5{
	font-size:48px;
	line-height:54px;
}	
	
.home_img img {
		margin-left: 21%;
	}

	.selecteditems .box {
    height: 650px;
	
}
	
	.hometext {
    font-size: 14px;
}

}




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


.icon_process .left:before{
	margin-top:7%;
	padding-top:110%;
	}

.icon_process .left img{
	top: 25%;
}
	
.sub span:before {
	right:30%;
}
	
.sub p{
line-height:26px;
letter-spacing:2.5px;
word-wrap:break-word;
}

.otherprojects p {
	line-height: 0.1em;	
	letter-spacing: 5px;
    width: 200px;
	}
	
#underconstruction h1 {
	font-size:60px;
	
}
	



}




@media screen and (max-width:960px) {
	
#process{
	margin:13% auto 7% auto;
}

	
#process .left {
	width:60%;
	float:none;
	}

.icon_process .left, .email_process .left{
	margin: 0 auto 8% auto;	
	}
	
.tb_process .left{
	margin: 0 auto 0% auto;	
	}
	
.icon_process .left:before{
	margin-top:0%;
	padding-top:78%;
	width:40%;
	}



.icon_process .left img{
	width:83%;
	top:5%;
	display:block;
	padding:0;
	margin:0 auto;
	left:0;
	}
	

#process .right h2  {
	display:none;
}
	
	
		
#process .right {
	width:70%;
	display:block;
	padding:8% 0% 5% 0%;
	float:none;
	margin:0 auto;
	}
	
#process .right img {
	width:100%;
	display:block;
 	margin:0 auto;
		
	}
	
.otherprojects {
    margin: 18% auto 8% auto;}
	

	
#process .small h2 {
	text-align:center;
	display:block;
	font-size:14px;
	}
	
.icon_process .small h2, .email_process .small h2, .tb_process .small h2 {
	letter-spacing: 7px;
	padding:3% 0 14% 0;
	}

	
.email_process .small h2,.tb_process .small h2 {
	padding-bottom:0%;
	}
	
.tb_process .small h2 {
	padding-bottom:3%;
	}


	
.tb_process .left img {
	margin:2% 0 0 0;
	width:100%;
	}
	
#android h2, #hdpi h2{
	padding: 0% 2.5% 2% 0;
	letter-spacing: 4px;
		
}
	
.name h1 {
	font-size:22px;
	line-height:34px;
		letter-spacing: 7.5px;
	
}
.name h5{
	font-size:45px;
	line-height:52px;
}


	

.list {
      padding: 20px;
      }

#examples p{
	width:55%;
	margin: 5% 8% 10% 13%;
	float:none;
}
	
#examples img {
	margin-right:8%;}
}

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

.otherprojects h4 {
	padding-right:6.5%;}

#hdpi .right, #android .left{
	width:100%;
	}
	
 #fuji_graphic .right, #fuji_graphic .left{
		width:100%;
		margin:0 auto;
		padding:0;
		
	}
#android .left img{
	width:88%;
	display:block;
	margin:0 auto;
	float:none;
	}

#hdpi .right img {
		float:none;
	margin:0 auto;
	}
#fuji_graphic .left img {
	width:85%;
	float:none;
	margin:8% auto;
	}
	
#fuji_graphic .right img {
	width:60%;
	float:none;
	margin:0 auto;
	}	
	
#hdpi .left, #android .right{
	width:80%;
	float:left;
	}



#hdpi .text, #android .text{
	padding:10% 0 3% 9%;

}
#fuji_graphic .text{
	width:80%;
	display:block;
	margin:0 auto;
	padding:10% 0% 3% 0%;
	}

h1 {
	font-size:17px;}
	
.email_process .left svg {
	height:100% !important;
	}

#cc_exploration .exploration img {
    width: 48%;
}





.bgtitle {
	min-height: 400px;
	padding-top: 30%;
    padding-bottom: 30%;}
	
.bgtitle p {
    width: 49%;
}

	
.selecteditems .box {
    height: 570px;
}

#about {
    width: 80%;
}
.medlit{
	width:26.49%;
	}
.medium2{
	width:36.1%;
	}
	
#icon_review #mono img, #icon_review #moreoption img, #icon_review #chara img {
	width: 87%;}
#icon_review #moreoption img {
    width: 67%;
}
#icon_review #chara img {
    width: 70%;
}

}
@media screen and  (max-width: 860px) {

.arrows .display-right, .arrows .display-left{
	color:white;
}
	
.arrows .display-right span, .arrows .display-left span{
	color:#333;
}
.arrows .display-right span:hover, .arrows .display-left span:hover{
	color:white;
	
}
	
.arrows .display-right:hover, .arrows .display-left:hover{
	color:white;
}
	

	
.little{
	width:19.5%;
}
	
#container{
		width:100%;
		margin:0 auto;
	}
	
.small_left, .small_right, .large_left, .large_right {
		width:100%;
		float:none;
	}


	/*list*/
	
	
.sub{
		margin-top:5%;}

#process .right .desktop_img, .webdesign_samples .desktop_img, .desktop_img p {
	display:none;
}


	
.mobile_img img {
	text-align:center;
	display:block;
	margin:0 auto;
	width:70%;
	}
	
.mobile_img p {	
	display:block;
	}

.webdesign_samples .mobile_img img{
	margin-top:10%;
	width:100%;
		
	}
	
#process .right {
		width:50%;
	padding-top:15%;
	}
	
#underconstruction h1 {
	font-size:50px;
}
	
.name h1 {
	font-size:20px;
	line-height:31px;
	
}
.name h5{
	font-size:40px;
	line-height:48px;
}


	
.top .title, #logoblack .title {
    padding-top: 7%;
	line-height: 80px;
	font-size: 55px;
}


.top #main_sample, .top #main_image, .top #main_web, .top .main_image  {
    width: 75%;
}

	
.top #main_web img{
padding: 3% 0% 2% 0%;
}
	
.selecteditems p,  .webmessage p, #about p{
	font-size:35px;
	line-height: 55px;
}
	
	.webmessage p {width:95%;}
	
#description h1 {
    font-size: 110px;
    height: 110px;
	letter-spacing: 25px;
	text-align: center;
}


.selecteditems .box {
    height: 520px;
}
	
#exploration2, #exploration3 {
    margin: 0 ;
}	
#exploration2 img {
	width:46%;	
	}	

.content2 img {
    max-width: 60%;
}
	

#icon_review .samewidth {
	margin: 5% auto;
	width:85%;
	box-shadow: inset 0px 0px 30px -10px #ededed, inset 0px 0px 30px -10px #ededed;
	}

#icon_review #review2{
	box-shadow: none;
	}
	
#icon_review .samewidth p, #icon_review #review3 p, #icon_review #review2 p {
	width:100%;
	float:none;
	box-shadow: none;
	padding: 12% 10.5% 0 10.5%;
}
	

	
#icon_review .samewidth #mono, #icon_review .samewidth #chara, #icon_review .samewidth #moreoption {
	width: 85%;
    position: relative;
	background:none;
	float:none;
    top: 0%; 
    right: 0%;
    -ms-transform: translateY(0%);
    transform: translateY(0%);
	margin: 0 auto;
	z-index: 0;
	}


	
#icon_review #mono img, #icon_review #moreoption img, #icon_review #chara img {
    width: 100%;
    padding: 13% 10%;
}


#icon_review #mono img {
    float: none;
    margin-right: 0%;
	padding: 7% 10% 15% 10%;
}

#icon_review #moreoption img, #icon_review #chara img {
    width: 75%;
}
	
#icon_review #chara img {
    width: 85%;
}
	
#icon_review {
    margin: 23% auto 25% auto;
}
	
#examples {
    margin-bottom: 20%;
}
}


			
@media screen and (max-width:780px){
	
#exploration2 img {
    width: 80%;
    display: block;
    margin: 0% auto 5%;
}
.name {
		margin-top:25%;
	}
	
.name h1 {
	font-size:18px;
	line-height:30px;
	
	
}
.name h5{
	font-size:34px;
	line-height:42px;
	letter-spacing: 9px;
}	
	
.hoverzoom {
      height: 370px;
      }



	
#cc_exploration h3, #webdesign_samples h3, .amthreeimg h3, .amoneimg h3 {
    padding-top:15%;
}

#cc_exploration, #webdesign_samples {
	padding-bottom:15%;
	}
	
.display-container {
    margin: 9% auto 8% auto;
}
	
}
@media screen and (max-width:760px) {
#web_process img {
	width:90%;
	}


.selecteditems p {
    font-size: 30px;
	width:75%;
}


	
.top #main_sample, .top #main_image, .top #main_web, .top .main_image{
    width: 70%;
}
.sub {
    margin-top: 2.5%;
}
.top .title, #logoblack .title {
	font-size:48px;
	letter-spacing: 5px;}

.selecteditems .selected {
    width: 75%;
	margin-top:10%;
}
	
.selecteditems .box {
    height: 470px;
}
	
#hdpi .left, #android .right {
    width: 90%;
}


.largemed {
	width:49.6%;	
	}	



}



@media screen and (max-width:700px) {
.item1, .item2, .item3, .item4 {
    grid-column: 3/ span 8;
}


	
#exploration1 img {
    width: 60% !important;
}
.selecteditems .box {
    height: 440px;
}	

.selecteditems .selected .largebox {
		width:90%;}
	
	

	.selecteditems p,  .webmessage p, #about p{
    width: 95%;
    font-size: 22px;
    letter-spacing: 7px;
    line-height: 45px;
}
	.webmessage p{
		width:95%;
	}
	

#about h3 {
	letter-spacing: 6px;
	font-weight:500;
	font-size:14px;
}
	

.top .title, #logoblack .title {
    font-size: 40px;
	line-height: 60px;
}

#logoblack .title {
	animation-name: title;
	}
#about {
    width: 85%;
}
.large, .medium, .medium2, .little {
    margin-top: 2.25%;
    padding: 0 .75%;
}
.large {
    width: 59.5%;
}	
#kaba1 {display:none;}
#kaba2 {display:block;}
	
.little {
    width: 18.05%;
}
	
h3 {
    font-size: 13.5px;
	letter-spacing:1.75px;
}
	



#examples {
    margin-bottom: 25%;
}
	
#examples p{
	width:75%;
	margin: 5% 8% 13% 13%;
}
	
#examples img {
	width:82%;
	}
	
#icon_review .samewidth #mono, #icon_review .samewidth #chara, #icon_review .samewidth #moreoption {
	width:90%;
	}

}

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

#production2 .desktop_img {
		display:none;
	}

#production2 .mobile_img{
	display:block;
	}
#production2 .mobile_img img {
	text-align:center;
	display:block;
	margin:0 auto;
	width:100%;
	}
	
#production2 .line{
	width:90%;	
	}

.name {
		margin-top:30%;
		padding-left:0%;
		width: 25%;
	}
	
.name h1 {
	font-size:16px;
	line-height: 24px;
	letter-spacing: 6px;
	
}
.name h5{
	font-size:28px;
	line-height:37px;
	letter-spacing: 8px;
}	
	

#home_name img{
	width:100%;
	margin-left:10%;
}

#home_name{
	width:75%;
	padding-top:12%;
}

.home_img {
    width: 50%;
}
	
#process .small h2 {
	letter-spacing: 3.75px;
	}
	
.amoneimg h3{
	margin:22% auto 0% auto;
	text-align: center;
	letter-spacing:4.5px;
	
}

.oneimg img{
    width: 85%;
	padding-bottom:15%;	
}
	


.large, .medium, .medium2, .largemed, .medlit{
	width:100%;
	
}

	
	
#webdesign {
	float:none;
}


#description h1 {
    font-size: 80px;
    height: 80px;
	letter-spacing: 20px;
}
	

.bgtitle {
	min-height: 400px;
	padding-top: 35%;
    padding-bottom: 35%;}
	
.bgtitle p {
    width: 60%;
}
	
.top #main_sample img {
    padding: 8% 4.35% 0% 4.35%;
}
	
	
.selecteditems .box {
    height: 410px;
}
	
.large, .medium, .medium2, .little, .medlit, .largemed {
	margin-top:4%;
	}

	}


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

.selecteditems .box {
    height: 390px;
}

.home_img {
    width: 100%;
    z-index: -1;
    position: relative;
}
	
#home_name img {
    width: 80%;
    margin: 0 auto;
	
}

.home_img [data-aos^=fade][data-aos^=fade].aos-animate {
    opacity: 0.55;
	    transition-property: opacity,transform;


}
	

	
.home_img	[data-aos^=fade][data-aos^=fade] {
		opacity: 1;
	}

	
#jacket
{display:none;}
#jacket_small
{display:block;}
	
.name {
    margin-top: 0%;
    padding-left: 0%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 45%;
    padding-right: 0;
	-ms-transform: translate(0,-45%);
	transform: translate(0,-45%);
	animation-name:name;
	animation-duration: 4s;
	height:65px;
}


.name h1 {
    font-size: 16px;
    text-align: center;
}

.name h5{
    text-align: center;
}

#home_name{
	padding-bottom:7%;
	overflow:hidden;
}
	
#work_list {
	padding-top:0;
	}
	
}

@keyframes name{
  0% {opacity:0;}
  100% {opacity:1;}}


	
@media screen and (max-width:600px) {
.hometext {
	font-size:11px;
	letter-spacing: 2px;
	}	
#exploration3 img {
    width: 29.8%;
}
#signage_samples img {
    width: 46%;
	padding:1.25%;
}
#fuji_graphic .left img {
    width: 92.5%;
   
}
	
#fuji_graphic .right img {
    width: 70%;
   
}
	
#process {
    margin: 13% auto;
}
#process .right {
    width: 70%;
	padding-top:20%;
}
	
.amthreeimg img {
    width: 29.5%;
    
}

	
#process .left {
		width: 90%;}
	

	
#logoblack::after {
	border-width: 5vh 50vw;
}



.top p{
		letter-spacing: 5px;
	}
	
.mobile_img img {
	width:100%;
	}
	
	
#hdpi .text, #android .text{
    padding: 10% 0 3% 4%;
}


#hdpi .right img, #android .left img, #fuji_graphic img {
    width: 100%;
}
	
#android .left img {
    width: 95%;
}
	
.otherprojects{
    margin: 20% auto 11% auto;
	position:relative;
	width:100%;
	
}
	
.otherprojects h4{
		padding-right:0;
		letter-spacing: 9px;
		width:50%;
		line-height:36px;
		text-align: left;
		float:left;
		padding-left:4%;
		font-size:20px;
}




	


	


	
	
.selecteditems .box {
    height: 360px;

}
	
.hoverzoom {
      height: 270px;
      }
	


.top .title, #logoblack .title {
    font-size: 35px;
    padding-top: 12%;
	letter-spacing: 4px;
	background:repeating-linear-gradient(
	45deg,
	#888,
	#888 .705px,
	#fff .59px,
	#fff 2px
	);
	-webkit-background-clip:text;
	
}
	


	
#cc_exploration h3, #webdesign_samples h3, .amthreeimg h3, .amoneimg h3 {
    padding: 15% 0 8% 0;
}
	
.amoneimg h3 {
	padding: 15% 0 6% 0;
	}

	
.selecteditems .selected {
	width:80%;
	}
	



	
#moreoption, #chara{
		width:100%;
	}

#mono{
		width:75%;
	}
#menu{
    top: 4%;
}

.overlay a {
    padding: 13px;
}

.fixed-bg, .fixed-bg2, .fixed-bg3, .fixed-bg4, .fixed-bg5 {
    min-height: 430px;
}

.fixed-bg {
	background: #a0d9d8 url("images/seeforks_small.jpg") no-repeat;
	background-position: bottom;
	
}

.fixed-bg2 {
  background: #ecd119 url("images/mayo_small.png") no-repeat;
  background-position: bottom;
}

.fixed-bg3 {
  background: #f6f6f6 url("images/lemon_small.png") no-repeat;
background-position: bottom right;
 
}

.fixed-bg4 {
  background:#b7e0d9 url("images/ke_mid.png") no-repeat;
	background-position: bottom right;
 
}
	
#webdesign_samples .marginleft, #webdesign_samples .marginright, .production .marginleft, .production .marginright{
	margin:2% 0 4% 0;
	width:100%;
    }

	
.otherprojects p {
	margin-right:0;
	}
.arrows {
	padding:60px;
	}	
.arrows a {
	padding-bottom: 30px;}
	


	
}


@media screen and (max-width:560px) {
	.selecteditems .box {
    height: 320px;
}
	
#home_name img {
    width: 100%;
}
.arrows .center {
		width:55%;
	font-size:12px;
	}

.hovertext {
	/*transition:1s;*/
	display:none;
	}
	
.display-left {
    top: 155%;
    left: 42%;
    -ms-transform: translate(-42%,-155%);
    transform: translate(-42%,-155%);
}

.display-right {
    top: 155%;
    right: 33%;
    -ms-transform: translate(-33%,-155%);
    transform: translate(-33%,-155%);
}
	
.display-container {
    margin: 4% auto 18% auto;
}

.content2 img {
    max-width: 100%;
}

.round{
	padding:3.5px 6px;
	}
	
#icon_review .samewidth {
	padding: 3% 0 5% 0;
}

#icon_review #review2 p {
	float:none;
	}
}
@media screen and (max-width:500px) {


	
h1 {
    letter-spacing: 2.25px;
}
	
	
.hoverzoom {
      height: 220px;
      }

.top .title, #logoblack .title {
	font-size: 30px;
	letter-spacing: 4px;
	
	-webkit-text-stroke-width: .4px;
	}


/*.top .title span{
	display:none;
	}*/

	
#android h2, #hdpi h2, #fuji_graphic h2 {
    letter-spacing: 3.5px;
}
	
	.selecteditems .box {
    height: 280px;
}
	
.selecteditems .selected {
    margin-top: 15%;
}
	

.name h1 {
    font-size: 15px;
}

.name h5 {
    font-size: 25px;
    line-height: 33px;
	letter-spacing: 7.5px;
}
	
#exploration3 img {
    width: 29.5%;
}
	
	.arrows .center {
		width:65%;
	}
.top #main_sample, .top #main_image, .top #main_web, .top .main_image {
    width: 75%;
}

}

@media screen and (max-width:460px) {
		
	.selecteditems .box {
    height: 240px;
	}

.name h1 {
	font-size: 14px;
	letter-spacing: 3px;
	line-height: 21px;
}

.name h5 {
    font-size: 21px;
    line-height: 27px;
    letter-spacing: 5.5px;
}
	
.top .title, #logoblack .title {
	font-size: 32px;}
	



}