@charset "UTF-8";
/* CSS Document */
body, html {
	max-width:100%;
    overflow-x:hidden; /*disable the x scroll bar to prevent the list from moving when use trackpad*/
	font-family: 'Titillium Web', sans-serif;
	font-weight:600;
	color:#f5f0f7;
	-webkit-font-smoothing: antialiased;
	background-color:#302f35;
	margin:0;
}

body {
	overflow-y:hidden;
}

.bodyBlockOverflow {
	overflow:hidden; /*disable body's y scroll bar to prevent double scroll bars*/
	}
	
.htmlReleaseOverflow {
	overflow-x:visible; /*enable html's x scroll bar*/
	}

#horizontalnav {
	display:none;
	}
	
#navbg {
	background-image:url(images/colorbg.jpg);
	background-size: 1008px 1360px;
	background-repeat:repeat;
	width:1008px;
	height:1360px;
	float:right;
	margin-right:76%;
	}
	
#line {
	background-color:#ea9a54;
	display:block;
	width:2px;
	height:100%;
	position:relative;
	float:right;
	-webkit-box-shadow:0px 0px 2px 0px rgba(0,0,0,0.4);
	-moz-box-shadow:0px 0px 2px 0px rgba(0,0,0,0.4);
	box-shadow:0px 0px 2px 0px rgba(0,0,0,0.4);
	z-index:999;
	}
	
ul {
	float:right;
	display:block;
	width:960px;
	height:auto;
	position:fixed;
	}
	
ul a {
	text-decoration:none;
	color:#f5f0f7;
	}
	
#logo {
	background-image:url(images/logo.png);
	background-size: 257px 11px;
	background-repeat:no-repeat;
	width:257px;
	height:11px;
	float:right;
	display:block;
	margin-top:0%;
	margin-right:1.5%;
	position:relative;
	}

#portfolio {
	background-image:url(images/portfolio_icon.png);
	background-size: 52px 55px;
	background-repeat:no-repeat;
	width:52px;
	height:55px;
	float:right;
	margin-top:10%;
	margin-right:-4.9em;
	}

#portfolio_selected {
	background-image:url(images/portfolio_icon2.png);
	background-size: 52px 55px;
	background-repeat:no-repeat;
	width:52px;
	height:55px;
	float:right;
	margin-top:10%;
	margin-right:-4.9em;
	}

#resume {
	background-image:url(images/resume_icon.png);
	background-size: 52px 55px;
	background-repeat:no-repeat;
	width:52px;
	height:55px;
	float:right;
	margin-top:18%;
	margin-right:-4.9em;
	}
	
#resume_selected {
	background-image:url(images/resume_icon2.png);
	background-size: 52px 55px;
	background-repeat:no-repeat;
	width:52px;
	height:55px;
	float:right;
	margin-top:18%;
	margin-right:-4.9em;
	}
	
#blog {
	background-image:url(images/blog_icon.png);
	background-size: 52px 55px;
	background-repeat:no-repeat;
	width:52px;
	height:55px;
	float:right;
	margin-top:26%;
	margin-right:-4.9em;
	}
	
#blog_selected {
	background-image:url(images/blog_icon2.png);
	background-size: 52px 55px;
	background-repeat:no-repeat;
	width:52px;
	height:55px;
	float:right;
	margin-top:26%;
	margin-right:-4.9em;
	}

#Mainlogo p {
	margin-top:2.6%;
	margin-left:19.9em;
	margin-bottom:2%;
	font-size:26pt;
	color:#f5f0f7;
	text-shadow:0px 1px 2px rgba(0,0,0,0.4);
}

#portfolio p, #resume p, #blog p{
	margin-top:10%;
	margin-left:3em;
	font-size:20pt;
	color:#f5f0f7;
	text-shadow:0px 1px 2px rgba(0,0,0,0.4);
	}
	
#portfolio_selected p, #resume_selected p, #blog_selected p{
	margin-top:10%;
	margin-left:3em;
	font-size:20pt;
	color:#ea9a54;
	text-shadow:0px 1px 2px rgba(0,0,0,0.4);
	}

#portfolio:hover, #resume:hover, #blog:hover {
	transition-duration:300ms;
	-webkit-transition-timing-function:ease-in-out;
    transition-timing-function: ease-in-out;
	opacity:0.75;
	margin-right:-5.2em;
	}
	
#content {
	width:76%;
	left:24%;
	position:absolute;
	}

/*shadow*/
#content a, section { 
	height:56.2%;
	border-top:1px solid rgba(255,255,255,0.2) ;
	-webkit-box-shadow:0px 1px 5px 0px rgba(0,0,0,0.6);
	-moz-box-shadow:0px 1px 5px 0px rgba(0,0,0,0.6);
	box-shadow:0px 1px 5px 0px rgba(0,0,0,0.6);
	text-decoration:none;
	filter: brightness(90%);
	-webkit-filter: brightness(90%);
	}
	
#content a:hover {
	transition-duration:220ms;
	-webkit-transition-timing-function:ease-in-out;
    transition-timing-function: ease-in-out;
	filter: brightness(100%);
	-webkit-filter: brightness(100%);
	}

#content h1 {
	font-size:38pt;
	font-weight:600;
	margin-left:0.75em;
	margin-top:0.7em;
	margin-bottom:0;
	text-shadow:0px 1px 2px rgba(0,0,0,0.4);
	}
	
#content h3 {
	font-size:16pt;
	font-weight:600;
	margin-left:2em;
	margin-right:1em;
	text-shadow:0px 1px 2px rgba(0,0,0,0.4);
	float:left;
	}

#UI_UX_Design:hover, #Motion_Graphic:hover, #Industrial_Design:hover {
	transition-duration:300ms;
	-webkit-transition-timing-function:ease-in-out;
    transition-timing-function: ease-in-out;
	opacity:0.75;
	}
	
/*default been selected*/
.SecondaryNavSelected {
	color:#ea9a54; 
	}
	
/*default been unselected*/	
.SecondaryNavNotSelected {
	color:#f5f0f7;
	}
	
#UI_UX_Design, #Motion_Graphic, #Industrial_Design {
	cursor:pointer;
	}

.baseboard {
    background-color: rgba(16, 8, 26, 0.3);
    position: absolute;
	float:left;
   	padding-right: 2.2em;
	padding-left:2.6em;
   	top: 0;
   	width:100%;
    }
	
.baseboard p {
	font-family:"Titillium Web", Helvetica, Arial, sans-serif;
	font-size:14pt;
	font-style:normal;
	font-weight:normal;
	text-align:left;
	line-height:1.7;
    color: #FFFFFF;
	margin-top:0.8em;
	margin-bottom:0.8em;
    }


/*UIUX*/	
#OKCdashboard {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*0 );
	}

#augmentedreview {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*1 );
	}

#arsolobasketball {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*2 );
	}

#audibleapplewatch {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*3 );
	}

#carmode {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*4 );
	}

#vrstorytelling {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*5 );
	}

#scotts {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*6 );
	}
		
#statuspostbox {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*7 );
	}
	
#triphive {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*8 );
	}
	
#rochestermedical {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*9 );
	visibility:hidden;
	}
	
#recycler {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*10 );
	visibility:hidden;
	}
	
#howismade {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*11 );
	visibility:hidden;
	}
	
	

/*Motion Graphic*/
#motiongraphic {
	display:none;
	}
	
#soundbattledemo {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*0 );
	}
	
#oneminuteabstraction {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*1 );
	}
	
#thirtysecondstypography {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*2 );
	}
	
#triphiveintroduction {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*3 );
	}
	
#mapofrit {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*4 );
	}
	
/*Industrial Design*/
#industrialdesign {
	display:none;
	}

#crossover {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*0 );
	}
	
#mobilenote {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*1 );
	}
	
#swoosh{
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*2 );
	}
	
#highchair {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*3 );
	}
	
#cooker {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*4 );
	}
	
#clipper {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*5 );
	}
	
#waterdispenser {
	width:100%;
	display:block;
	position:absolute;
	margin-top:calc(7% + (31.2%)*6 );
	}
	


img{
	width:100%;
	}
	
/*the blog text title*/		
#blogbasic h2 {
	font-family:"Titillium Web", Helvetica, Arial, sans-serif;
	font-style:normal;
	font-weight:normal;
	margin-top:0.5em;
	padding-bottom:0.6em;
	font-size:22pt;
	border-bottom:1px solid #999999;
	}

/*the blog text*/	
#blogbasic p {
	font-family:"Titillium Web", Helvetica, Arial, sans-serif;
	font-style:normal;
	font-weight:normal;
	margin-top:1em;
	margin-bottom:0;
	font-size:14pt;
	line-height:1.8;
	}

/*the blog text box*/	
.blog_text {
	width:60%;
	overflow:visible;
	margin-left:2.7em;
	}
		
#text {
	font-family:"Titillium Web", Helvetica, Arial, sans-serif;
	font-style:normal;
	font-weight:normal;
	position:absolute;
	margin-left:2.2em;
	padding-top:0.5em;
	font-size:14pt;
	}

#container {
	width:100%;
	}

/*the content of resume*/
section p {
	position:relative;
	margin-top:-56.3%;
	visibility:hidden;
	}
	
#work p {
	position:relative;
	margin-top:-107%;
	visibility:hidden;
	}
	
#basic {
	width:100%;
	position:absolute;
	margin-top:7%;
	}
	
#work {
	width:100%;
	position:absolute;
	margin-top:65.3%;
	}

#skill {
	width:100%;
	position:absolute;
	margin-top:174%;
	}

#download_button {
	font-family: 'Titillium Web', sans-serif;
	font-weight: 600;
	float:right;
	margin-right: 2%;
	background-color: #E38E29;
	border: none;
	border-radius: 4px;
	color: #f5f0f7;
	padding: 10px 32px;
	text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14pt;
    cursor: pointer;
	}

#download_button:hover {
	transition: 300ms;
	background-color: #EC9B4C;
	}


#blogbasic {
	width:100%;
	position:relative;
	margin-top:7%;
	margin-bottom:20%;
	border:none;/*make the blog images no border*/
	box-shadow:none;
	}
		
#blogbasic img{
	-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.6);
	-moz-box-shadow:0px 1px 5px 0px rgba(0,0,0,0.6);
	box-shadow:0px 1px 5px 0px rgba(0,0,0,0.6);
	visibility:hidden;/*lazy load*/
	}
	
/*the blog videos*/	
iframe{
	-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.6);
	-moz-box-shadow:0px 1px 5px 0px rgba(0,0,0,0.6);
	box-shadow:0px 1px 5px 0px rgba(0,0,0,0.6);
	width:100%;
	}



.OKCdashboardBg, .augmentedreviewBg, .arsolobasketballBg, .audibleapplewatchBg, .vrstorytellingBg, .carmodeBg, .scottsBg, .statuspostboxBg, .triphiveBg, .rochestermedicalBg, .recyclerBg, .howismadeBg, .soundbattledemoBg, .oneminuteabstractionBg, .thirtysecondstypographyBg, .triphiveintroductionBg, .mapofritBg, .crossoverBg, .mobilenoteBg, .swooshBg, .highchairBg, .cookerBg, .clipperBg, .waterdispenserBg {
	display:none;/*lazy load*/
	position:fixed;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
	cursor: pointer;
	background: rgba(0,0,0,0.7);
	z-index:1002;
	overflow:scroll;
}

.popContent {
	background: #000000;
	width: 75%;
	position: relative;
	margin-top: 3%;
	margin-left: 13%;
	cursor: default;
	box-shadow: 0 2px 13px 5px rgba(0,0,0,0.6);
	z-index:1001;
	}
	
.close-btn {
	background-image:url(images/close_btn.png);
	background-size: 62px 62px;
	background-repeat:no-repeat;
	width:62px;
	height:62px;
	position:fixed;
	margin-top:1%;
	margin-left:75%;
	cursor:pointer;
	filter: brightness(92%);
	-webkit-filter: brightness(92%);
	}
	
.close-btn:hover {
	transition-duration:300ms;
	-webkit-transition-timing-function:ease-in-out;
    transition-timing-function: ease-in-out;
    filter: brightness(100%);
	-webkit-filter: brightness(100%);
	}

/*the play btn of each flash project*/
.recyclerplay-btn, .howismadeplay-btn, .beatlesplay-btn {
	background-image:url(images/play_btn.png);
	background-size: 184px 183px;
	background-repeat:no-repeat;
	width:184px;
	height:183px;
	position:absolute;
	margin-top:7%;
	margin-left:62%;
	cursor:pointer;
	filter: brightness(85%);
	-webkit-filter: brightness(85%);
	}
	
.recyclerplay-btn:hover, .howismadeplay-btn:hover, .beatlesplay-btn:hover {
	transition-duration:300ms;
	-webkit-transition-timing-function:ease-in-out;
    transition-timing-function: ease-in-out;
	transform: scale(1.05);
	filter: brightness(100%);
	-webkit-filter: brightness(100%);
	}

/*the product hunt btn of arsolobasketball project*/	
.producthunt-btn {
	background-image:url(images/producthunt_btn.png);
	background-size: 409px 64px;
	background-repeat:no-repeat;
	width:409px;
	height:64px;
	position:absolute;
	margin-top:37%;
	margin-left:53%;
	cursor:pointer;
	}

/*the featured twitter btn of arsolobasketball project*/	
.featuredtwitter-btn {
	background-image:url(images/featuredtwitter_btn.png);
	background-size: 236px 64px;
	background-repeat:no-repeat;
	width:236px;
	height:64px;
	position:absolute;
	margin-top:43.5%;
	margin-left:53%;
	cursor:pointer;
	}

/*the app store btn of arsolobasketball project*/	
.appstore-btn {
	background-image:url(images/appstore_btn.png);
	background-size: 158px 64px;
	background-repeat:no-repeat;
	width:158px;
	height:64px;
	position:absolute;
	margin-top:50%;
	margin-left:53%;
	cursor:pointer;
	}

/*the continue reading btn of arsolobasketball project	
.continuereading-btn {
	background-image:url(images/continuereading_btn.png);
	background-size: 411px 135px;
	background-repeat:no-repeat;
	width:411px;
	height:135px;
	position:absolute;
	margin-top:819%;
	margin-left:45%;
	cursor:pointer;
	}
	
.continuereading-btn:hover {
	transition-duration:300ms;
	-webkit-transition-timing-function:ease-in-out;
    transition-timing-function: ease-in-out;
	transform: scale(1.05);
	}
*/

.continuereading-btn {
	cursor:pointer;
	}

/*the visit btn of each prototype project*/	
.triphiveprototype-btn {
	background-image:url(images/visit_btn.png);
	background-size: 184px 183px;
	background-repeat:no-repeat;
	width:184px;
	height:183px;
	position:absolute;
	margin-top:47%;
	margin-left:60%;
	cursor:pointer;
	filter: brightness(85%);
	-webkit-filter: brightness(85%);
	}
	
.triphiveprototype-btn:hover {
	transition-duration:300ms;
	-webkit-transition-timing-function:ease-in-out;
    transition-timing-function: ease-in-out;
	transform: scale(1.05);
	filter: brightness(100%);
	-webkit-filter: brightness(100%);
	}
	
.popContent p {
	width:100%;
	padding-top:0;
	}


.flash {
	background-color:#302f35;
	width:100%;
	}

.flash a{
	margin-top:0%;
	font-size:18pt;
	color:#f5f0f7;
	text-shadow:0px 1px 2px rgba(0,0,0,0.6);
	text-decoration:none;
	}

.flash a p{
	margin-left:140%;
	margin-top:-30%;
	}
	
	
#canvas {
 	position: absolute;
	top:7%;
   	left: 50%;
   	margin-left: -450px;
	box-shadow:0px 1px 5px 0px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.6);
	-moz-box-shadow:0px 1px 5px 0px rgba(0,0,0,0.6);
	}

.back {
	background-image:url(images/back.png);
	background-size: 25px 29px;
	background-repeat:no-repeat;
	display:block;
	width:25px;
	height:29px;
	position: absolute;
	top:2%;
   	left: 50%;
   	margin-left: -450px;
	}

.back:hover {
	transition-duration:300ms;
	-webkit-transition-timing-function:ease-in-out;
    transition-timing-function: ease-in-out;
	opacity:0.75;
	}

#footer {
	float:left;
	background-color:#232327;
	width:100%;
	height:250px;
	bottom:0;
	z-index:998;
	}
	
#footerline1 {
	background-color:#ea9a54;
	display:block;
	width:100%;
	height:2px;
	position:relative;
	float:left;
	box-shadow:0px 0px 7px 0px rgba(0,0,0,0.6);
	-webkit-box-shadow:0px 0px 7px 0px rgba(0,0,0,0.6);
	-moz-box-shadow:0px 0px 7px 0px rgba(0,0,0,0.6);
	z-index:999;
	}

#yu {
	background-image:url(images/yu.png);
	background-size: 120px 120px;
	background-repeat:no-repeat;
	float:right;
	position:absolute;
	margin-top:2.3%;
	right:83%;
	width:120px;
	height:120px;
	}
	

#totop {
	background-image:url(images/totop.png);
	background-size: 31px 27px;
	background-repeat:no-repeat;
	width:31px;
	height:27px;
	float:right;
	margin-right:36%;
	margin-top:130%;
	}
	
#totop:hover {
	transition-duration:300ms;
	-webkit-transition-timing-function:ease-in-out;
    transition-timing-function: ease-in-out;
	margin-top:125%;
	}
	
#about_me p, #contact_me a, #follow_me a{
	font-family:"Titillium Web", Helvetica, Arial, sans-serif;
	font-style:normal;
	font-weight:normal;
	font-size:12pt;
	text-decoration:none;
	color:#f5f0f7;
	}

#footer h2{
	font-size:20pt;
	font-weight:600;
	text-shadow:0px 1px 2px rgba(0,0,0,0.4);
	}
		
#about_me {
	position:absolute;
	left:24.5%;
	}
	
#about_me p {
	width:35%;
	line-height:1.8;
	}
	

#contact_me {
	position:absolute;
	left:56%;
	}

#contact_me p{
	margin-left:130%;
	margin-top:18%;
	width:130px;
	}
	
#gmail {
	background-image:url(images/contactmeicon.png);
	background-position: 0px 0px;
	background-size: 147px 46px;
	background-repeat:no-repeat;
	width:49px;
	height:46px;
	float:left;
	margin-left:-4%;
	margin-top:-4%;
	}

#phone {
	background-image:url(images/contactmeicon.png);
	background-position: -49px 0px;
	background-size: 147px 46px;
	background-repeat:no-repeat;
	width:49px;
	height:46px;
	float:left;
	margin-left:-33%;
	margin-top:34.4%;
	}

#linkedin {
	background-image:url(images/contactmeicon.png);
	background-position: -98px 0px;
	background-size: 147px 46px;
	background-repeat:no-repeat;
	width:49px;
	height:46px;
	float:left;
	margin-left:-33%;
	margin-top:73%;
	}

#follow_me {
	position:absolute;
	left:83%;
	}
	
#follow_me p{
	margin-left:130%;
	margin-top:18%;
	width:55px;
	}
	
#medium {
	background-image:url(images/followmeicon.png);
	background-position: 0px 0px;
	background-size: 147px 46px;
	background-repeat:no-repeat;
	width:49px;
	height:46px;
	float:left;
	margin-left:-5%;
	margin-top:-4%;
	}

#instagram {
	background-image:url(images/followmeicon.png);
	background-position: -49px 0px;
	background-size: 147px 46px;
	background-repeat:no-repeat;
	width:49px;
	height:46px;
	float:left;
	margin-left:-33%;
	margin-top:34.7%;
	}

#youtube {
	background-image:url(images/followmeicon.png);
	background-position: -98px 0px;
	background-size: 147px 46px;
	background-repeat:no-repeat;
	width:49px;
	height:46px;
	float:left;
	margin-left:-33%;
	margin-top:72.6%;
	}
	
/*all rights*/
#footer h3 {
	font-family:"Titillium Web", Helvetica, Arial, sans-serif;
	font-style:normal;
	font-size:12pt;
	color:#5D5D5D;
	top:90%;
	left:24.5%;
	margin:0;
	position:relative;
	}






/* CSS for high-resolution devices and mobile*/
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min-resolution: 192dpi) and (max-width: 1024px),
only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#horizontalnav {
	background-color:#1D1C21;
	width:100%;
	height:150px;
	position:fixed;
	left:0;
	top:-0.1%;
	-webkit-box-shadow:0px 1px 5px 0px rgba(0,0,0,0.6);
	-moz-box-shadow:0px 1px 5px 0px rgba(0,0,0,0.6);
	box-shadow:0px 1px 5px 0px rgba(0,0,0,0.6);
	z-index:1000;
	display:block;
	}

#horizontalmainlogo p {
	margin-top:1.9%;
	margin-left:0.4em;
	margin-bottom:0%;
	font-size:33pt;
	color:#f5f0f7;
	text-shadow:0px 1px 2px rgba(0,0,0,0.4);
}

	
#horizontalportfolio {
	background-image:url(images/portfolio_icon@2x.png);
	background-size: 100px 106px;
	background-repeat:no-repeat;
	width:100px;
	height:106px;
	position:fixed;
	top:1.8%;
	right:39%;
	}
	
#horizontalportfolio_selected {
	background-image:url(images/portfolio_icon2@2x.png);
	background-size: 100px 106px;
	background-repeat:no-repeat;
	width:100px;
	height:106px;
	position:fixed;
	top:1.8%;
	right:39%;
	}
	
#horizontalresume {
	background-image:url(images/resume_icon@2x.png);
	background-size: 100px 106px;
	background-repeat:no-repeat;
	width:100px;
	height:106px;
	position:fixed;
	top:1.8%;
	right:22%;
	}
	
#horizontalresume_selected {
	background-image:url(images/resume_icon2@2x.png);
	background-size: 100px 106px;
	background-repeat:no-repeat;
	width:100px;
	height:106px;
	position:fixed;
	top:1.8%;
	right:22%;
	}
	
#horizontalblog {
	background-image:url(images/blog_icon@2x.png);
	background-size: 100px 106px;
	background-repeat:no-repeat;
	width:100px;
	height:106px;
	position:fixed;
	top:1.8%;
	right:5%;
	}
	
#horizontalblog_selected {
	background-image:url(images/blog_icon2@2x.png);
	background-size: 100px 106px;
	background-repeat:no-repeat;
	width:100px;
	height:106px;
	position:fixed;
	top:1.8%;
	right:5%;
	}
	
#navbg, #logo, #yu, #totop {
	visibility:hidden;
	}

#content {
	width:100%;
	left:0;
	}

#container img{
	width:100%;
	right:0;
	}
	
#container {
	margin-top:5%;
		}
	
#content a:hover {
	width:100%;
	filter: brightness(93%);
	-webkit-filter: brightness(93%);
	}

#content h1 {
	font-size:56pt;
	margin-top:2.3em;
	}
	
#content h3, #text {
	font-size:26pt;
	margin-left:1.7em;
	margin-right:1em;
	}
	
.baseboard {
	width:92%;
	padding-left:3em;
    }
	
.baseboard p {
	font-size:22pt;
	line-height:1.4;
	margin-top:0.6em;
	margin-bottom:0.6em;
    }
	
.popContent {
	width: 95%;
	margin-left:2%;
	}
	
.close-btn {
	background-size: 120px 120px;
	background-repeat:no-repeat;
	width:120px;
	height:120px;
	float:right;
	right:5%;
	}
	
#download_button {
	background-color: #EC9B4C;
	margin-top: -10%;
	padding: 15px 40px;
    font-size: 26pt;
	}

#blogbasic h2 {
	font-size:40pt;
	}

#blogbasic p {
	font-size:26pt;
	}

.blog_text {
	width:85%;
	}

#footer {
	height:1400px;
	}
	
#footer h2{
	font-size:40pt;
	}

#contact_me a, #follow_me a{
	font-size:26pt;
	}
	
#about_me p {
	font-size:26pt;
	width:95%;
	line-height:1.4;
	}
		
#about_me {
	left:10%;
	}
	
#contact_me {
	padding-top:40%;
	left:10%;
	}

#follow_me {
	padding-top:88%;
	left:10%;
	}
	
#contact_me p, #follow_me p {
	width:240px;
	margin-top:-10%;
	}
	
#footer h3 {
	font-size:22pt;
	padding-top:10%;
	left:10%;
	}
	
#gmail {
	background-image:url(images/contactmeicon@2x.png);
	margin-left:-4%;
	}
	
#phone {
	background-image:url(images/contactmeicon@2x.png);
	margin-left:-20%;
	}
	
#linkedin {
	background-image:url(images/contactmeicon@2x.png);
	margin-left:-20%;
	}
	
#medium {
	background-image:url(images/followmeicon@2x.png);
	margin-left:-5%;
	}
	
#instagram {
	background-image:url(images/followmeicon@2x.png);
	margin-left:-21%;
	}
	
#youtube {
	background-image:url(images/followmeicon@2x.png);
	margin-left:-22%;
	}
	
.back {
	background-image:url(images/back@2x.png);
	}
	
.close-btn {
	background-image:url(images/close_btn@2x.png);
	}
	
.recyclerplay-btn, .howismadeplay-btn, .beatlesplay-btn {
	background-image:url(images/play_btn@2x.png);
	}

.producthunt-btn {
	background-image:url(images/producthunt_btn@2x.png);
	background-size: 330px 51px;
	width:330px;
	height:51px;
	}

.featuredtwitter-btn {
	background-image:url(images/featuredtwitter_btn@2x.png);
	background-size: 188px 51px;
	width:188px;
	height:51px;
	}

.appstore-btn {
	background-image:url(images/appstore_btn@2x.png);
	background-size: 125px 51px;
	width:125px;
	height:51px;
	}

/*.continuereading-btn {
	background-image:url(images/continuereading_btn@2x.png);
	background-size: 316px 104px;
	width:316px;
	height:104px;
	}
*/

.triphiveprototype-btn {
	background-image:url(images/visit_btn@2x.png);
	}
}


/* CSS for high-resolution devices and desktop*/
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 1024px),
only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 1024px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 1024px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 1024px),
only screen and (min-resolution: 192dpi) and (min-width: 1024px),
only screen and (min-resolution: 2dppx) and (min-width: 1024px) {
	
	#navbg {
	background-image:url(images/colorbg@2x.jpg);
	}
	
   #logo {
	background-image:url(images/logo@2x.png);
	}
	
	#portfolio {
	background-image:url(images/portfolio_icon@2x.png);
	}
	
	#portfolio_selected {
	background-image:url(images/portfolio_icon2@2x.png);
	}
	
	#resume {
	background-image:url(images/resume_icon@2x.png);
	}
	
	#resume_selected {
	background-image:url(images/resume_icon2@2x.png);
	}
	
	#blog {
	background-image:url(images/blog_icon@2x.png);
	}
	
	#blog_selected {
	background-image:url(images/blog_icon2@2x.png);
	}
	
	#gmail {
	background-image:url(images/contactmeicon@2x.png);
	}
	
	#phone {
	background-image:url(images/contactmeicon@2x.png);
	}
	
	#linkedin {
	background-image:url(images/contactmeicon@2x.png);
	}
	
	#medium {
	background-image:url(images/followmeicon@2x.png);
	}
	
	#instagram {
	background-image:url(images/followmeicon@2x.png);
	}
	
	#youtube {
	background-image:url(images/followmeicon@2x.png);
	}
	
	#totop {
	background-image:url(images/totop@2x.png);
	}
	
	.back {
	background-image:url(images/back@2x.png);
	}
	
	.close-btn {
	background-image:url(images/close_btn@2x.png);
	}
	
	#yu {
	background-image:url(images/yu@2x.png);
	}
	
	.recyclerplay-btn, .howismadeplay-btn, .beatlesplay-btn {
	background-image:url(images/play_btn@2x.png);
	}
	
	.producthunt-btn {
	background-image:url(images/producthunt_btn@2x.png);
	background-size: 330px 51px;
	width:330px;
	height:51px;
	}

	.featuredtwitter-btn {
	background-image:url(images/featuredtwitter_btn@2x.png);
	background-size: 188px 51px;
	width:188px;
	height:51px;
	}

	.appstore-btn {
	background-image:url(images/appstore_btn@2x.png);
	background-size: 125px 51px;
	width:125px;
	height:51px;
	}

/*	.continuereading-btn {
	background-image:url(images/continuereading_btn@2x.png);
	background-size: 316px 104px;
	width:316px;
	height:104px;
	}
*/

	.triphiveprototype-btn {
	background-image:url(images/visit_btn@2x.png);
	}
}









/*
==============================================
Animation Stylesheet
==============================================
*/

.slideDown{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 0.8s;	
	-webkit-animation-duration: 0.8s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;						
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}		
	100% {
		transform: translateY(0%);
	}		
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
	}		
	100% {
		-webkit-transform: translateY(0%);
	}	
}

/*
==============================================
slideUp
==============================================
*/


.slideUp{
	animation-name: slideUp;
	-webkit-animation-name: slideUp;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;

	visibility: visible !important;			
}

@keyframes slideUp {
	0% {
		transform: translateY(100%);
	}
	50%{
		transform: translateY(-8%);
	}
	65%{
		transform: translateY(4%);
	}
	80%{
		transform: translateY(-4%);
	}
	95%{
		transform: translateY(2%);
	}			
	100% {
		transform: translateY(0%);
	}	
}

@-webkit-keyframes slideUp {
	0% {
		-webkit-transform: translateY(100%);
	}
	50%{
		-webkit-transform: translateY(-8%);
	}
	65%{
		-webkit-transform: translateY(4%);
	}
	80%{
		-webkit-transform: translateY(-4%);
	}
	95%{
		-webkit-transform: translateY(2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}

/*
==============================================
slideLeft
==============================================
*/


.slideLeft{
	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideLeft {
	0% {
		transform: translateX(150%);
	}
	50%{
		transform: translateX(-8%);
	}
	65%{
		transform: translateX(4%);
	}
	80%{
		transform: translateX(-4%);
	}
	95%{
		transform: translateX(2%);
	}			
	100% {
		transform: translateX(0%);
	}
}

@-webkit-keyframes slideLeft {
	0% {
		-webkit-transform: translateX(150%);
	}
	50%{
		-webkit-transform: translateX(-8%);
	}
	65%{
		-webkit-transform: translateX(4%);
	}
	80%{
		-webkit-transform: translateX(-4%);
	}
	95%{
		-webkit-transform: translateX(2%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}
}

/*
==============================================
slideRight
==============================================
*/


.slideRight{
	animation-name: slideRight;
	-webkit-animation-name: slideRight;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideRight {
	0% {
		transform: translateX(-150%);
	}
	50%{
		transform: translateX(8%);
	}
	65%{
		transform: translateX(-4%);
	}
	80%{
		transform: translateX(4%);
	}
	95%{
		transform: translateX(-2%);
	}			
	100% {
		transform: translateX(0%);
	}	
}

@-webkit-keyframes slideRight {
	0% {
		-webkit-transform: translateX(-150%);
	}
	50%{
		-webkit-transform: translateX(8%);
	}
	65%{
		-webkit-transform: translateX(-4%);
	}
	80%{
		-webkit-transform: translateX(4%);
	}
	95%{
		-webkit-transform: translateX(-2%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}
}

/*
==============================================
slideExpandUp
==============================================
*/


.slideExpandUp{
	animation-name: slideExpandUp;
	-webkit-animation-name: slideExpandUp;	

	animation-duration: 1.6s;	
	-webkit-animation-duration: 1.6s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease -out;

	visibility: visible !important;	
}

@keyframes slideExpandUp {
	0% {
		transform: translateY(100%) scaleX(0.5);
	}
	30%{
		transform: translateY(-8%) scaleX(0.5);
	}	
	40%{
		transform: translateY(2%) scaleX(0.5);
	}
	50%{
		transform: translateY(0%) scaleX(1.1);
	}
	60%{
		transform: translateY(0%) scaleX(0.9);		
	}
	70% {
		transform: translateY(0%) scaleX(1.05);
	}			
	80%{
		transform: translateY(0%) scaleX(0.95);		
	}
	90% {
		transform: translateY(0%) scaleX(1.02);
	}	
	100%{
		transform: translateY(0%) scaleX(1);		
	}
}

@-webkit-keyframes slideExpandUp {
	0% {
		-webkit-transform: translateY(100%) scaleX(0.5);
	}
	30%{
		-webkit-transform: translateY(-8%) scaleX(0.5);
	}	
	40%{
		-webkit-transform: translateY(2%) scaleX(0.5);
	}
	50%{
		-webkit-transform: translateY(0%) scaleX(1.1);
	}
	60%{
		-webkit-transform: translateY(0%) scaleX(0.9);		
	}
	70% {
		-webkit-transform: translateY(0%) scaleX(1.05);
	}			
	80%{
		-webkit-transform: translateY(0%) scaleX(0.95);		
	}
	90% {
		-webkit-transform: translateY(0%) scaleX(1.02);
	}	
	100%{
		-webkit-transform: translateY(0%) scaleX(1);		
	}
}

/*
==============================================
expandUp
==============================================
*/


.expandUp{
	animation-name: expandUp;
	-webkit-animation-name: expandUp;	

	animation-duration: 0.7s;	
	-webkit-animation-duration: 0.7s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;		

	visibility: visible !important;	
}

@keyframes expandUp {
	0% {
		transform: translateY(100%) scale(0.6) scaleY(0.5);
	}
	60%{
		transform: translateY(-7%) scaleY(1.12);
	}
	75%{
		transform: translateY(3%);
	}	
	100% {
		transform: translateY(0%) scale(1) scaleY(1);
	}	
}

@-webkit-keyframes expandUp {
	0% {
		-webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
	}
	60%{
		-webkit-transform: translateY(-7%) scaleY(1.12);
	}
	75%{
		-webkit-transform: translateY(3%);
	}	
	100% {
		-webkit-transform: translateY(0%) scale(1) scaleY(1);
	}	
}

.fadeInFast{
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;	

	animation-duration: 0.2s;	
	-webkit-animation-duration: 0.2s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes fadeInFast {
	0% {
		opacity: 0.0;		
	}

	100% {
		opacity: 1;	
	}		
}

@-webkit-keyframes fadeInFast {
	0% {
		opacity: 0.0;		
	}

	100% {
		opacity: 1;	
	}		
}

/*
==============================================
fadeIn
==============================================
*/

.fadeIn{
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;	

	animation-duration: 0.8s;	
	-webkit-animation-duration: 0.8s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes fadeIn {
	0% {
		opacity: 0.0;		
	}

	100% {
		opacity: 1;	
	}		
}

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0.0;		
	}

	100% {
		opacity: 1;	
	}		
}

/*.fadeIn{
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes fadeIn {
	0% {
		transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		transform: scale(1.1);	
	}
	80% {
		transform: scale(0.9);
		opacity: 1;	
	}	
	100% {
		transform: scale(1);
		opacity: 1;	
	}		
}

@-webkit-keyframes fadeIn {
	0% {
		-webkit-transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		-webkit-transform: scale(1.1);
	}
	80% {
		-webkit-transform: scale(0.9);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}		
} */

/*
==============================================
fadeOut
==============================================
*/

.fadeOut{
	animation-name: fadeOut;
	-webkit-animation-name: fadeOut;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes fadeOut {
	0% {
		opacity: 1;		
	}

	100% {
		opacity: 0.8;	
	}		
}

@-webkit-keyframes fadeOut {
	0% {
		opacity: 1;		
	}

	100% {
		opacity: 0.8;	
	}		
}

/*
==============================================
expandOpen
==============================================
*/


.expandOpen{
	animation-name: expandOpen;
	-webkit-animation-name: expandOpen;	

	animation-duration: 1.2s;	
	-webkit-animation-duration: 1.2s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

	visibility: visible !important;	
}

@keyframes expandOpen {
	0% {
		transform: scale(1.8);		
	}
	50% {
		transform: scale(0.95);
	}	
	80% {
		transform: scale(1.05);
	}
	90% {
		transform: scale(0.98);
	}	
	100% {
		transform: scale(1);
	}			
}

@-webkit-keyframes expandOpen {
	0% {
		-webkit-transform: scale(1.8);		
	}
	50% {
		-webkit-transform: scale(0.95);
	}	
	80% {
		-webkit-transform: scale(1.05);
	}
	90% {
		-webkit-transform: scale(0.98);
	}	
	100% {
		-webkit-transform: scale(1);
	}					
}

/*
==============================================
bigEntrance
==============================================
*/


.bigEntrance{
	animation-name: bigEntrance;
	-webkit-animation-name: bigEntrance;	

	animation-duration: 1.6s;	
	-webkit-animation-duration: 1.6s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

	visibility: visible !important;			
}

@keyframes bigEntrance {
	0% {
		transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
		opacity: 0.2;
	}
	30% {
		transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);		
		opacity: 1;
	}
	45% {
		transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	60% {
		transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);		
		opacity: 1;
	}	
	75% {
		transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	90% {
		transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);		
		opacity: 1;
	}	
	100% {
		transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;
	}		
}

@-webkit-keyframes bigEntrance {
	0% {
		-webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
		opacity: 0.2;
	}
	30% {
		-webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);		
		opacity: 1;
	}
	45% {
		-webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	60% {
		-webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);		
		opacity: 1;
	}	
	75% {
		-webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;
	}
	90% {
		-webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);		
		opacity: 1;
	}	
	100% {
		-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;
	}				
}

/*
==============================================
fadeInUp
==============================================
*/

.fadeInUp{
	animation-name: fadeInUp;
	-webkit-animation-name: fadeInUp;	

	animation-duration: 1.1s;	
	-webkit-animation-duration: 1.1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;

	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%; 

	visibility: visible !important;		
}

@keyframes fadeInUp {
	0% {
		transform: translateY(3%);
		opacity: 0;
	}
	
	70% {
		transform: translateY(0%);
		opacity: 0.85;
	}
	
	100% {
		transform: translateY(0%);
		opacity: 1;
	}									
}

@-webkit-keyframes fadeInUp {
	0% {
		-webkit-transform: translateY(3%);
		opacity: 0;
	}

	70% {
		-webkit-transform: translateY(0%);
		opacity: 0.85;
	}
	
	100% {
		-webkit-transform: translateY(0%);
		opacity: 1;
	}		
}


/*
==============================================
bounce
==============================================
*/


.bounce{
	animation-name: bounce;
	-webkit-animation-name: bounce;	

	animation-duration: 1.6s;	
	-webkit-animation-duration: 1.6s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	
	
	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%; 	
}

@keyframes bounce {
	0% {
		transform: translateY(0%) scaleY(0.6);
	}
	60%{
		transform: translateY(-100%) scaleY(1.1);
	}
	70%{
		transform: translateY(0%) scaleY(0.95) scaleX(1.05);
	}
	80%{
		transform: translateY(0%) scaleY(1.05) scaleX(1);
	}	
	90%{
		transform: translateY(0%) scaleY(0.95) scaleX(1);
	}				
	100%{
		transform: translateY(0%) scaleY(1) scaleX(1);
	}	
}

@-webkit-keyframes bounce {
	0% {
		-webkit-transform: translateY(0%) scaleY(0.6);
	}
	60%{
		-webkit-transform: translateY(-100%) scaleY(1.1);
	}
	70%{
		-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
	}
	80%{
		-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
	}	
	90%{
		-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
	}				
	100%{
		-webkit-transform: translateY(0%) scaleY(1) scaleX(1);
	}		
}


/*
==============================================
pulse
==============================================
*/

.pulse{
	animation-name: pulse;
	-webkit-animation-name: pulse;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.9);
		opacity: 0.7;		
	}
	50% {
		transform: scale(1);
		opacity: 1;	
	}	
	100% {
		transform: scale(0.9);
		opacity: 0.7;	
	}			
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;		
	}
	50% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;	
	}			
}

/*
==============================================
floating
==============================================
*/

.floating{
	animation-name: floating;
	-webkit-animation-name: floating;

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes floating {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(8%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}

@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(8%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}

/*
==============================================
tossing
==============================================
*/

.tossing{
	animation-name: tossing;
	-webkit-animation-name: tossing;	

	animation-duration: 2.5s;	
	-webkit-animation-duration: 2.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes tossing {
	0% {
		transform: rotate(-4deg);	
	}
	50% {
		transform: rotate(4deg);
	}
	100% {
		transform: rotate(-4deg);	
	}						
}

@-webkit-keyframes tossing {
	0% {
		-webkit-transform: rotate(-4deg);	
	}
	50% {
		-webkit-transform: rotate(4deg);
	}
	100% {
		-webkit-transform: rotate(-4deg);	
	}				
}

/*
==============================================
pullUp
==============================================
*/

.pullUp{
	animation-name: pullUp;
	-webkit-animation-name: pullUp;	

	animation-duration: 1.1s;	
	-webkit-animation-duration: 1.1s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%; 		
}

@keyframes pullUp {
	0% {
		transform: scaleY(0.1);
	}
	40% {
		transform: scaleY(1.02);
	}
	60% {
		transform: scaleY(0.98);
	}
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(0.98);
	}				
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(1);
	}							
}

@-webkit-keyframes pullUp {
	0% {
		-webkit-transform: scaleY(0.1);
	}
	40% {
		-webkit-transform: scaleY(1.02);
	}
	60% {
		-webkit-transform: scaleY(0.98);
	}
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(0.98);
	}				
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(1);
	}		
}

/*
==============================================
pullDown
==============================================
*/

.pullDown{
	animation-name: pullDown;
	-webkit-animation-name: pullDown;	

	animation-duration: 1.1s;	
	-webkit-animation-duration: 1.1s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

	transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	-webkit-transform-origin: 50% 0%; 		
}

@keyframes pullDown {
	0% {
		transform: scaleY(0.1);
	}
	40% {
		transform: scaleY(1.02);
	}
	60% {
		transform: scaleY(0.98);
	}
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(0.98);
	}				
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(1);
	}							
}

@-webkit-keyframes pullDown {
	0% {
		-webkit-transform: scaleY(0.1);
	}
	40% {
		-webkit-transform: scaleY(1.02);
	}
	60% {
		-webkit-transform: scaleY(0.98);
	}
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(0.98);
	}				
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(1);
	}		
}

/*
==============================================
stretchLeft
==============================================
*/

.stretchLeft{
	animation-name: stretchLeft;
	-webkit-animation-name: stretchLeft;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

	transform-origin: 100% 0%;
	-ms-transform-origin: 100% 0%;
	-webkit-transform-origin: 100% 0%; 
}

@keyframes stretchLeft {
	0% {
		-webkit-transform: scaleX(0.3);
	}
	40% {
		-webkit-transform: scaleX(1);
	}
	60% {
		-webkit-transform: scaleX(0.98);
	}
	100% {
		-webkit-transform: scaleX(1);
	}							
}

/*@keyframes stretchLeft {
	0% {
		transform: scaleX(0.3);
	}
	40% {
		transform: scaleX(1.02);
	}
	60% {
		transform: scaleX(0.98);
	}
	80% {
		transform: scaleX(1.01);
	}
	100% {
		transform: scaleX(0.98);
	}				
	80% {
		transform: scaleX(1.01);
	}
	100% {
		transform: scaleX(1);
	}							
} */

@-webkit-keyframes stretchLeft {
	0% {
		-webkit-transform: scaleX(0.3);
	}
	40% {
		-webkit-transform: scaleX(1);
	}
	60% {
		-webkit-transform: scaleX(0.98);
	}
	100% {
		-webkit-transform: scaleX(1);
	}		
}

/*@-webkit-keyframes stretchLeft {
	0% {
		-webkit-transform: scaleX(0.3);
	}
	40% {
		-webkit-transform: scaleX(1.02);
	}
	60% {
		-webkit-transform: scaleX(0.98);
	}
	80% {
		-webkit-transform: scaleX(1.01);
	}
	100% {
		-webkit-transform: scaleX(0.98);
	}				
	80% {
		-webkit-transform: scaleX(1.01);
	}
	100% {
		-webkit-transform: scaleX(1);
	}		
} */

/*
==============================================
stretchRight
==============================================
*/

.stretchRight{
	animation-name: stretchRight;
	-webkit-animation-name: stretchRight;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

	transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%; 		
}

@keyframes stretchRight {
	0% {
		-webkit-transform: scaleX(0.3);
	}
	40% {
		-webkit-transform: scaleX(1);
	}
	60% {
		-webkit-transform: scaleX(0.98);
	}
	100% {
		-webkit-transform: scaleX(1);
	}						
}

/*@keyframes stretchRight {
	0% {
		transform: scaleX(0.3);
	}
	40% {
		transform: scaleX(1.02);
	}
	60% {
		transform: scaleX(0.98);
	}
	80% {
		transform: scaleX(1.01);
	}
	100% {
		transform: scaleX(0.98);
	}				
	80% {
		transform: scaleX(1.01);
	}
	100% {
		transform: scaleX(1);
	}							
} */

@-webkit-keyframes stretchRight {
	0% {
		-webkit-transform: scaleX(0.3);
	}
	40% {
		-webkit-transform: scaleX(1);
	}
	60% {
		-webkit-transform: scaleX(0.98);
	}
	100% {
		-webkit-transform: scaleX(1);
	}		
}

/*@-webkit-keyframes stretchRight {
	0% {
		-webkit-transform: scaleX(0.3);
	}
	40% {
		-webkit-transform: scaleX(1.02);
	}
	60% {
		-webkit-transform: scaleX(0.98);
	}
	80% {
		-webkit-transform: scaleX(1.01);
	}
	100% {
		-webkit-transform: scaleX(0.98);
	}				
	80% {
		-webkit-transform: scaleX(1.01);
	}
	100% {
		-webkit-transform: scaleX(1);
	}		
}
*/