html{
    background-color:white;
	overflow-y:auto;
	overflow-x:hidden;
	width: 100%;              
	margin: 0;
	padding: 0;
	/*border:4px solid black;*/
	height:100%;

}

body, html { font-size: 100%;	}

/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}



body {
    font-family: "raleway", 'playfair display', Helvetica Neue,'Lato',sans-serif;  
	overflow-x:hidden;
	overflow:visible;
 	width: 100%;
     height:100%;
	min-height: 100%;
	margin: 0;
	padding: 0;               
	text-align:left;
	margin:0 auto;
 /*	background-color: rgb(26,25,33);
  	border: 4px solid black;*/
  	background-repeat:no-repeat;
 	background-size:cover;
    background-position:center;
    -webkit-transition: all 0.9s ease-in-out;
	-moz-transition: all 0.9s ease-in-out;
	-o-transition: all 0.9s ease-in-out;
	transition: all 0.9s ease-in-out;
 	background-color: rgb(138,235,231);
 	background-color:white;
 	border-right: 22px solid #111;
 	border-top:23px solid #111;	
 	border-bottom:23px solid #111;	
 	border-left: 22px solid #111;
 	border-right: 15px solid #fff;
 	border-top:22px solid #fff;	
 	border-bottom:22px solid #fff;	
 	border-left: 15px solid #fff;

}


a {
	color: #f0f0f0;
	text-decoration: none;
}


.clear{
	clear:both;
}


.main{
margin:0 auto;

}


/**yowpla**/

@keyframes example {
    from {background-color: white;}
    to {background-color: rgb(159,219,148);}
}

@keyframes example {
    from {background-color: white;}
    to {background-color: white;}
}

.container-yowpla{
	width:100%;
	margin:0px auto;
	text-align:center;
	height:100%;
  	background-repeat:no-repeat;
 	background-size:cover;
    background-position:center;
    -webkit-transition: all 0.9s ease-in-out;
	-moz-transition: all 0.9s ease-in-out;
	-o-transition: all 0.9s ease-in-out;
	transition: all 0.9s ease-in-out; 
	border-bottom:20px solid white;	
	background-color: white;
    animation-name: example;
    animation-duration: 4s;
}

.container-yowpla > header nav {
	display: block;
	margin-top:20px;
	text-align:center;
	position:relative;
	position:absolute; 
	left: 50%; top:80px;
	transform: translate(-50%,0);
}

.container-bottom{
 background-color:rgb(179,229,158); 
 }
 
 #check{
	position:relative;
	top:50%;
	left:50%;
	 -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	width:60%;
	}
 
 .project{
	position:relative;
	font-family:"Playfair display"; 
	font-size: 80px; 
	font-weight:900; font-style:italic;
    margin-top:20px;
}

.role{
	font-family:raleway; 
	padding-top:10px; 
	font-size: 20px;
}

/**yowpla**/

.frame-top{
    border-top:12px solid rgb(20,160,220); 
    top:0px; 
    position:fixed; 
    box-sizing:border-box; 
    z-index:8000; 
    width:100%;
}    
   
.frame-right{
    border-right:12px solid rgb(20, 130, 235); 
    right:0px; 
    position:fixed; 
    box-sizing:border-box; 
    z-index:8000; 
    height:100%;
}   

.frame-left{
    border-left:12px solid rgb(0, 54, 185); 
    left:0px; 
    position:fixed; 
    box-sizing:border-box; 
    z-index:8900; 
    height:100%;
} 

.frame-bottom{
    /*border-bottom:12px solid rgb(20, 100, 255); */
    bottom:0px; 
    position:fixed; 
    box-sizing:border-box; 
    z-index:8500; 
    width:100%;
} 

#child-border{
	border-width:12px 12px 12px 12px;
	border-style:solid;
}

.container-bottom{
	width:100%;
	margin:0px auto;
	text-align:center;
	height:100vh; 	 
/*border-top:20px solid rgb(179,229,158);*/

}

.container{
	width:100%;
	margin:0px auto;
	text-align:center;
	height:100%;
  height:100vh;
  	background-repeat:no-repeat;
 	background-size:cover;
    background-position:center;
    -webkit-transition: all 0.9s ease-in-out;
	-moz-transition: all 0.9s ease-in-out;
	-o-transition: all 0.9s ease-in-out;
	transition: all 0.9s ease-in-out; 
/* 
	border-bottom:20px solid white;	
 */

}


header {
	margin: 0 auto;
}


.home img:hover{
	opacity:1;
}


header span {
	font-weight: 700;
	display: block;
	margin-top:30px;		
}


.home img{
	width:60px;
		width:46px;
	z-index:0;
	/*max-width:100%;
	height:auto;*/
	position:fixed;
	top:50px;
	left:50%;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}


.home {
  	position:relative; 	
  	//*margin-top:10px;*//
	margin-left:-3%;
}

 

/* 
  @keyframes cf3FadeInOut {
  0% {
  opacity:1;
}
25% {
opacity:0.7;
}
45% {
opacity:0.5;
}
55% {
opacity:0.2;
}
100% {
opacity:0;
}
}
 */

 /* 
 @keyframes cf3FadeInOut {
  0% {
  opacity:1;
}
17%{
opacity:1;
}
25% {
opacity:0;
}
92%{
opacity:0;
}
100% {
opacity:1;
}
}




.home img.top {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: 5;
animation-duration: 3s;
animation-delay:2s;
}
 */



.container > header nav {
	display: block;
	margin-top:20px;
	text-align:center;
	position:relative;
	position:absolute; 
	left: 50%; top:80px;
	transform: translate(-50%,0);
		font-family:'Lato', Helvetica Neue, Helvetica,'open sans', sans-serif;
 -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

navbar a{
	color: black;
	margin-left:auto; margin-right:auto;
	text-align:center;
	position:relative;
	width:60px;
	font-size:14px;
	color:#111;
	font-family:'Lato', Helvetica Neue, Helvetica,'open sans', sans-serif;
	font-weight:200;
}


.one {
	width:60px;
	font-family:'Lato', Helvetica Neue, Helvetica,'open sans', sans-serif;
		font-weight:200;
	text-align:center;
	color:black; padding:10px;
	-webkit-transition:all 1s linear;
	-moz-transition:all 0.6s linear;
	-o-transition:all 0.6s linear;
	-webkit-animation: bounceIn_custom 1s ease-in-out;
	-moz-animation: bounceIn_custom 1s ease-in-out;
	-o-animation: bounceIn_custom 1s ease-in-out;
	animation: bounceIn_custom 1s ease-in-out;
}

.navbar .one:hover{
	color:#fff; 
	cursor: pointer; background-color:#333;
}

.one-chosen{
	padding:10px;	text-align:center;
	background:#333;
	font-family:'Lato', Helvetica Neue, Helvetica,'open sans', sans-serif;
	color:#fff;
	font-weight:400;width:60px;
}

/* 
nav ul {
	color: black;
	margin-left:auto; margin-right:auto;
	text-align:center;
	position:fixed;
	top:50%;
	transform: translate(0,-50%);
	list-style:none;
	width:60px;
	right:6%;
	
}

.navbar li{
	color: black;
	font-family: "lato";"avenir", "Helvetica";
	padding:10px;
	font-size: 14px;
	color: black;
	font-weight: 200;
	width:60px;
}

.navbar li a{
	width:60px;padding:10px;
}
 */

.logo-name{
	font-size:14px; position:fixed;
	left:20px;
    
	top:50%;
	 
	font-family:"Raleway", Helvetica Neue, Helvetica,'open sans', sans-serif; 
	font-weight:500; 
	color:black; 
	margin-left:0px;
	letter-spacing:2px;
	word-spacing:5px;
	ms-transform: rotate(-90deg); /*IE 9 */ 
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera*/ 
    transform: rotate(-90deg);
   z-index:10000;
}

.logo-name a{
	color:black; border-bottom:2px solid #333;padding:6px;
}

.logo-name a:hover{
	font-weight:500;
	border-bottom:2px solid transparent;
      -webkit-transition:all 0.5s linear;
    -moz-transition:all 0.6s linear;
    -o-transition:all 0.6s linear;
	-webkit-animation: bounceIn_custom 0.5s ease-in-out;
	-moz-animation: bounceIn_custom 0.5s ease-in-out;
	-o-animation: bounceIn_custom 0.5s ease-in-out;
	animation: bounceIn_custom 0.5s ease-in-out;
}

.extra {
	position:fixed;
	color: black;
	font-family: "Raleway", Helvetica Neue, Helvetica,'open sans', sans-serif;
	right:100px;
    font-size: 14px;
    color:#333;
    z-index:10000;
}

.rotate1 a{
	color: black;position:fixed;
	font-family: "Raleway", Helvetica Neue, Helvetica,'open sans', sans-serif;
	font-size: 15px;
	font-weight:100;
	top:50%;
	top:380px;
	ms-transform: rotate(90deg); /*  IE 9 */
    -webkit-transform: rotate(90deg);/* Chrome, Safari, Opera */
    transform: rotate(90deg);
    padding:6px;
	text-align:top;
	/* 
-webkit-transition:all 1s linear;
	-moz-transition:all 0.6s linear;
	-o-transition:all 0.6s linear;
	-webkit-animation: bounceIn_custom 1s ease-in-out;
	-moz-animation: bounceIn_custom 1s ease-in-out;
	-o-animation: bounceIn_custom 1s ease-in-out;
	animation: bounceIn_custom 1s ease-in-out;
 */
	border-bottom:2px solid #333;

}

.rotate1 a{
        -webkit-transition:all 1s linear;
    -moz-transition:all 0.6s linear;
	-o-transition:all 0.6s linear;
	-webkit-animation: bounceIn_custom 1s ease-in-out;
	-moz-animation: bounceIn_custom 1s ease-in-out;
	-o-animation: bounceIn_custom 1s ease-in-out;
	animation: bounceIn_custom 1s ease-in-out;
    top:50%;
}

.rotate1 a:hover{
	/* 
-webkit-transition:all 1s linear;
	-moz-transition:all 0.6s linear;
	-o-transition:all 0.6s linear;
	-webkit-animation: bounceIn_custom 1s ease-in-out;
	-moz-animation: bounceIn_custom 1s ease-in-out;
	-o-animation: bounceIn_custom 1s ease-in-out;
	animation: bounceIn_custom 1s ease-in-out;
 */
	border-bottom:2px solid transparent;
    color:#fff; 
    cursor: pointer; background-color:#333;
 /* 
	ms-transform: rotate(0deg); /*IE 9 
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera
    transform: rotate(0deg);
 */
}



#main{
	text-align:center;
	display:block;
	top:50%;
	margin-left:50%;
	transform: translate(-50%,-50%);
	width:55%;
	position:relative;
     -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.portfolio {
	color:#555;
	color:#eee;
	font-size: 7.0vh;
	position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
     -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	font-family:"Playfair display", "Raleway", Helvetica Neue, Helvetica,'open sans', sans-serif;
	font-style:italic;
	font-weight: 900;
	word-spacing: 5px; 
	line-height: 110px;
	text-align:center;
	padding-bottom:1px;
	color:rgb(150,63,85);	
	font-size: 80px;
	/* color:rgb(232,74,67);*/
	padding:40px;
	padding-bottom:20px;
	border-bottom: 4px solid rgb(255,153,153);
	border-bottom: 4px solid rgb(0,202,202);
	border-bottom: 4px solid rgb(245,114,100);
	  
	  background-color:none;
	border: none;
	 	-webkit-animation: bounceIn_custom 1s ease-in-out;
	-moz-animation: bounceIn_custom 1s ease-in-out;
	-o-animation: bounceIn_custom 1s ease-in-out;
	animation: bounceIn_custom 1s ease-in-out;
}



.portfolio div{
color:rgb(174,150,113);
	color:rgb(20,20,20);
}

.portfolio .product{
	color:rgb(20,20,20);
font-size:20px; line-height:45px;
	font-weight:bold;
	padding-top:10px;
}

.portfolio div.design{
 	color: rgb(253,91,92);	
 	font-weight:bold;
}

.button{

position:absolute; 
bottom:60px; left:48.5%; 
display:block;
width:44px;height:44px;
border-radius:22px;
font-size:16px;
color:#333;
line-height:39px;
text-align:center;
background:none; 
border:1px solid #333; 	
-webkit-transition:all 0.5s linear;
    -moz-transition:all 0.5s linear;
    -o-transition:all 0.5s linear;
    -webkit-animation: bounceIn_custom 0.5s ease-in-out;
	-moz-animation: bounceIn_custom 0.5s ease-in-out;
	-o-animation: bounceIn_custom 0.5s ease-in-out;
	animation: bounceIn_custom 0.5s ease-in-out;

}

 
.button:hover{

border:1px solid white;
padding-top:20px;
background-color:#fff;
  -webkit-transition:all 0.5s linear;
    -moz-transition:all 0.5s linear;
    -o-transition:all 0.5s linear;
	-webkit-animation: bounceIn_custom 0.5s ease-in-out;
	-moz-animation: bounceIn_custom 0.5s ease-in-out;
	-o-animation: bounceIn_custom 0.5s ease-in-out;
	animation: bounceIn_custom 0.5s ease-in-out;
}


.button .two{display:none}

.button:hover .one{
	display:none;
	-webkit-animation: bounceIn_custom 1s ease-in-out;
	-moz-animation: bounceIn_custom 1s ease-in-out;
	-o-animation: bounceIn_custom 1s ease-in-out;
	animation: bounceIn_custom 1s ease-in-out;
	}
	
.button:hover .two{
	display:inline;
	-webkit-animation: bounceIn_custom 1s ease-in-out;
	-moz-animation: bounceIn_custom 1s ease-in-out;
	-o-animation: bounceIn_custom 1s ease-in-out;
	animation: bounceIn_custom 1s ease-in-out;
	}


#start{
    padding-top:30px;
}

.about-portfolio {
	color:#555;
	color:#eee;
	font-size: 7.0vh;
	margin-top:13vh;
	font-family:"Playfair display", "Raleway", Helvetica Neue, Helvetica,'open sans', sans-serif;
	font-style:italic;
	font-weight: 900;
	word-spacing: 10px; 
	line-height: 110px;
	text-align:center;
	font-size: 50px;
	padding-bottom:1px;
	color:rgb(150,63,85);
	top:200px;
	left:50%;
	position:absolute;
	margin-right:-50%;
	transform: translate(-50%,-50%);
	font-size: 60px;
	/* color:rgb(232,74,67);*/
     -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	
}

#samples{
	margin-top:150px; position:relative;
}
.about{
	padding-bottom:20px; 
	color:#333;
	font-size: 20px; 
	line-height: 44px; 
	font-weight:500;
	font-family: "Raleway", Helvetica Neue, Helvetica,'open sans', sans-serif;
	
	text-align:center; 
	margin-top:150px;
	width:52%; 
	padding:60px 120px 60px 120px; 
	margin-left:25%;
	}

	
	
.about span{
	color: #111; 
	font-weight:bold; 
	padding-left:5px; 
	word-spacing:8px; 
	font-style:italic; font-size: 22px; font-weight:400;
	font-family: "Playfair display", "Raleway", Helvetica Neue, Helvetica,'open sans', sans-serif;
	}

	
.about-thanks {
	font-family: "Playfair display", "Raleway", Helvetica Neue, Helvetica,'open sans', sans-serif;
	font-style:italic;
	font-weight:700;
	font-size: 42px;line-height: 80px;
	padding-bottom:130px; padding-top:130px; 
	margin-left:auto; margin-right:auto; 
	width:70%; text-align: center;
	word-spacing: 8px; 
	margin-top:200px;
	background:#fff;
	border: 1px solid black;
	}
	
.about-thanks span{
	font-family:"Raleway", Helvetica Neue, Helvetica,'open sans', sans-serif;
	font-size:25px;
	word-spacing:5px; 
	font-style:normal; 
	font-weight:200;
	}	

#samples{
	margin-top:-50px;
}

#full-width-footer{
	font-size:12px;
	color:#333;
	font-family:"Raleway", Helvetica Neue, Helvetica,'open sans', sans-serif;
	font-weight:100;
	position: relative;
	width:100%;
	bottom:20px;
	margin-top:100px;
	left:50%;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

#full-width-footer a{
	color:black;
	padding-left:1px;
}

.footer{
  	margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 400px;
    text-align: center;
}


/* Child pages */


/*View All*/

.pics {
	position: relative;	
	clear: both;
	top: 16%;
	left: 0%;
	max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
    	margin: 0 auto;
    

}

.pics2{
	position: relative;
	margin: 0 auto;
	clear: both;

}



.about-child{
	position:absolute;
	padding:50px; 
	margin-left:auto; margin-right:auto; 
	left:50%;
	 -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
	width:65%; text-align: left;
	font-size: 22px; line-height: 60px;
	font-family: "Raleway", Helvetica Neue, Helvetica,'open sans', sans-serif;
}

.project-sample{
	margin-top:200px;
	position:relative;
	transform:translate(-50%,0%);
	width:65%; max-width:100%;height:auto;
	text-align: center;
	border-radius: 1px;
	margin-left:50%;
	transform: translate(-50%,0%);
	 -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

#test-sample{
	height:auto;
	width:100%; 
}

.project-sample-iphone{
	margin-bottom:50px;
	margin-top:200px;
	position:relative;
	transform:translate(-50%,0%);
	width:50%; max-width:100%;height:auto;
	text-align: center;
	border-radius: 1px;
	margin-left:50%;
	transform: translate(-50%,0%);
	 -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}


#test-sample-iphone{
	height:auto;
	width:100%; 
}


.more-sample{
position:relative;
margin-top: 300px;

}

.more-sample div{
		position:absolute;
	padding:50px; 
	margin-left:auto; margin-right:auto; 
	left:50%;
	transform:translate(-50%,0);
	width:65%; text-align: left;
	font-size: 22px; line-height: 60px;
     -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

.more-sample img{
	position:absolute;	
	margin-left:50%; margin-right:auto;
	margin-bottom: 100px;
	transform:translate(-50%,0%);
	width:65%;
	max-width:100%;
	height:auto;
	text-align: center;
	border:5px solid white;
	border-radius: 1px;
	opacity:1;
     -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

.project-sample-small{
	margin-top:150px;position:relative;
	margin-bottom:50px;	
	width: 300px;
	margin-left:auto; margin-right:auto;margin-left:38%;
	text-align: center;
}




.portfolio-child{
	color:#555;
	color:#eee;
	font-size: 7.0vh;
	font-family: 'infini', "raleway", Helvetica Neue, Lucida Grande;
	font-weight: bold;
	word-spacing: 10px; 
	line-height: 238px;
	text-align:center;
	font-size: 198px;
	padding-bottom:1px;
	color:rgb(106,220,166);

}


.portfolio{
	color:rgb(20,20,20); 
	color:rgb(174,150,113);
	font-weight:heavy;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

 .name{
	margin: auto;
	text-align:center;
	color:#111;
	font-size: 50px; /*fallback*/
	font-family: "raleway", "extralight", "avenir", light, Helvetica Neue, Helvetica,'open sans',arial,sans-serif;
	font-weight:400;
	width:1000px;
	padding-left: 50px;
	padding-right:50px;
	padding-bottom:200px;
	/*border-bottom:1px solid black;*/
	margin-top:0px;
}



.down{
	-webkit-transition: all 0.9s ease-in-out;
	-moz-transition: all 0.9s ease-in-out;
	-o-transition: all 0.9s ease-in-out;
	transition: all 0.9s ease-in-out;
}


.grid{
	position:fixed;
	color: black;
	font-family: "raleway", "Helvetica";
	right:9%;
	top:48%;
    font-size: 16px;
    color:#333;

}

.grid a img{
	width: 36px;
}


#more{
	text-align: center;
	margin-top:5%;
	padding-bottom:15%;
	padding-top: 150px;
	/*border-left: 1px solid gray;*/
	width: 55%;
	margin-left:auto; margin-right:auto;
	text-align:center;
	color: #555;
	font-size: 20px;
	line-height: 38px;
	font-family: "raleway";
	font-weight: 200;
}

.test-sample{
	position:relative;
	margin-bottom: 100px;
	height:auto;
	font-size: 15px;
	color:#333;
	text-align:left;
	width:60%;
	margin-left:50%;
	background-color:rgb(159,219,148);
		border:10px solid white;
	 -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
		-webkit-transition: all 3s ease-in-out;
	-moz-transition: all 3s ease-in-out;
	-o-transition: all 3s ease-in-out;
	transition: all 3s ease-in-out;
}

.product-name{
text-align: center;
position:absolute;
left:50%;
top:40%;
 -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
font-family: "playfair display", Helvetica Neue, Lucida Grande;
font-style:italic;
font-size: 40px;
font-weight:700;
color:#111;
z-index:-100;

}

.product-name span{
font-weight:500;
}

.test-sample img{	
/* 
	margin-left:50%; margin-right:auto;
 */
	width:100%;
	max-width:100%;
	height:auto;
	text-align: center;
	opacity:1;
}

.sample{
opacity:1;
-webkit-transition: all 0.9s ease-in-out;
	-moz-transition: all 0.9s ease-in-out;
	-o-transition: all 0.9s ease-in-out;
	transition: all 0.9s ease-in-out;
}


.sample:hover{
	opacity:0;

	-webkit-transition: all 0.9s ease-in-out;
	-moz-transition: all 0.9s ease-in-out;
	-o-transition: all 0.9s ease-in-out;
	transition: all 0.9s ease-in-out;
}

.test-sample-wireframe{
	position:relative;
	height:auto;
	width:65%; 
	 margin-top:50px;
	 margin-left:50%; 
 -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

.test-sample-wireframe img{
	
	width:100%;
	max-width:100%;
	height:auto;
	opacity:1;
}

.test-sample-screens{
	position:relative;
	height:auto;
	position:relative; 
	margin-top:100px;
}

.test-sample-screens img{
	margin-left:50%; margin-right:auto;
 -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);	width:65%;
	max-width:100%;
	height:auto;
	text-align: center;
	border:5px solid white;
	border-radius: 1px;
	opacity:1;
}



.sample-small{
	margin-top:150px;
	margin-bottom:150px;
	margin-left:35%;
	width: 300px;
	margin-left:auto; margin-right:auto;
	text-align: center;
}

.thanks{
	margin-bottom:100px;
	margin-top:50px;
	margin-left:auto; margin-right:auto;
	text-align: center;
}

.thanks a{
	font-family: "raleway", Helvetica Neue, Lucida Grande;
	text-align: left;
	padding:5px;
	padding-right:10px;
	color: rgb(50,50,50);
	font-size: 16px;
	border-bottom:2px solid #333;
	word-spacing: 8px;
	-webkit-transition:all 1s linear;
	-moz-transition:all 0.6s linear;
	-o-transition:all 0.6s linear;
	-webkit-animation: bounceIn_custom 0.6s ease-in-out;
	-moz-animation: bounceIn_custom 0.6s ease-in-out;
	-o-animation: bounceIn_custom 0.6s ease-in-out;
	animation: bounceIn_custom 0.6s ease-in-out;
}

.thanks a:hover{
	font-family: "raleway", Helvetica Neue, Lucida Grande;
	text-align: left;

	color:#111;

	word-spacing: 8px;
        border-bottom:1px solid transparent;
      -webkit-transition:all 0.5s linear;
    -moz-transition:all 0.6s linear;
    -o-transition:all 0.6s linear;
	-webkit-animation: bounceIn_custom 0.5s ease-in-out;
	-moz-animation: bounceIn_custom 0.5s ease-in-out;
	-o-animation: bounceIn_custom 0.5s ease-in-out;
	animation: bounceIn_custom 0.5s ease-in-out;
}



#child-footer{
	font-size:13px;
	color:#333;
	font-family:"raleway", "avenir";
	font-weight:100;
	width:100%;
	padding-bottom:20px;

}

#child-footer a{
	color:black;
	padding-left:5px;
}

#scroll{
	font-size:13px;
	color:#333;
	font-family:"raleway", "avenir";
	font-weight:100;
	width:100%;
	margin-top:9%;

}



#child-samples{
	margin-top:20px;
}
 


.child-about{
	color:#333;
	font-size: 18px; 
	line-height: 36px; 
	font-weight:500;
	font-family: "raleway","avenir", light, Helvetica Neue, Helvetica;
	position:relative;
	text-align:left; 
	width:65%; 
	padding:60px 120px 60px 120px; 
	/* border:1px solid #111;*/
    background-color:white;
	    margin-left: 50%;
    margin-right: auto;
     -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}


.child-about span{
	font-weight:bold; 
	padding-right:6px;
}

.child-about a{
    font-weight:regular;padding-bottom:5px; border-bottom:1px solid #222; color:#222;
}

.child-about a:hover{
    border-bottom:none;  
      -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

#child-samples-bottom{
	margin-top:120px;
}
 
.attribution{
        color:#555;
	font-size: 12px; 
	line-height: 24px; 
	font-weight:500;
	font-family: "raleway","avenir", light, Helvetica Neue, Helvetica;

     -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

/* Child pages done */



/* About */


.extra-about {
	position:fixed;
	color: black;
	font-family: "raleway", "Helvetica";
	left: 1%;
	font-size: 13px;
	color:#333;
}


.extra-about2 {
	position:fixed;
	color: black;
	font-family: "raleway", "Helvetica";
	right: 15%;
    font-size: 13px;
    color:#333;

}

.rotate-about{
	color: black;position:fixed;
	font-family: "raleway", "Helvetica";
	font-size: 13px;
	top:48%; ms-transform: rotate(270deg); /* IE 9 */
	-webkit-transform: rotate(270deg); /* Chrome, Safari, Opera*/ 
	transform: rotate(270deg);
	line-height: 18px;

}

.rotate-about2{
	color: black;position:fixed;
	font-family: "raleway", "Helvetica";
	font-size: 13px;
	top:48%;
	ms-transform: rotate(90deg); /* IE 9 */
	-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera*/ 
	transform: rotate(90deg);
	line-height: 18px;
}

.name-about{
	top:100px;
	left:50%;position:fixed;
	 -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
	font-size: 22px; font-weight:bold;
	color:#333;
	font-family: playfair display;
	font-style:italic;
	text-align:center;
}

.info-center{

}

.info-photo{
   position:relative;
    margin-top: 100px;
    height:auto;
	width:100px;
	margin-left:0;
	 -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
		-webkit-transition: all 3s ease-in-out;
	-moz-transition: all 3s ease-in-out;
	-o-transition: all 3s ease-in-out;
	transition: all 3s ease-in-out;
}

.info{
	 padding-bottom:10px;
	color:#333;
	text-align: center;
	font-size: 18px; 
	line-height: 36px; font-weight:500;
	font-family:  "raleway", Helvetica Neue, Helvetica;
	top:50%;
	width:60%; 
	left:50%; 
	 -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	position:fixed;
	padding-top:150px;

}

.info span{
padding-top:25px; 
font-size:16px;
line-height:32px;
}

.info a{
color:#333;
padding-bottom:3px;
    border-bottom:1px solid #333;

}

.info a:hover{
	border-bottom:1px solid transparent;
}

.footnotes{
	padding-bottom:10px;color:#777;
	width:70%; text-align: left;
	font-size: 12px; line-height: 24px; font-weight:500;
	font-family:  "raleway","avenir", light, Helvetica Neue, Helvetica;
	 width:60%; 
     display:none;
}

.footnotes-wrap{
position:fixed;
bottom:60px;
left:60px;
}

.footnotes a{
 border-bottom:1px solid transparent;
 padding:3px;
}

.footnotes a:hover{
  border-bottom:1px solid #333;
}

.bottom-image{
width:200px; position:fixed; border-radius: 2px; overflow: hidden; bottom:350px;  left:50px;

}

.california{

	font-size:16px; line-height:40px; 
}

/* About done */


/* Very large desktops */


@media screen and (min-width: 901px) and (max-width: 1199px) {


/* 
.home img{
	width:45px;
	z-index:0;
	max-width:100%;
	height:auto;
	opacity:1;
	text-align:left;
	left:50%;
	margin-right:-50%;
	transform: translate(-50%,0);
}
 */


nav {
	display: block;
	margin-top:20px;
	text-align:center;
	position:relative;
	position:absolute; 
	left: 50%; top:80px;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

navbar a{
	color: black;
	margin-left:auto; margin-right:auto;
	text-align:center;
	position:relative;
	width:60px;
	font-size:14px;
	font-family:playfair display, lato, helvetica;
	color:#111;
	font-weight:200;
}

.logo-name{
	font-size:16px; position:fixed;
	left:20px;
	top:15%; 
	top:50%; 

	font-family:'raleway'; 
	font-weight:100; 
	color:black; 
	margin-left:0px;
	letter-spacing:2px;
	word-spacing:5px;
	ms-transform: rotate(-90deg); /*IE 9 */ 
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera*/ 
    transform: rotate(-90deg);
}

.logo-name a{
	color:black;
}

.logo-name a:hover{
	font-weight:bold;
}

.extra {
	position:fixed;
	color: black;
	font-family: "raleway", "Helvetica";
	right:100px;
    font-size: 16px;
    font-family: "raleway";
    color:#333;
}

.rotate1 a{
	color: black;position:fixed;
	font-family: "raleway";
	font-size: 18px;
	font-weight:100;
	top:50%;

	ms-transform: rotate(90deg); /*  IE 9 */
    -webkit-transform: rotate(90deg);/* Chrome, Safari, Opera */
    transform: rotate(90deg);
    padding:6px;
	text-align:top;
	-webkit-transition:all 1s linear;
	-moz-transition:all 0.6s linear;
	-o-transition:all 0.6s linear;
	-webkit-animation: bounceIn_custom 1s ease-in-out;
	-moz-animation: bounceIn_custom 1s ease-in-out;
	-o-animation: bounceIn_custom 1s ease-in-out;
	animation: bounceIn_custom 1s ease-in-out;
	border-bottom:2px solid #333;

}

#main{
width:65%;
}

.portfolio {
	color:#555;
	color:#eee;
	font-size: 7.0vh;
	font-family:"playfair display", "raleway", Helvetica Neue, Lucida Grande;
	font-weight: 900;
	word-spacing: 10px;
	line-height: 100px;
	text-align:center;
	font-size: 70px;
	color:rgb(150,63,85);
	position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
     -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
	/* color:rgb(232,74,67);*/
}

.portfolio .product{
	color:rgb(20,20,20);
font-size:16px; line-height:32px;
	font-weight:bold;
	
}

.test-sample{
position:relative;
margin-top: 100px;
height:auto;
width:65%;
	margin-left:50%;
	background-color:white;
		border:10px solid white;
	transform:translate(-50%,0%);
		-webkit-transition: all 3s ease-in-out;
	-moz-transition: all 3s ease-in-out;
	-o-transition: all 3s ease-in-out;
	transition: all 3s ease-in-out;
}


.product-name{
text-align: center;
position:absolute;
left:50%;
top:38%;
-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
font-family: "playfair display", Helvetica Neue, Lucida Grande;
font-style:italic;
font-size: 35px;
font-weight:700;
color:#111;
z-index:-100;

}

.project-sample-iphone{
	margin-bottom:50px;
	margin-top:200px;
	position:relative;
	transform:translate(-50%,0%);
	width:60%; max-width:100%;height:auto;
	text-align: center;
	border-radius: 1px;
	margin-left:50%;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
	
}


#test-sample-iphone{
	height:auto;
	width:100%; 
}

.about{
	padding-bottom:2px; 
	margin-top:120px;
	color:#333;
	font-size: 20px; 
	line-height: 40px; 
	font-weight:500;
	font-family: "raleway","avenir", light, Helvetica Neue, Helvetica;
	position:relative;
	text-align:left; 
	margin-top:150px; 
	width:60%; 
	padding:30px 40px 30px 40px; 
	margin-left:25%;
	}
	

	
.about span{
	color: #111; 
	font-weight:bold; 
	padding-left:5px;font-family: playfair display; 
	word-spacing:8px; 
	font-style:italic; font-size: 22px; font-weight:400;
	}
	

.about-thanks {
	font-family: "Playfair display","infini", "raleway", Helvetica Neue, Helvetica;
	font-style:italic;
	background-color:#fff; border: 2px solid #111;
	font-weight:700;
	font-size: 40px;line-height: 80px;
	padding-bottom:100px; padding-top:130px; 	
	margin-left:auto; margin-right:auto; 
	width:65%; text-align: center;
	word-spacing: 8px; 
	margin-top:250px;
	}
	
	
.about-thanks span{
	font-family:raleway, Helvetica Neue, Helvetica;
	font-size:25px;
	word-spacing:5px; 
	font-style:normal; 
	font-weight:200;

	}	



/********* CHILD PAGES*************/

.container-yowpla{
	width:100%;
	margin:0px auto;
	text-align:center;
	max-height:100%;
	height:100%;
  	background-repeat:no-repeat;
 	background-size:cover;
    background-position:center;
    -webkit-transition: all 0.9s ease-in-out;
	-moz-transition: all 0.9s ease-in-out;
	-o-transition: all 0.9s ease-in-out;
	transition: all 0.9s ease-in-out; 
	border-bottom:20px solid white;	
	background-color: white;
    animation-name: example;
    animation-duration: 4s;
}

.project-sample{
	padding-bottom:100px;
}

#child-samples{
	margin-top:0px;
	padding-bottom:30px;
}

.child-about{
	color:#333;
	font-size: 16px; 
	line-height: 32px; 
	font-weight:500;
	font-family: "raleway","avenir", light, Helvetica Neue, Helvetica;
	position:relative;
	text-align:left; 
	width:65%; 
	padding:30px 40px 30px 40px; 
	margin-left:50%; 
	/*border:1px solid #111;*/
}



.child-about span{
	font-weight:bold; 
	font-size: 22px; 
	padding-right:6px;
}

.test-sample-wireframe{
	position:relative;
	height:auto;
	width:65%;
	margin-top:80px;
	margin-left:50%; margin-right:auto;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

.test-sample-wireframe img{
	width:100%;
	max-width:100%;
	height:auto;
	text-align: center;
	border:5px solid white;
	border-radius: 1px;
	opacity:1;
}

.project-sample-small{
	margin-top:100px;position:relative;
	width: 40%;
	margin-left:auto; margin-right:auto;margin-left:30%;
	text-align: center;
}

.test-sample-screens{
	position:relative;
	height:auto;
	position:relative; 
	margin-top:30px;
}

.test-sample-screens img{
	margin-left:50%; 
	width:70%;
	max-width:100%;
	height:auto;
	text-align: center;
	border:5px solid white;
	border-radius: 1px;
	opacity:1;
	margin-bottom:50px;
}


.project{
	font-size: 70px;
	font-family:"playfair display", "raleway", Helvetica Neue, Lucida Grande;
	font-weight: 900;
	word-spacing: 10px;
	line-height: 80px;
	font-family:"Playfair display"; 
	/* color:rgb(232,74,67);*/
}

.role{
	font-family:raleway; 
	margin-top:20px; 
	font-size: 20px;
}

.thanks a{
	font-family: "raleway", Helvetica Neue, Lucida Grande;
	text-align: left;
	padding:5px;
	padding-right:10px;
	color: rgb(50,50,50);
	font-size: 14px;
	border:1px solid white;
	word-spacing: 8px;

}

.info-center{

	top:50%;
	width:55%; 
	left:50%; 
	transform:translate(-50%,-50%);
	position:fixed;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,50%);
    -o-transform: translate(-50%,50%);
    transform: translate(-50%,50%);

}

.info{
	 padding-bottom:10px;
	color:#333;
	text-align: left;
	font-size: 15px; 
	line-height: 32px; font-weight:500;
	font-family:  "raleway", Helvetica Neue, Helvetica;
	width:100%;
	padding:60px 30px 60px 30px;
    left:50%;

}

.info span{
font-size: 14px;

}

.bottom-image{
width:150px; position:fixed; border-radius: 2px;

}

}


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

/* 
.home img{
	width:45px;
	z-index:0;
	max-width:100%;
	height:auto;
	opacity:1;
	text-align:left;
	left:50%;
	margin-right:-50%;
	transform: translate(-50%,0);
}
 */
 
 .frame-top{
    border-top:16px solid rgb(20,160,220); 
    top:0px; 
    position:fixed; 
    box-sizing:border-box; 
    z-index:8000; 
    width:100%;
}    
   
.frame-right{
    border-right:16px solid rgb(20, 130, 235); 
    right:0px; 
    position:fixed; 
    box-sizing:border-box; 
    z-index:8000; 
    height:100%;
}   

.frame-left{
    border-left:16px solid rgb(0, 54, 185); 
    left:0px; 
    position:fixed; 
    box-sizing:border-box; 
    z-index:8900; 
    height:100%;
} 

.frame-bottom{
    border-bottom:16px solid rgb(20, 100, 255); 
    bottom:0px; 
    position:fixed; 
    box-sizing:border-box; 
    z-index:8500; 
    width:100%;
}
 
.container{
	width:100%;
	margin:0px auto;
	text-align:center;
	height:100%;
	height:900px;
    }

.logo-name a{
	color:black;

}

.logo-name a:hover{
	font-weight:bold;
}


.test-sample{
position:relative;
margin-top: 100px;
height:auto;
width:75%;
	margin-left:50%;
	background-color:white;
		border:10px solid white;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
		-webkit-transition: all 3s ease-in-out;
	-moz-transition: all 3s ease-in-out;
	-o-transition: all 3s ease-in-out;
	transition: all 3s ease-in-out;
}


.product-name{
text-align: center;
position:absolute;
left:50%;
top:35%;
-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
font-family: "playfair display", Helvetica Neue, Lucida Grande;
font-style:italic;
font-size: 35px;
font-weight:700;
color:#111;
z-index:-100;

}

.project-sample-iphone{
	margin-bottom:50px;
	margin-top:200px;
	position:relative;
	transform:translate(-50%,0%);
	width:66%; max-width:100%;height:auto;
	text-align: center;
	border-radius: 1px;
	margin-left:50%;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
	
}


#test-sample-iphone{
	height:auto;
	width:100%; 
}

nav {
	display: block;
	margin-top:20px;
	text-align:center;
	position:relative;
	position:absolute; 
	left: 50%; top:80px;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

.navbar a{
	color: black;
	margin-left:auto; margin-right:auto;
	text-align:center;
	position:relative;
	width:60px;
	font-size:13px;
	font-family:helvetica, playfair display, lato, helvetica;
	color:#111;
	font-weight:200;
}

.extra{
	right:100px;

}

.logo-name{
	font-size:14px; position:fixed;
	left:4px;

	top:50%; 
	font-size:14px; position:fixed;
	left:10px;
	font-family:'raleway', Helvetica Neue, Helvetica ; 
	
	font-weight:100; 
	color:black; 
	letter-spacing:2px;
	word-spacing:5px;
	ms-transform: rotate(-90deg); /*IE 9 */ 
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera*/ 
    transform: rotate(-90deg);
}

.logo-name a{
	color:black;
}

.logo-name a:hover{
	font-weight:bold;
}

.extra {
	position:fixed;
	color: black;
	font-family: "raleway", "Helvetica";
	right:75px;
    font-size: 16px;
    font-family: "raleway";
    color:#333;
}

.rotate1 a{
	color: black;position:fixed;
	font-family: "raleway";
	font-size: 16px;
	font-weight:100;
	top:50%;
	ms-transform: rotate(90deg); /*  IE 9 */
    -webkit-transform: rotate(90deg);/* Chrome, Safari, Opera */
    transform: rotate(90deg);
    padding:2px;
	text-align:top;
	-webkit-transition:all 1s linear;
	-moz-transition:all 0.6s linear;
	-o-transition:all 0.6s linear;
	-webkit-animation: bounceIn_custom 1s ease-in-out;
	-moz-animation: bounceIn_custom 1s ease-in-out;
	-o-animation: bounceIn_custom 1s ease-in-out;
	animation: bounceIn_custom 1s ease-in-out;
	border-bottom:2px solid #333;

}


#main{
width:70%;
}


.portfolio {
	color:#555;
	color:#eee;
	font-size: 7.0vh;
	font-family:"playfair display", "raleway", Helvetica Neue, Lucida Grande;
	font-weight: 900;
	line-height: 60px;
	text-align:center;
	font-size: 50px;
	color:rgb(150,63,85);
	/* color:rgb(232,74,67);*/
	padding:40px;
	position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
     -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.portfolio .product{
	color:rgb(20,20,20);
font-size:16px; line-height:32px;
	font-weight:bold;
	
}

.about{
	padding-bottom:2px; 
	margin-top:120px;
	color:#333;
	font-size: 18px; 
	line-height: 36px; 
	font-weight:500;
	font-family: "raleway","avenir", light, Helvetica Neue, Helvetica;
	position:relative;
	text-align:left; 
	margin-top:150px; 
	width:60%; 
	padding:30px 20px 30px 20px; 
	margin-left:25%;
	}
	
.about-thanks {
	font-family: "Playfair display","infini", "raleway", Helvetica Neue, Helvetica;
	font-style:italic;
	background-color:#fff; border: 1px solid #111;
	font-weight:700;
	font-size: 30px;line-height: 60px;
	padding-bottom:100px; padding-top:130px; 
	margin-left:50%; margin-right:auto; 
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
	width:75%; text-align: center;
	word-spacing: 8px; 
	margin-top:200px;
	padding-left:20px;padding-right:20px;
	}
	
	
.about-thanks span{
	font-family:raleway, Helvetica Neue, Helvetica;
	font-size:20px;
	word-spacing:5px; 
	font-style:normal; 
	font-weight:200;

	}	



/********* CHILD PAGES*************/

.container-yowpla{
	width:100%;
	margin:0px auto;
	text-align:center;
	max-height:100%;
	height:100%;
	height:550px;
	height:66vw;
	padding-bottom:100px;
  	background-repeat:no-repeat;
 	background-size:cover;
    background-position:center;
    -webkit-transition: all 0.9s ease-in-out;
	-moz-transition: all 0.9s ease-in-out;
	-o-transition: all 0.9s ease-in-out;
	transition: all 0.9s ease-in-out; 
	border-bottom:20px solid white;	
	background-color: white;
    animation-name: example;
    animation-duration: 4s;
}

.project-sample{
	padding-bottom:100px;
}

.down-arrow-child img {
	width:50px;
bottom:10%;
position:absolute;
left:50%;
}

.down-arrow img{
	width:20px;
	z-index:2000;
	height:auto;
	opacity:1;
	text-align:center;
	left:50%;
	position:relative;
	bottom:10%;
	margin-top:50px;
	margin-right:-50%;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
    display:none;
}

#child-samples{
	margin-top:80px;
}

.child-about{
	color:#333;
	font-size: 15px; 
	line-height: 32px; 
	font-weight:500;
	font-family: "raleway","avenir", light, Helvetica Neue, Helvetica;
	position:relative;
	text-align:left; 
	width:65%; 
	padding:30px 40px 30px 40px; 
	margin-left:50%; 
/*	border:1px solid #111;*/
	  margin-right: auto;
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

.attribution{
    font-size:11px;
    color:#333;
	line-height: 22px; 
	font-weight:500;
	font-family: "raleway","avenir", light, Helvetica Neue, Helvetica;
	 
}
.child-about span{
	font-weight:bold; 
	font-size: 22px; 
	padding-right:6px;
}

.test-sample-wireframe{
	position:relative;
	margin-top:80px;
	margin-left:50%; margin-right:auto;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
	margin-left:50%;
	width:70%;
}

.test-sample-wireframe img{
	width:100%;
	max-width:100%;
	height:auto;
	text-align: center;
	border:5px solid white;
	border-radius: 1px;
	opacity:1;
}

.project-sample-small{
	margin-top:100px;position:relative;
	width: 40%;
	margin-left:auto; margin-right:auto;margin-left:30%;
	text-align: center;
}

.test-sample-screens{
	position:relative;
	height:auto;
	position:relative; 
	margin-top:30px;
}

.test-sample-screens img{
	margin-left:50%; 
	width:70%;
	max-width:100%;
	height:auto;
	text-align: center;
	border:5px solid white;
	border-radius: 1px;
	opacity:1;
	margin-bottom:50px;
}

.project{
	font-size: 60px;
	font-family:"playfair display", "raleway", Helvetica Neue, Lucida Grande;
	font-weight: 900;
	word-spacing: 10px;
	line-height: 80px;
	position:relative;
	font-family:"Playfair display"; 
	/* color:rgb(232,74,67);*/
}

.role{
	font-family:raleway; 
	margin-top:20px; 
	font-size: 20px;
}

.thanks a{
	font-family: "raleway", Helvetica Neue, Lucida Grande;
	text-align: left;
	padding:5px;
	padding-right:10px;
	color: rgb(50,50,50);
	font-size: 14px;
	border:1px solid white;
	word-spacing: 8px;

}

.info-center{

	top:50%;
	width:60%; 
	margin-left:50%; 
	-webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	position:fixed;

}

.info{
	 padding-bottom:10px;
	color:#333;
	text-align: left;
	font-size: 14px; 
	line-height: 28px; font-weight:500;
	font-family:  "raleway", Helvetica Neue, Helvetica;
	width:100%;
	padding:60px 30px 60px 30px;

}

.info span{
font-size: 13px;

}


.footnotes-wrap{
width:150px;
bottom:10%;
left:50px;

}

.bottom-image{
width:100px; position:fixed; border-radius: 2px;

}

}


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

/* 
.home img{
	width:45px;
	z-index:0;
	max-width:100%;
	height:auto;
	opacity:1;
	text-align:left;
}
 */
.frame-top{
    border-top:14px solid rgb(20,160,220); 
    top:0px; 
    position:fixed; 
    box-sizing:border-box; 
    z-index:8000; 
    width:100%;
}    
   
.frame-right{
    display:none;
}   

.frame-left{
    display:none;
} 

.frame-bottom{
    border-bottom:14px solid rgb(20, 100, 255); 
    bottom:0px; 
    position:fixed; 
    box-sizing:border-box; 
    z-index:8500; 
    width:100%;
}

.logo-name{
	font-size:13px; position:fixed;
	left:-8px;
	top:50%; 
	font-family:'raleway', Helvetica Neue, Helvetica ; 
	font-weight:700; 
	color:black; 
	margin-left:0px;
	letter-spacing:2px;
	word-spacing:5px;
	ms-transform: rotate(-90deg); /*IE 9 */ 
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera*/ 
    transform: rotate(-90deg);
}

.container{
    
    height:800px;
}

.logo-name a{
	color:black;

}

.logo-name a:hover{
	font-weight:bold;
}

.test-sample{
position:relative;
margin-top: 100px;
height:auto;
width:80%;
	margin-left:50%;
	background-color:white;
		border:10px solid white;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
		-webkit-transition: all 3s ease-in-out;
	-moz-transition: all 3s ease-in-out;
	-o-transition: all 3s ease-in-out;
	transition: all 3s ease-in-out;
}


.product-name{
text-align: center;
position:absolute;
left:50%;
top:34%;
-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
font-family: "playfair display", Helvetica Neue, Lucida Grande;
font-style:italic;
font-size: 30px;
font-weight:700;
color:#111;
z-index:-100;

}

.project-sample-iphone{
	margin-bottom:50px;
	margin-top:200px;
	position:relative;
	transform:translate(-50%,0%);
	width:60%; max-width:100%;height:auto;
	text-align: center;
	border-radius: 1px;
	margin-left:50%;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
	
}


#test-sample-iphone{
	height:auto;
	width:100%; 
}

.down-arrow img{
	width:20px;
	z-index:2000;
	height:auto;
	opacity:1;
	text-align:center;
	left:50%;
	position:relative;
	bottom:60px;
	margin-top:50px;
	margin-right:-50%;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
    display:none;
}

nav {
	display: block;
	margin-top:20px;
	text-align:center;
	position:relative;
	position:absolute; 
	left: 50%; top:80px;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
	width:100%;
}

.navbar a{
	color: black;
	margin-left:auto; margin-right:auto;
	text-align:center;
	position:relative;
	width:60px;
	font-size:14px;
	font-family:helvetica, "raleway", lato, helvetica;
	color:#111;
	font-weight:200;
}

.extra {
	position:fixed;
	color: black;
	font-family: "raleway", "Helvetica";
	right: 70px;
    font-size: 16px;
    font-family: "raleway";
    color:#333;
}

.rotate1 a{
	color: black;position:fixed;
	font-family: "raleway";
	font-size: 15px;
	font-weight:100;
	top:50%;
	ms-transform: rotate(90deg); /*  IE 9 */
    -webkit-transform: rotate(90deg);/* Chrome, Safari, Opera */
    transform: rotate(90deg);
    padding:4px;
	text-align:top;
	-webkit-transition:all 1s linear;
	-moz-transition:all 0.6s linear;
	-o-transition:all 0.6s linear;
	-webkit-animation: bounceIn_custom 1s ease-in-out;
	-moz-animation: bounceIn_custom 1s ease-in-out;
	-o-animation: bounceIn_custom 1s ease-in-out;
	animation: bounceIn_custom 1s ease-in-out;
	border-bottom:2px solid #333;

}



.about{
	padding-bottom:2px; 
	color:#333;
	font-size: 16px; 
	line-height: 32px; 
	font-weight:500;
	font-family: "raleway","avenir", light, Helvetica Neue, Helvetica;
	position:relative;
	text-align:left; 
	margin-top:100px; 
	width:60%; 
	padding:30px 10px 30px 10px; 
	margin-left:22%;
	}
	
	
.about span{
	font-size: 18px;

}	
.about-thanks {
	font-family: "Playfair display","infini", "raleway", Helvetica Neue, Helvetica;
	font-style:italic;
	background-color:#fff; border: 1px solid #111;
	font-weight:700;
	font-size: 25px;line-height: 50px;
	padding-bottom:100px; padding-top:130px; 
	margin-left:50%; margin-right:auto; 
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
	width:75%; text-align: center;
	word-spacing: 8px; 
	margin-top:180px;
	padding-left:20px;padding-right:20px;
	}
	
	
.about-thanks span{
	font-family:raleway, Helvetica Neue, Helvetica;
	font-size:17px;
	word-spacing:5px; 
	font-style:normal; 
	font-weight:200;

	}	

#main{
	width:70%;
}

.portfolio {
	color:#555;
	color:#eee;
	font-size: 7.0vh;
	font-family:"playfair display", "raleway", Helvetica Neue, Lucida Grande;
	font-weight: 900;
	line-height: 80px;
	text-align:center;
	font-size: 40px;
	padding-bottom:15px;
	color:rgb(150,63,85);
	position:relative;
		padding:40px;
    margin-top: 30%;
    left: 50%;
    width: 100%;
     -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	/* color:rgb(232,74,67);*/
}

.portfolio .product{
	color:rgb(20,20,20);
font-size:15px; line-height:30px;
	font-weight:bold;
	
}

/********* CHILD PAGES*************/

.container-yowpla{
	width:100%;
	margin:0px auto;
	text-align:center;
	max-height:100%;
	height:100%;
	height:450px;
	height: 72vw;
  	background-repeat:no-repeat;
 	background-size:cover;
    background-position:center;
    -webkit-transition: all 0.9s ease-in-out;
	-moz-transition: all 0.9s ease-in-out;
	-o-transition: all 0.9s ease-in-out;
	transition: all 0.9s ease-in-out; 
	border-bottom:20px solid white;	
	background-color: white;
    animation-name: example;
    animation-duration: 4s;
}

.project-sample{
	padding-bottom:50px;
}

.down-arrow-child img {
	display:none;
}

#child-samples{
	text-align:left; 
	position:relative; 
	margin-top:80px;
}

.child-about{
	color:#333;
	font-size: 15px; 
	line-height: 32px; 
	font-weight:500;
	font-family: "raleway","avenir", light, Helvetica Neue, Helvetica;
	position:relative;
	text-align:left; 
	margin-top:20px; 
	width:69%; 
	padding:30px 40px 30px 40px; 
	margin-left:50%; 
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
	/*border:1px solid #111;*/
}

.child-about span{
	font-weight:bold; 
	font-size: 22px; 
	padding-right:6px;
}

.test-sample-wireframe{
	position:relative;
	margin-top:80px;	
	margin-right:auto;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
	margin-left:50%;
	width:70%
}

.test-sample-wireframe img{
	width:100%;
	max-width:100%;
	height:auto;
	text-align: center;
	border:5px solid white;
	border-radius: 1px;
	opacity:1;
;
}

.project-sample-small{
	margin-top:100px;position:relative;
	width: 40%;
	margin-left:auto; margin-right:auto;margin-left:30%;
	text-align: center;
}

.test-sample-screens{
	position:relative;
	height:auto;
	position:relative; 
	margin-top:30px;
}

.test-sample-screens img{
	margin-left:50%; 
	width:70%;
	max-width:100%;
	height:auto;
	text-align: center;
	border:5px solid white;
	border-radius: 1px;
	opacity:1;
	margin-bottom:50px;
}

.project{
	font-size: 60px;
	font-family:"playfair display", "raleway", Helvetica Neue, Lucida Grande;
	font-weight: 900;
	word-spacing: 10px;
	line-height: 80px;
	position:relative;
	font-family:"Playfair display"; 
	/* color:rgb(232,74,67);*/
}

.role{
	font-family:raleway; 
	margin-top:20px; 
	font-size: 20px;
}

.thanks a{
	font-family: "raleway", Helvetica Neue, Lucida Grande;
	text-align: left;
	padding:5px;
	padding-right:10px;
	color: rgb(50,50,50);
	font-size: 14px;
	border:1px solid white;
	word-spacing: 8px;

}

.name-about{
	top:50px;
	left:10%;position:fixed;
	-webkit-transform: translate(-10%,0);
    -moz-transform: translate(-10%,0);
    -ms-transform: translate(-10%,0);
    -o-transform: translate(-10%,0);
    transform: translate(-10%,0);
	font-size: 22px; font-weight:bold;
	color:#333;
	font-family: playfair display;
	font-style:italic;
	text-align:center;
}

.info-center{
	top:50%;
	width:90%; 
	margin-left:50%; 
	-webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	position:fixed;

}

.info{
	 padding-bottom:10px;
	color:#333;
	text-align: left;
	font-size: 14px; 
	line-height: 28px; font-weight:500;
	font-family:  "raleway", Helvetica Neue, Helvetica;
	width:100%;
	padding:30px 30px 60px 30px;

}

.info span{
font-size: 13px;

}


.footnotes-wrap{
display:none;
}

.button {
	display:block;
}
.footnotes{
 display:none;   
}

}

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

body{
border-width:20px 0 0 0;

}

.frame-top{
    border-top:12px solid rgb(20,160,220); 
    top:0px; 
    position:fixed; 
    box-sizing:border-box; 
    z-index:8000; 
    width:100%;
}    
   
.frame-right{
    display:none;
}   

.frame-left{
    display:none;
} 

.frame-bottom{
    border-bottom:12px solid rgb(20, 100, 255); 
    bottom:0px; 
    position:fixed; 
    box-sizing:border-box; 
    z-index:8500; 
    width:100%;
}

.container{
	width:100%;
	margin:0px auto;
	text-align:center;
	height:100%;
	height:680px;
    }

#child-border{
	border-width:0 0 0 0;
	border-style:solid;
}


.container-bottom{
	width:100%;
	margin:0px auto;
	text-align:center;
	height:680px; 	 
	border-top:20px solid rgb(179,229,158);
}

 #check{
	position:relative;
	top:290px;
	left:50%;
	 -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
	width:75%;
	}

#samples{
    
    margin-top:120px;
    
}

.project-sample{
	width:80%;
	max-width:100%;
	height:auto;
}

.test-sample{
position:relative;
margin-top: 70px;
height:auto;
width:92%;
	margin-left:50%;
	background-color:white;
		border:10px solid white;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
		-webkit-transition: all 3s ease-in-out;
	-moz-transition: all 3s ease-in-out;
	-o-transition: all 3s ease-in-out;
	transition: all 3s ease-in-out;
}


.product-name{
text-align: center;
position:absolute;
left:25%;
top:35%;
-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
font-family: "playfair display", Helvetica Neue, Lucida Grande;
font-style:italic;
font-size: 30px;
font-weight:700;
color:#111;
z-index:-100;

}

.project-sample-iphone{
	margin-bottom:50px;
	margin-top:200px;
	position:relative;
	transform:translate(-50%,0%);
	width:85%; max-width:100%;height:auto;
	text-align: center;
	border-radius: 1px;
	margin-left:50%;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
	
}


#test-sample-iphone{
	height:auto;
	width:100%; 
}

nav {
	display: block;
	margin-top:20px;
	text-align:center;
	position:relative;
	position:absolute; 
	left: 50%; top:80px;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

.navbar{

}

.navbar a{
	color: black;
	margin-left:auto; margin-right:auto;
	text-align:center;
	position:relative;
	width:60px;
	font-size:13px;
	font-family:helvetica, "raleway", lato, helvetica;
	color:#111;
	font-weight:200;
}


.extra {
	position:absolute;
	color: black;
	font-family: "raleway", "Helvetica";
	right:80px;
	top:50px;

	width:130px;	
    font-size: 14px;
    font-family: "raleway";
    color:#333;	/* bottom:80px; */
}

.rotate1 a{
	color: black;position:absolute;
	font-family: "raleway";
	font-size: 14px;
	font-weight:100;
	ms-transform: rotate(0deg); /*  IE 9 */
    -webkit-transform: rotate(0deg);/* Chrome, Safari, Opera */
    transform: rotate(0deg);
    padding:6px;
	-webkit-transition:all 1s linear;
	-moz-transition:all 0.6s linear;
	-o-transition:all 0.6s linear;
	-webkit-animation: bounceIn_custom 1s ease-in-out;
	-moz-animation: bounceIn_custom 1s ease-in-out;
	-o-animation: bounceIn_custom 1s ease-in-out;
	animation: bounceIn_custom 1s ease-in-out;

}



.about{
	padding-bottom:2px; 
	color:#333;
	font-size: 15px; 
	line-height: 30px; 
	font-weight:500;
	font-family: "raleway","avenir", light, Helvetica Neue, Helvetica;
	position:relative;
	text-align:center; 
	margin-top:100px; 
	width:80%; 
	padding:30px 10px 30px 10px; 
	margin-left:12%;

	}
	
	.about span{	
	font-size: 18px;
	}
	
.about div{
	word-spacing:5px;
	}	
	
.about-thanks {
	font-family: "Playfair display","infini", "raleway", Helvetica Neue, Helvetica;
	font-style:italic;
	background-color:#fff; border: 1px solid #111;
	font-weight:700;
	font-size: 20px;line-height: 40px;
	padding-bottom:100px; padding-top:130px; 
	position:relative;
	margin-left:50%; padding-left:20px;
	width:90%; text-align: center;
	word-spacing: 8px; 
	margin-top:100px;margin-bottom:100px;
	}
	
	
.about-thanks span{
	font-family:raleway, Helvetica Neue, Helvetica;
	font-size:16px;
	word-spacing:5px; 
	font-style:normal; 
	font-weight:200;
	}	
	

.home img{
/* 	width:40px;
	z-index:0;
	max-width:100%;
	height:auto;
	opacity:1;*/
	width:40px;
	text-align:center;
	position:fixed;
	
}
 

.logo-name{
	font-size:12px; position:relative;
	margin-left:30px;
	margin-top:15%; 
	font-family:'raleway'; 
	font-weight:500; 
	color:black; 
	margin-left:30px;
	letter-spacing:2px;
	word-spacing:5px;
	ms-transform: rotate(0deg); /*IE 9 */ 
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera*/ 
    transform: rotate(0deg);display:none;
}

#main{
	width:85%;
}

.portfolio {
	color:#555;
	color:#eee;
	font-size: 7.0vh;
	font-family:"playfair display", "raleway", Helvetica Neue, Lucida Grande;
	font-weight: 900;
	line-height: 50px;
text-align: center;
font-size: 35px;
	padding-bottom:15px;
	color:rgb(150,63,85);
	position:relative;
	/* color:rgb(232,74,67);*/
		padding:40px;
    margin-top: 29%;
    left: 50%;
    width: 100%;
     -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	
}


#full-width-footer{
	font-size:10px;
	color:#333;
	font-family:"raleway", "avenir";
	font-weight:100;
	position: relative;
	width:100%;
	bottom:20px;
	margin-top:100px;
	margin-left:-5%;
}

#full-width-footer a{
	color:black;
	padding-left:1px;
}

.footer{
    margin-right: auto;
    position: relative;
    width: 400px;
    text-align: center;
}


/********* CHILD PAGES*************/

.container-yowpla{
	width:100%;
	margin:0px auto;
	text-align:center;
	max-height:100%;
	height:430px;
	height:90vw;
	padding-bottom:150px;
  	background-repeat:no-repeat;
 	background-size:cover;
    background-position:center;
    -webkit-transition: all 0.9s ease-in-out;
	-moz-transition: all 0.9s ease-in-out;
	-o-transition: all 0.9s ease-in-out;
	transition: all 0.9s ease-in-out; 
	border-bottom:20px solid white;	
	background-color: white;
    animation-name: example;
    animation-duration: 4s;
}

.project-sample{
	padding-bottom:100px;
}

.down-arrow-child img {
	display:none;
}

#child-samples{
	text-align:left; 
	position:relative; 
	margin-top:80px;
}

.child-about{
	padding-bottom:200px; 
	color:#333;
	font-size: 14px; 
	line-height: 28px; 
	font-weight:500;
	font-family: "raleway","avenir", light, Helvetica Neue, Helvetica;
	position:relative;
	text-align:left; 
	margin-top:20px; 
	width:86%; 
	padding:20px 30px 20px 30px; 
	margin-left:50%; 
/*	border:1px solid #111;*/
-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
    }

.child-about span{
	font-weight:bold; 
	font-size: 20px; 
	padding-right:6px;
}

.test-sample-wireframe{
	position:relative; 
	margin-top:80px;
	margin-right:auto;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
	margin-left:50%;
	width:86%;
}

.test-sample-wireframe img{
	width:100%;
	max-width:100%;
	height:auto;
	text-align: center;
	border:5px solid white;
	border-radius: 1px;
	opacity:1;
}

.project-sample-small{
	margin-top:100px;position:relative;
	width: 60%;
	margin-left:auto; margin-right:auto;margin-left:20%;
	text-align: center;
}

.test-sample-screens{
	position:relative;
	height:auto;
	position:relative; 
	margin-top:30px;
}

.test-sample-screens img{
	margin-left:50%; 
	width:85%;
	max-width:100%;
	height:auto;
	text-align: center;
	border:5px solid white;
	border-radius: 1px;
	opacity:1;
	margin-bottom:50px;
}


.project{
	font-size: 50px;
	font-family:"playfair display", "raleway", Helvetica Neue, Lucida Grande;
	font-weight: 900;
	word-spacing: 10px;
	line-height: 80px;
	position:relative;
	font-family:"Playfair display"; 
	/* color:rgb(232,74,67);*/
}

.role{
	font-family:raleway; 
	margin-top:20px; 
	font-size: 17px;
}

.thanks a{
	font-family: "raleway", Helvetica Neue, Lucida Grande;
	text-align: left;
	padding:5px;
	padding-right:10px;
	color: rgb(50,50,50);
	font-size: 14px;
	border:1px solid white;
	word-spacing: 8px;
}

.name-about{
	top: 60px;
	left:60px;position:fixed;
	font-size: 16px; font-weight:bold;
	color:#333;
	font-family: playfair display;
	font-style:italic;
}

body{
	border-left:none;
	border-right:none;
	border-bottom:none;

}
.info-center{

	top:50%;
	width:88%; 
	margin-left:50%; 
	-webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	position:absolute;

}

.info{
	 padding-bottom:10px;
	color:#333;
	text-align: left;
	font-size: 14px; 
	line-height: 28px; font-weight:500;
	font-family:  "raleway", Helvetica Neue, Helvetica;
	width:100%;
	padding:30px 30px 60px 30px;

}

.info span{
font-size: 13px;

}


.footnotes{
position:fixed;
bottom:60px;
left:50%;
-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
    display:none;
}

.button {
	display:block;
}

}

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

body{
border-width:20px 0 0 0;

}

.frame-top{
    border-top:10px solid rgb(20,160,220); 
    top:0px; 
    position:fixed; 
    box-sizing:border-box; 
    z-index:8000; 
    width:100%;
}    
   
.frame-right{
    display:none;
}   

.frame-left{
    display:none;
} 

.frame-bottom{
    border-bottom:10px solid rgb(20, 100, 255); 
    bottom:0px; 
    position:fixed; 
    box-sizing:border-box; 
    z-index:8500; 
    width:100%;
}

.container-bottom{
	width:100%;
	margin:0px auto;
	text-align:center;
	height:620px; 	 
border-top:20px solid rgb(179,229,158);

}
 #check{
	position:relative;
	top:260px;
	left:50%;
	 -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
	width:75%;
	}

.container{
	width:100%;
	margin:0px auto;
	text-align:center;
	height:100%;
	height:620px;
    }

.child-border{
	border-width:0 0 0 0;
	border-style:solid;
}

.project-sample{
	width:86%;
	max-width:100%;
	height:auto;
}



.test-sample{
position:relative;
margin-top: 50px;
height:auto;
width:94%;
	margin-left:50%;
	background-color:white;
		border:10px solid white;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
		-webkit-transition: all 3s ease-in-out;
	-moz-transition: all 3s ease-in-out;
	-o-transition: all 3s ease-in-out;
	transition: all 3s ease-in-out;
}


.product-name{
text-align: center;
position:absolute;
left:24%;
top:32%;
-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
font-family: "playfair display", Helvetica Neue, Lucida Grande;
font-style:italic;
font-size: 25px;
font-weight:700;
color:#111;
z-index:-100;

}

.project-sample-iphone{
	margin-bottom:50px;
	margin-top:200px;
	position:relative;
	transform:translate(-50%,0%);
	width:85%; max-width:100%;height:auto;
	text-align: center;
	border-radius: 1px;
	margin-left:50%;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
	
}


#test-sample-iphone{
	height:auto;
	width:100%; 
}


.navbar a{
	color: black;
	margin-left:auto; margin-right:auto;
	text-align:center;
	position:relative;
	width:60px;
	font-size:13px;
	font-family:helvetica, "raleway", lato, helvetica;
	color:#111;
	font-weight:200;
}


.extra {
	position:absolute;
	color: black;
	font-family: "raleway", "Helvetica";
	left:60%;
	top:60px;

	width:130px;	
    font-size: 14px;
    font-family: "raleway";
    color:#333;	/* bottom:80px; */
}

.rotate1 a{
	color: black;position:absolute;
	font-family: "raleway";
	font-size: 14px;
	font-weight:100;
	ms-transform: rotate(0deg); /*  IE 9 */
    -webkit-transform: rotate(0deg);/* Chrome, Safari, Opera */
    transform: rotate(0deg);
    padding:6px;
	-webkit-transition:all 1s linear;
	-moz-transition:all 0.6s linear;
	-o-transition:all 0.6s linear;
	-webkit-animation: bounceIn_custom 1s ease-in-out;
	-moz-animation: bounceIn_custom 1s ease-in-out;
	-o-animation: bounceIn_custom 1s ease-in-out;
	animation: bounceIn_custom 1s ease-in-out;

}


.about{
	padding-bottom:10px; padding-top:60px; 
	margin-left:10%;
	 width:70%;
	width:80%; text-align: center;
	font-size: 15px; line-height: 30px;font-weight:400;
	font-family:  "raleway", Helvetica Neue, Helvetica;
	
	}
	
.about div{
	word-spacing:5px;
	}	
	
.about-thanks {
	font-family: "Playfair display", "raleway", Helvetica Neue, Helvetica;
	font-style:italic;
	background-color:#fff; border: 1px solid #111;
	font-weight:700;
	font-size: 20px;line-height: 40px;
	padding-bottom:100px; padding-top:130px; 
	position:relative;
	margin-left:50%; padding-left:20px;
	width:90%; text-align: center;
	word-spacing: 8px; 
	margin-top:80px;margin-bottom:50px;
	}
	
	
.about-thanks span{
	font-family:raleway, Helvetica Neue, Helvetica;
	font-size:14px;
	word-spacing:5px; 
	font-style:normal; 
	font-weight:200;
	}	
	
 
.home img{
	width:40px;
	z-index:0;
	max-width:100%;
	height:auto;
	opacity:1;
	text-align:center;
	position:fixed;
}


.logo-name{
	font-size:12px; position:relative;
	margin-left:30px;
	margin-top:15%; 
	font-family:'raleway'; 
	font-weight:500; 
	color:black; 
	margin-left:30px;
	letter-spacing:2px;
	word-spacing:5px;
	ms-transform: rotate(0deg); /*IE 9 */ 
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera*/ 
    transform: rotate(0deg);display:none;
}

#main{
	width:85%;
}
.portfolio {
	color:#555;
	color:#eee;
	font-size: 7.0vh;
	font-family:"playfair display", "raleway", Helvetica Neue;
	font-weight: 900;
	line-height: 40px;
text-align: center;
font-size: 30px;
	padding-bottom:15px;
	color:rgb(150,63,85);
		padding:40px;

	position: relative;
    margin-top: 29%;
    left: 50%;
    width: 100%;
     -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
	/* color:rgb(232,74,67);*/
}

#full-width-footer{
	font-size:10px;
	color:#333;
	font-family:"raleway";
	font-weight:100;
	width:100%;
	bottom:20px;
	margin-top:100px;

}


/********* CHILD PAGES*************/

.container-yowpla{
	width:100%;
	margin:0px auto;
	text-align:center;
	max-height:100%;
	height:400px;
	height:100vw;
	padding-bottom:150px;
  	background-repeat:no-repeat;
 	background-size:cover;
    background-position:center;
    -webkit-transition: all 0.9s ease-in-out;
	-moz-transition: all 0.9s ease-in-out;
	-o-transition: all 0.9s ease-in-out;
	transition: all 0.9s ease-in-out; 
	border-bottom:20px solid white;	
	background-color: white;
    animation-name: example;
    animation-duration: 4s;
}

.project-sample{
	padding-bottom:100px;
}

.down-arrow-child img {
	display:none;
}

#child-samples{
	text-align:left; 
	position:relative; 
}

.child-about{
	color:#333;
	font-size: 14px; 
	line-height: 28px; 
	font-weight:500;
	font-family: "raleway", Helvetica Neue, Helvetica;
	position:relative;
	text-align:left; 	 
	width:86%; 
	padding:20px 30px 20px 30px; 
	margin-left:50%; 
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
}

.child-about span{
	font-weight:bold; 
	font-size: 20px; 
	padding-right:6px;
}

.test-sample-wireframe{
	position:relative; 
	margin-top:80px;
	margin-right:auto;
	-webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
	margin-left:50%;
	width:86%;
}

.test-sample-wireframe img{
	width:100%;
	max-width:100%;
	height:auto;
	text-align: center;
	border:5px solid white;
	border-radius: 1px;
	opacity:1;
}

.project-sample-small{
	margin-top:100px;position:relative;
	width: 60%;
	margin-left:auto; margin-right:auto;margin-left:20%;
	text-align: center;
}

.test-sample-screens{
	position:relative;
	height:auto;
	position:relative; 
	margin-top:30px;
}

.test-sample-screens img{
	margin-left:50%; 
	width:85%;
	max-width:100%;
	height:auto;
	text-align: center;
	border:5px solid white;
	border-radius: 1px;
	opacity:1;
	margin-bottom:50px;
}


.project{
	font-size: 50px;
	font-family:"playfair display", "raleway", Helvetica Neue, Lucida Grande;
	font-weight: 900;
	word-spacing: 10px;
	line-height: 80px;
	position:relative;
	font-family:"Playfair display"; 
	/* color:rgb(232,74,67);*/
}

.role{
	font-family:raleway; 
	margin-top:20px; 
	font-size: 17px;
}

.thanks a{
	font-family: "raleway", Helvetica Neue, Lucida Grande;
	text-align: left;
	padding:5px;
	padding-right:10px;
	color: rgb(50,50,50);
	font-size: 14px;
	border:1px solid white;
	word-spacing: 8px;
}

.name-about{
    top:100px;
	left:50%;position:fixed;
	 -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
	font-size: 22px; font-weight:bold;
	color:#333;
	font-family: playfair display;
	font-style:italic;
	text-align:center;
}

.info-center{

	margin-top:60px;
	width:92%; 
	margin-left:50%; 
	-webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
	position:fixed;

}

.info{
 padding-bottom:10px;
    color:#333;
	text-align: left;
	font-size: 14px; 
	line-height: 28px; font-weight:500;
	font-family:  "raleway", Helvetica Neue, Helvetica;
	width:100%;
	padding:60px 30px 60px 30px;

}

.button {
    display:none;
    margin-top:67%;
    position:relative;
}

#samples{
    margin-top:100px;
}
}

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

body{
border-width:20px 0 0 0;

}

.frame-top{
    border-top:10px solid rgb(20,160,220); 
    top:0px; 
    position:fixed; 
    box-sizing:border-box; 
    z-index:8000; 
    width:100%;
}    
   
.frame-right{
    display:none;
}   

.frame-left{
    display:none;
} 

.frame-bottom{
    border-bottom:10px solid rgb(20, 100, 255); 
    bottom:0px; 
    position:fixed; 
    box-sizing:border-box; 
    z-index:8500; 
    width:100%;
}

.container{
	width:100%;
	margin:0px auto;
	text-align:center;
	height:100%;
	height:660px;
    }

.portfolio {
     margin-top: 250px;
     position:relative;
}


 #check{
	position:relative;
	top:200px;
	left:50%;
	 -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);
	width:75%;
	}
	
.project{
	font-size: 50px;
	font-family:"playfair display", "raleway", Helvetica Neue, Lucida Grande;
	font-weight: 900;
	word-spacing: 10px;
	line-height: 80px;
	font-family:"Playfair display"; 
	/* color:rgb(232,74,67);*/
}

.role{
	font-family:raleway; 
	margin-top:20px; 
	font-size: 17px;
}

.thanks a{
	font-family: "raleway", Helvetica Neue, Lucida Grande;
	text-align: left;
	padding:5px;
	padding-right:10px;
	color: rgb(50,50,50);
	font-size: 14px;
	border:1px solid white;
	word-spacing: 8px;
}

.container{
	width:100%;
	margin:0px auto;
	text-align:center;
	height:100%;
	height:520px;
    }
    
.container-bottom{
	width:100%;
	margin:0px auto;
	text-align:center;
	height:530px;
    }

.button {
	display:block;
    margin-top:100px;
    border:none;
}

.about{
    width:90%;
}

}