html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display: block; }
body{ line-height: 1; }
ol, ul{ list-style: none; }
blockquote, q{ quotes: none; }
blockquote:before, blockquote:after, q:before, q:after{ content: ''; content: none; }
table{ border-collapse: collapse; border-spacing: 0; }

html{ min-width: 320px; overflow-x: hidden; overflow-y: scroll;}
body{ background: #292929; color: #708491; font: 16px/1.5 Arial, sans-serif;}
a{ cursor: pointer;}
input:focus, input:active{ outline: none;}
::-webkit-input-placeholder{ padding-top: 5px;}
textarea::-webkit-input-placeholder{ padding-top: 0;}

#header,
#detail-name{ font-family: 'bbx700', Georgia, serif; font-weight: normal;}
#description,
#you,
.heading,
.project,
#detail-description,
.story h5{ font-family: 'bbx300', Georgia, serif; font-weight: normal;}
#testimonials,
.skills,
#calendar,
#detail-text,
.story,
.element{ font-family: 'bbx', Georgia, serif; font-weight: normal;}

#name,
#description,
#nav a,
.button,
.dots a,
.arrow,
#detail-close,
.level strong,
.app{ overflow: hidden; text-indent: -290486px;}

.wrap{ margin: 0 auto; position: relative; width: 960px;}
.button{ background: url(https://jgthms.com/the-bbx/images/buttons.png) no-repeat 0 0; display: inline-block; height: 62px; position: relative; width: 234px;}
.button-email{ background-position: 0 -70px;}
.button-visit{ background-position: 0 -140px; width: 216px;}
.button:active{ top: 2px;}
.button-portfolio:active{ background-position: -240px 0;}
.button-email:active{ background-position: -240px -70px;}
.button-visit:active{ background-position: -240px -140px;}
.dots{ height: 16px; text-align: center;}
.dots a{ border-radius: 8px; display: inline-block; height: 16px; margin: 0 4px; vertical-align: top; width: 16px;}
.arrow{ background: url(https://jgthms.com/the-bbx/images/arrows.png) no-repeat 0 0; display: block; height: 80px; width: 40px;}
.arrow-next{ background-position: -40px 0;}
.heading{ line-height: 1.25; margin-bottom: 80px; text-align: center;}
.title{ color: white; font-size: 48px;}
.subtitle{ color: #f5574c; font-size: 32px;}
.level,
.level strong{ background: #1f1f1f; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.48) inset, 0 1px 1px rgba(255, 255, 255, 0.12); height: 20px; position: relative; width: 300px;}
.level strong{ background: #f5574c; box-shadow: 0 1px 1px #f5b3ae inset, 0 2px 4px rgba(0, 0, 0, 0.48); left: 0; position: absolute; top: 0; width: 100%;}
.level-90 strong{ width: 90%;}
.level-80 strong{ width: 80%;}
.level-60 strong{ width: 60%;}
.app{ background: url(https://jgthms.com/the-bbx/images/apps.png) no-repeat 0 0; display: inline-block; height: 32px; position: relative; width: 33px;}
.app-sublime-text{ background-position: 0 -40px;}
.app-wordpress{ background-position: 0 -80px;}
.element{ background: rgba(41, 41, 41, 0.48); border: 4px solid white; color: white; font-size: 24px;}
input.element{ line-height: 1; padding: 10px; padding-top: 5px; width: 352px;}
textarea.element{ height: 300px; line-height: 1.5; max-width: 742px; padding: 10px 15px; width: 742px;}
.element:focus{ background: rgba(41, 41, 41, 0.86); border-color: #f5574c; outline: none;}
.aperture{ overflow: hidden; position: relative; height: 215px;}
.reel{ left: 0; position: absolute; top: 0; width: 500%;}
.item{ float: left; width: 20%;}

#loading{ background: #f5574c; height: 100%; left: 0; overflow: hidden; position: fixed; top: 0; width: 100%; z-index: 9999;}
.end#loading{ background: none;}
.end#loading-atoms{ display: none;}
#loading-top,
#loading-bottom{ background: #f5574c; height: 50%; left: 0; position: fixed; width: 100%;}
#loading-top{ border-bottom: 2px solid white; top: 0;}
#loading-bottom{ bottom: 0; border-top: 2px solid white;}
#loading-atoms,
.loading-atom,
#loading-disc,
#loading-circle{ left: 50%; position: fixed; top: 50%;}
#loading-atoms{ height: 20px; margin: -11px 0 0 -10px; width: 20px;}
.loading-atom{ border-radius: 10px; height: 20px; left: 0; top: 0; width: 20px;}
#loading-atom-1{ background: #379ce0;}
#loading-atom-2{ background: #78c905;}
#loading-atom-3{ background: #ecb624;}
#loading-atom-4{ background: #f5574c;}
#loading-circle,
#loading-disc{ border-radius: 50px; margin: -51px 0 0 -50px;}
#loading-circle{ border: 2px solid white; height: 96px; width: 96px;}
#loading-disc{ background: white; height: 100px; width: 100px;}

#header{ background: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16); height: 32px; left: 0; line-height: 32px; padding: 14px 0; position: fixed; top: -66px; width: 100%; z-index: 2000;}
#logo{ background: url(https://jgthms.com/the-bbx/images/bbx.png) no-repeat 0 0; float: left; height: 32px; margin-left: 14px; padding-left: 40px;}
#name,
#description{ background: url(https://jgthms.com/the-bbx/images/name.png) no-repeat 0 0; float: left; height: 32px;}
#name{ color: #f5574c; width: 79px;}
#description{ background-image: url(https://jgthms.com/the-bbx/images/description.png); color: #b0b0b0; margin-left: 8px; width: 242px;}
#menu{ background: url(https://jgthms.com/the-bbx/images/menu.png) no-repeat 0 0; display: none; height: 21px; position: absolute; right: 20px; top: 20px; width: 24px;}
#nav{ float: right; font-size: 12px; margin-right: 14px; text-transform: uppercase; width: 508px;}
#nav li{ display: inline;}
.nav{ background: url(https://jgthms.com/the-bbx/images/nav.png) no-repeat 0 0; border-radius: 4px; float: left; padding: 0 15px;}
.nav:hover{ background-color: #f5574c;}
#nav-home{ width: 40px;}
#nav-skills{ background-position: 0 -40px; width: 44px;}
#nav-portfolio{ background-position: 0 -80px; width: 77px;}
#nav-timeline{ background-position: 0 -120px; width: 65px;}
#nav-contact{ background-position: 0 -160px; width: 66px;}
#nav-blog{ background-position: 0 -200px; width: 36px;}
#nav-home:hover{ background-position: -200px 0 !important;}
#nav-skills:hover{ background-position: -200px -40px !important;}
#nav-portfolio:hover{ background-position: -200px -80px !important;}
#nav-timeline:hover{ background-position: -200px -120px !important;}
#nav-contact:hover{ background-position: -200px -160px !important;}
#nav-blog:hover{ background-position: -200px -200px !important;}
#nav-home.on{ background-position: -100px 0;}
#nav-skills.on{ background-position: -100px -40px;}
#nav-portfolio.on{ background-position: -100px -80px;}
#nav-timeline.on{ background-position: -100px -120px;}
#nav-contact.on{ background-position: -100px -160px;}
#nav-blog.on{ background-position: -100px -200px;}

#hello{ background: #292929 url(https://jgthms.com/the-bbx/images/desktop.jpg) no-repeat fixed center top; height: 700px; position: relative; text-align: center;}
/*#hello-background{ background: #292929; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}*/
#you{ color: white; height: 300px; left: 50%; line-height: 1.25; margin: -120px 0 0 -470px; position: absolute; text-shadow: 0 4px 16px black; top: 50%; width: 960px;}
#hey{ font-size: 48px; font-weight: normal;}
#there{ color: #dbdbdb; font-size: 32px; font-weight: normal; margin-top: 10px;}
#hello p{ padding-top: 20px;}
#hello .button{ margin: 0 5px;}

#testimonials{ background: #f5574c; color: white; padding: 80px 0 60px; position: relative; text-align: center;}
#testimonials .reel{ opacity: 0;}
.testimonial blockquote,
.testimonial p{ margin: 0 auto; width: 620px;}
.testimonial blockquote{ font-size: 32px; font-style: italic; padding-bottom: 20px; position: relative; z-index: 50;}
.testimonial p{ border-top: 1px dotted #d4362b; color: #d4362b; font-size: 20px; padding-top: 20px;}
#testimonials .dots{ padding-top: 60px;}
#testimonials .dots a{ background: #d4362b;}
#testimonials .dots a:hover{ background: #ba1c11;}
#testimonials .dots .current,
#testimonials .dots .current:hover{ background: white;}
#testimonials .arrow{ margin-top: -40px; position: absolute; top: 50%;}
#testimonials .arrow-previous{ left: 40px;}
#testimonials .arrow-next{ right: 40px;}

#skills{ padding: 80px 0;}
.skills{ min-height: 615px;}
.skill{ border-top: 1px dotted #4a4a4a; padding: 20px 0 30px;}
.skill .level{ float: right; margin-top: 10px;}
.skill-icon{ background: url(https://jgthms.com/the-bbx/images/skills.png) no-repeat 0 0; float: left; height: 64px; margin: 10px 30px 0 0; width: 64px;}
.skill-title{ color: white; font-size: 32px; font-weight: bold;}
.skill-list{ font-style: italic;}
.skill-list li{ display: inline; margin-right: 20px;}
#wordpress .skill-icon{ background-position: 0 -70px;}
#jquery .skill-icon{ background-position: 0 -140px;}
#photoshop .skill-icon{ background-position: 0 -210px;}
#illustrator .skill-icon{ background-position: 0 -280px;}

#portfolio{ background: white url(https://jgthms.com/the-bbx/images/mountains.jpg) no-repeat fixed center top;}
#portfolio .wrap{ width: 1200px;}
#portfolio .heading{ margin-bottom: 0; padding: 60px 0;}
#portfolio .title{ color: #f5574c;}

#projects{ height: 600px; overflow: hidden; position: relative;}
.project{ color: white; display: block; float: left; height: 300px; left: 0; line-height: 1; position: absolute; text-align: center; top: 0; width: 300px;}
.project-image,
.project-content,
.project-name,
.project-description,
.project-apps{ left: 0; position: absolute; width: 100%;}
.project-image,
.project-content{ height: 100%;}
.project-content{ background: rgba(245, 87, 76, 0.92); opacity: 0;}
.project-name{ bottom: 60%; font-size: 48px;}
.project-description{ font-size: 24px; opacity: 0.69; top: 60%;}
.project-apps{ bottom: 40px; height: 32px;}
.project-apps .app{ margin: 0 10px; opacity: 0; top: 12px;}
#cv .project-name,
#wp .project-name,
#css .project-name,
#at .project-name,
#em .project-name,
#jg .project-name,
#rtt .project-name{ font-size: 32px;}
.project:hover .project-content{ opacity: 1;}
.project:hover .project-name{ bottom: 51%;}
.project:hover .project-description{ top: 51%;}
.project:hover .project-apps .app{ opacity: 1; top: 0;}
#detail-background{ background: #f5574c; height: 100%; left: 0; opacity: 0.86; position: fixed; top: 0; width: 100%; z-index: 1000;}
#detail{ background: white; background: rgba(255, 255, 255, 0.92); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.48); height: 700px; left: 60px; position: fixed; overflow: hidden; top: 120px; width: 1300px; z-index: 3000;}
#detail-image{ background: no-repeat 0 0; height: 100%; position: absolute; right: 0; top: 0; width: 50%; z-index: 5000;}
#detail-left{ height: 100%; left: 0; position: absolute; width: 50%;}
#detail-content{ padding: 40px;}
#detail-name{ color: #f5574c; font-size: 48px; line-height: 1; margin-bottom: 10px; padding-right: 170px;}
#detail-description{ color: #b0b0b0; font-size: 24px; line-height: 1.25;}
#detail-border{ background: #dbdbdb; border: none; height: 1px; margin: 20px 0;}
#detail-text{ color: #7a7a7a; font-size: 22px; margin-bottom: 20px;}
#detail-apps{ bottom: 40px; position: absolute; right: 40px;}
#detail-apps .app{ margin-left: 20px;}
#detail-close,
#detail-next,
#detail-previous{ background: url(https://jgthms.com/the-bbx/images/navigation.png) no-repeat 0 0; cursor: pointer; display: block; height: 48px; opacity: 0.08; position: absolute; right: 40px; top: 40px; width: 48px; z-index: 4000;}
#detail-next{ background-position: 0 -50px; right: 100px;}
#detail-previous{ background-position: 0 -100px; right: 150px;}
#detail-close:hover,
#detail-next:hover,
#detail-previous:hover{ opacity: 0.16;}
#preview{ display: none;}
#preview.go{ display: block;}

#timeline{ padding-top: 80px;}
#calendar{ border-radius: 5px; height: 180px; margin-bottom: 80px; overflow: hidden; position: relative;}
#time{ background: #1f1f1f; border-bottom: 10px solid #141414; height: 100px; left: 0; opacity: 0.48; position: absolute; top: 0; width: 100%;}
#chapters{ background: url(https://jgthms.com/the-bbx/images/time.png) repeat-x -170px 110px; left: 2000px; opacity: 0; padding: 0 480px 40px; position: absolute; top: 0; width: 2860px;}
.chapter{ background: #6d89ac; float: left; height: 80px; line-height: 1.25; min-width: 100px; padding: 10px 0; position: relative; text-indent: 15px;}
.chapter strong{ color: white; display: block; font-size: 24px; font-weight: bold;}
.chapter em{ color: #c1dbfc; display: block; font-size: 20px; font-style: italic;}
.chapter-time{ color: #325989; display: block; font-size: 24px; position: absolute; right: 10px; top: 10px;}
.chapter span{ background: #325989; bottom: -10px; height: 10px; left: -5px; position: absolute; width: 100%;}
#years{ bottom: -40px; color: white; font-size: 24px; font-weight: bold; left: 0; padding-left: 39px; position: absolute; width: 3360px;}
#years li{ float: left; width: 240px;}
#magendie{ margin-right: 40px; width: 680px;}
#cachan{ background: #528f6c; margin-right: 40px; width: 440px;}
#cachan em{ color: #8fe6b4;}
#cachan .chapter-time{ color: #297348;}
#cachan span{ background: #297348;}
#bordeaux4{ background: #cdcd00; margin-right: 120px; width: 120px;}
#bordeaux4 em{ color: #f0f03a;}
#bordeaux4 .chapter-time{ color: #8a8a00; display: none;}
#bordeaux4 span{ background: #8a8a00;}
#amtv{ background: #4e4e4e; width: 200px;}
#amtv em{ color: #f29500;}
#amtv .chapter-time{ color: #1f1f1f; display: none;}
#amtv span{ background: #1f1f1f;}
#mgd{ background: #09c; width: 200px;}
#mgd em{ color: #a8eaff;}
#mgd .chapter-time{ color: #056382; display: none;}
#mgd span{ background: #056382;}
#virtuoz{ background: #b60000; width: 200px;}
#virtuoz em{ color: #e37d7d;}
#virtuoz .chapter-time{ color: #850606; display: none;}
#virtuoz span{ background: #850606;}
#steaw{ background: #094062; width: 560px;}
#steaw em{ color: #72b0d5;}
#steaw .chapter-time{ color: #021c2c;}
#steaw span{ background: #021c2c;}
#stories{ height: 300px; overflow: hidden; padding-bottom: 120px; position: relative;}
#stories-reel{ left: -2000px; opacity: 0; position: absolute; top: 0; width: 7740px;}
.story{ color: #586e75; cursor: pointer; float: left; font-size: 20px; margin: 0 20px; opacity: 0.29; padding-left: 80px; position: relative; text-shadow: none; width: 700px;}
.story:hover{ opacity: 0.48;}
.current.story,
.current.story:hover{ cursor: default; opacity: 1;}
.story-number, #restart{ background: #528f6c; border-radius: 30px; color: white; display: block; float: left; font-size: 40px; font-weight: bold; height: 60px; left: 0; line-height: 50px; position: absolute; text-align: center; top: 0; width: 60px;}
.story h5{ color: white; font-size: 32px; line-height: 60px;}
.story p{ margin-top: 10px;}
#restart{ background: #f5574c; float: left; margin-left: 40px; opacity: 0.29; position: static;}
#restart:hover{ opacity: 1;}

#contact{ background: white url(https://jgthms.com/the-bbx/images/forest.jpg) no-repeat fixed center top; min-height: 620px; padding: 80px 0;}
#contact .title{ color: #f5574c;}
#contact form{ margin: 0 auto; width: 780px;}
#contact-name,
#contact-email{ padding: 0; width: 380px;}
#contact-name{ float: left;}
#contact-email{ float: right;}
#contact-subject{ clear: both; padding-top: 40px;}
#contact-subject .element{ width: 752px;}
#contact-message,
#contact-submit{ padding-top: 20px;}
#contact-blabla .captcha-131{ display: block;}
#send{ position: relative; right: 3px;}
#send:active{ right: 3px; top: 2px;}
span.wpcf7-not-valid-tip{ background: #f5574c; border: 4px solid white; color: white; font-size: 14px; padding: 5px 10px;}
div.wpcf7-response-output{ background: rgba(41, 41, 41, 0.48); border-width: 4px !important; color: white; margin: 20px 0 0; padding: 5px 10px;}

/* CSS 3 */

#loading-grid, #loading-b, #loading-d-2, #loading-gd-2{ -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);}
#loading-d-1, #loading-gd-1{ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg);}

a, .element{
  transition: background-color 250ms ease-out, border 250ms ease-out, color 250ms ease-out;
  -webkit-transition: background-color 250ms ease-out, border 250ms ease-out, color 250ms ease-out;
}

.project-content, #detail-close, #detail-next, #detail-previous, .story, #restart{
  transition: opacity 250ms ease;
  -webkit-transition: opacity 250ms ease;
}

.project-name, .project-description{
  transition: all 250ms ease;
  -webkit-transition: all 250ms ease;
}

.app{
  transition: all 250ms ease-out 125ms;
  -webkit-transition: all 250ms ease-out 125ms;
}

.app:nth-child(2){
  transition-delay: 250ms;
  -webkit-transition-delay: 250ms;
}

.app:nth-child(3){
  transition-delay: 375ms;
  -webkit-transition-delay: 375ms;
}

#header{
  background: white;
  background: -moz-linear-gradient(top, rgba(255, 255, 255,1) 1%, rgba(255, 255, 255, 0.86) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(255, 255, 255,1)), color-stop(100%,rgba(255, 255, 255, 0.86)));
  background: -webkit-linear-gradient(top, rgba(255, 255, 255,1) 1%,rgba(255, 255, 255, 0.86) 100%);
  background: -o-linear-gradient(top, rgba(255, 255, 255,1) 1%,rgba(255, 255, 255, 0.86) 100%);
  background: -ms-linear-gradient(top, rgba(255, 255, 255,1) 1%,rgba(255, 255, 255, 0.86) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255,1) 1%,rgba(255, 255, 255, 0.86) 100%);
}

#hello, #portfolio, #detail-image, #contact{
  background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
}

.level strong{
  background: #f5574c;
  background: -moz-linear-gradient(top, #f5574c 1%, #db2b1f 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#f5574c), color-stop(100%,#db2b1f));
  background: -webkit-linear-gradient(top, #f5574c 1%,#db2b1f 100%);
  background: -o-linear-gradient(top, #f5574c 1%,#db2b1f 100%);
  background: -ms-linear-gradient(top, #f5574c 1%,#db2b1f 100%);
  background: linear-gradient(to bottom, #f5574c 1%,#db2b1f 100%);
}

.level-90 strong{ box-shadow: 0 1px 1px #f8edd1 inset, 0 2px 4px rgba(0, 0, 0, 0.48);}
.level-90 strong{
  background: #ecb624;
  background: -moz-linear-gradient(top, #ecb624 1%, #cb8602 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ecb624), color-stop(100%,#cb8602));
  background: -webkit-linear-gradient(top, #ecb624 1%,#cb8602 100%);
  background: -o-linear-gradient(top, #ecb624 1%,#cb8602 100%);
  background: -ms-linear-gradient(top, #ecb624 1%,#cb8602 100%);
  background: linear-gradient(to bottom, #ecb624 1%,#cb8602 100%);
}

.level-80 strong{ box-shadow: 0 1px 1px #d3ebab inset, 0 2px 4px rgba(0, 0, 0, 0.48);}
.level-80 strong{
  background: #78c905;
  background: -moz-linear-gradient(top, #78c905 1%, #559501 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#78c905), color-stop(100%,#559501));
  background: -webkit-linear-gradient(top, #78c905 1%,#559501 100%);
  background: -o-linear-gradient(top, #78c905 1%,#559501 100%);
  background: -ms-linear-gradient(top, #78c905 1%,#559501 100%);
  background: linear-gradient(to bottom, #78c905 1%,#559501 100%);
}

.level-60 strong{ box-shadow: 0 1px 1px #a5cfec inset, 0 2px 4px rgba(0, 0, 0, 0.48);}
.level-60 strong{
  background: #379ce0;
  background: -moz-linear-gradient(top, #379ce0 1%, #0777c3 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#379ce0), color-stop(100%,#0777c3));
  background: -webkit-linear-gradient(top, #379ce0 1%,#0777c3 100%);
  background: -o-linear-gradient(top, #379ce0 1%,#0777c3 100%);
  background: -ms-linear-gradient(top, #379ce0 1%,#0777c3 100%);
  background: linear-gradient(to bottom, #379ce0 1%,#0777c3 100%);
}

.chapter span{
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
  transform: skew(-45deg);
}

/* Animations */

#hey,
#there,
#view-portfolio,
#send-email,
.arrow,
.dots a,
.title,
.subtitle,
.skill,
.level strong,
.project,
#preview,
#detail-background,
#detail,
#detail-image,
#detail-name,
#detail-description,
#detail-border,
#detail-text,
#detail-link,
#detail-image,
#detail-apps .app,
.element,
#send{ opacity: 0; position: relative; z-index: 100;}

#preview,
#detail-border,
.level strong{ opacity: 1;}

.level strong,
.project,
#detail-image{ position: absolute;}

#detail-background,
#detail{ position: fixed;}

#detail-background{ z-index: 1000;}
#detail{ z-index: 3000;}
#detail-close,
#detail-next,
#detail-previous{ z-index: 4000;}
#detail-image{ z-index: 5000;}

@-webkit-keyframes loading-one{
  0%{ width: 0;}
  100%{ width: 50%;}
}

@-webkit-keyframes loading-two{
  0%{ width: 50%;}
  100%{ width: 100%;}
}

@-webkit-keyframes loading-three{
  0%{ border-width: 2px; height: 50%; width: 100%;}
  100%{ border-width: 0; height: 0; width: 100%;}
}

@-webkit-keyframes spin{
  0% { -webkit-transform: rotate(0deg);}
  50% { -webkit-transform: rotate(-180deg);}
  100% { -webkit-transform: rotate(-360deg);}
}

@-webkit-keyframes rotate-top-right{
  0% { -webkit-transform: rotate(0deg);}
  50% { -webkit-transform: rotate(-180deg); -webkit-transform-origin: 20% 20%;}
  100% { -webkit-transform: rotate(-360deg);}
}

@-webkit-keyframes rotate-top-left{
  0% { -webkit-transform: rotate(0deg);}
  50% { -webkit-transform: rotate(180deg); -webkit-transform-origin: 80% 20%;}
  100% { -webkit-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-bottom-right{
  0% { -webkit-transform: rotate(0deg);}
  50% { -webkit-transform: rotate(-180deg); -webkit-transform-origin: 80% 80%;}
  100% { -webkit-transform: rotate(-360deg);}
}

@-webkit-keyframes rotate-bottom-left{
  0% { -webkit-transform: rotate(0deg);}
  50% { -webkit-transform: rotate(180deg); -webkit-transform-origin: 20% 80%;}
  100% { -webkit-transform: rotate(360deg);}
}
@-webkit-keyframes circle{
  0% { -webkit-transform: scale(1.25, 1.25);}
  100% { -webkit-transform: scale(0, 0);}
}

@-webkit-keyframes disc{
  0% { -webkit-transform: scale(0, 0);}
  100% { -webkit-transform: scale(1, 1);}
}

@-webkit-keyframes revert-scale{
  0% { -webkit-transform: scale(1, 1);}
  100% { -webkit-transform: scale(0, 0);}
}

@-webkit-keyframes fade-in{
  0%{ opacity: 0;}
  100%{ opacity: 1;}
}

@-webkit-keyframes fade-out{
  0%{ opacity: 1;}
  100%{ opacity: 0;}
}

@-webkit-keyframes overlay{
  0%{ opacity: 0;}
  100%{ opacity: 0.86;}
}

@-webkit-keyframes revert-overlay{
  0%{ opacity: 0.86;}
  100%{ opacity: 0;}
}

@-webkit-keyframes down{
  0%{ opacity: 0; -webkit-transform: translateY(-24px);}
  100%{ opacity: 1; -webkit-transform: translateY(0);}
}

@-webkit-keyframes up{
  0%{ opacity: 0; -webkit-transform: translateY(24px);}
  100%{ opacity: 1; -webkit-transform: translateY(0);}
}

@-webkit-keyframes revert-up{
  0%{ opacity: 1; -webkit-transform: translateY(0);}
  100%{ opacity: 0; -webkit-transform: translateY(24px);}
}

@-webkit-keyframes revert-up{
  0%{ opacity: 1; -webkit-transform: translateY(0);}
  100%{ opacity: 0; -webkit-transform: translateY(24px);}
}

@-webkit-keyframes up-fast{
  0%{ opacity: 0; -webkit-transform: translateY(24px);}
  50%{ opacity: 0.50; -webkit-transform: translateY(-12px);}
  100%{ opacity: 1; -webkit-transform: translateY(0);}
}

@-webkit-keyframes left{
  0%{ opacity: 0; -webkit-transform: translateX(24px);}
  100%{ opacity: 1; -webkit-transform: translateX(0);}
}

@-webkit-keyframes revert-left{
  0%{ opacity: 1; -webkit-transform: translateX(0);}
  100%{ opacity: 0; -webkit-transform: translateX(24px);}
}

@-webkit-keyframes right{
  0%{ opacity: 0; -webkit-transform: translateX(-24px);}
  100%{ opacity: 1; -webkit-transform: translateX(0);}
}

@-webkit-keyframes revert-right{
  0%{ opacity: 1; -webkit-transform: translateX(0);}
  100%{ opacity: 0; -webkit-transform: translateX(-24px);}
}

@-webkit-keyframes grow{
  0%{ opacity: 0; -webkit-transform: scale(0.96, 0.96);}
  100%{ opacity: 1; -webkit-transform: scale(1, 1);}
}

@-webkit-keyframes revert-grow{
  0%{ opacity: 1; -webkit-transform: scale(1, 1);}
  100%{ opacity: 0; -webkit-transform: scale(0.96, 0.96);}
}

@-webkit-keyframes slide-down{
  0%{ opacity: 0; max-height: 0;}
  100%{ opacity: 1; max-height: 60px;}
}

@-webkit-keyframes close{
  0%{ -webkit-transform: translateY(-96px);}
  100%{ -webkit-transform: translateY(0);}
}

@-webkit-keyframes revert-close{
  0%{ -webkit-transform: translateY(0);}
  100%{ -webkit-transform: translateY(-96px);}
}

@-webkit-keyframes reveal{
  0%{ opacity: 0; left: 100%;}
  100%{ opacity: 1; left: 50%;}
}

@-webkit-keyframes revert-reveal{
  0%{ opacity: 1; left: 50%;}
  100%{ opacity: 0; left: 100%;}
}

@-webkit-keyframes fill-100{
  0%{ width: 0%;}
  100%{ width: 100%;}
}

@-webkit-keyframes revert-fill-100{
  0%{ width: 100%;}
  100%{ width: 0%;}
}

@-webkit-keyframes fill-90{
  0%{ width: 0%;}
  100%{ width: 90%;}
}

@-webkit-keyframes fill-80{
  0%{ width: 0%;}
  100%{ width: 80%;}
}

@-webkit-keyframes fill-60{
  0%{ width: 0%;}
  100%{ width: 60%;}
}

@-webkit-keyframes drop{
  0%{ opacity: 1; -webkit-transform: translateY(0);}
  100%{ opacity: 0; -webkit-transform: translateY(200px);}
}

@-webkit-keyframes revert-drop{
  0%{ opacity: 0; -webkit-transform: translateY(200px);}
  100%{ opacity: 1; -webkit-transform: translateY(0);}
}

#loading-top,
#loading-bottom,
#loading-atoms,
.loading-atom,
#loading-circle,
#loading-disc,
.go #hey,
.go #there,
.go #view-portfolio,
.go #send-email,
.go .arrow,
.go .dots a,
.go .title,
.go .subtitle,
.go .skill,
.go .level strong,
.go .project,
.go #detail-background,
.go #detail,
.go #detail-image,
.go #detail-name,
.go #detail-description,
.go #detail-border,
.go #detail-text,
.go #detail-link,
.go #detail-close,
.go #detail-next,
.go #detail-previous,
.go #detail-apps .app,
.go .element,
.go #send{ -webkit-animation-duration: 1000ms; -webkit-animation-fill-mode: both; -webkit-animation-timing-function: ease;}

#loading-top,
#loading-bottom{ -webkit-animation-duration: 3000ms; -webkit-animation-name: loading-one; -webkit-animation-timing-function: cubic-bezier(1, 0, 0, 1);}
#loading-atoms{ -webkit-animation-duration: 1250ms; -webkit-animation-iteration-count: infinite; -webkit-animation-name: spin; -webkit-animation-timing-function: linear;}
.loading-atom{ -webkit-animation-duration: 1250ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;}
#loading-atom-1{ -webkit-animation-name: rotate-top-left;}
#loading-atom-2{ -webkit-animation-name: rotate-top-right;}
#loading-atom-3{ -webkit-animation-name: rotate-bottom-left;}
#loading-atom-4{ -webkit-animation-name: rotate-bottom-right;}
#loading-circle{ -webkit-animation-duration: 2000ms; -webkit-animation-name: circle; -webkit-animation-timing-function: cubic-bezier(0.48, 0, 0, 1);}
#loading-disc{ -webkit-animation-duration: 2000ms; -webkit-animation-name: disc; -webkit-animation-timing-function: cubic-bezier(0.48, 0, 0, 1);}
.go #loading-top,
.go #loading-bottom,
.go #loading-atoms,
.go #loading-atoms .loading-atom,
.go #loading-disc{ -webkit-animation-duration: 1000ms; -webkit-animation-name: loading-two; -webkit-animation-timing-function: cubic-bezier(0.08, 0.86, 0.08, 1);}
.go #loading-atoms,
.go #loading-atoms .loading-atom,
.go #loading-disc{-webkit-animation-iteration-count: 1; -webkit-animation-name: revert-scale;}
.end #loading-top,
.end #loading-bottom{ -webkit-animation-duration: 1000ms; -webkit-animation-name: loading-three; -webkit-animation-timing-function: cubic-bezier(0.08, 0.86, 0.08, 1);}

.go #hey,
.go #there,
.go #view-portfolio,
.go #send-email{ -webkit-animation-timing-function: ease-out;}
.go #hey{ -webkit-animation-name: down;}
.go #there{ -webkit-animation-delay: 500ms; -webkit-animation-name: up;}
.go #view-portfolio{ -webkit-animation-delay: 1000ms; -webkit-animation-name: left;}
.go #send-email{ -webkit-animation-delay: 1500ms; -webkit-animation-name: right;}

.go .arrow-previous{ -webkit-animation-name: right;}
.go .arrow-next{ -webkit-animation-name: left;}
.go .dots a{ -webkit-animation-name: up-fast;}
.go .dots a:nth-child(1){ -webkit-animation-delay: 250ms;}
.go .dots a:nth-child(2){ -webkit-animation-delay: 375ms;}
.go .dots a:nth-child(3){ -webkit-animation-delay: 500ms;}
.go .dots a:nth-child(4){ -webkit-animation-delay: 625ms;}
.go .dots a:nth-child(5){ -webkit-animation-delay: 750ms;}
.go .dots a:nth-child(6){ -webkit-animation-delay: 1000ms;}
.go .dots a:nth-child(7){ -webkit-animation-delay: 1250ms;}
.go .dots a:nth-child(8){ -webkit-animation-delay: 1500ms;}

.go .title{ -webkit-animation-name: left;}
.go .subtitle{ -webkit-animation-delay: 250ms; -webkit-animation-name: right;}

.go .skill{ -webkit-animation-delay: 500ms; -webkit-animation-name: up;}
.go #html5{ -webkit-animation-delay: 500ms;}
.go #html5 .level strong{ -webkit-animation-delay: 750ms; -webkit-animation-name: fill-100;}
.go #wordpress{ -webkit-animation-delay: 750ms;}
.go #wordpress .level strong{ -webkit-animation-delay: 750ms; -webkit-animation-name: fill-90;}
.go #jquery{ -webkit-animation-delay: 1000ms;}
.go #jquery .level strong{ -webkit-animation-delay: 1000ms; -webkit-animation-name: fill-80;}
.go #photoshop{ -webkit-animation-delay: 1250ms;}
.go #photoshop .level strong{ -webkit-animation-delay: 1250ms; -webkit-animation-name: fill-80;}
.go #illustrator{ -webkit-animation-delay: 1500ms;}
.go #illustrator .level strong{ -webkit-animation-delay: 1500ms; -webkit-animation-name: fill-60;}

.go#portfolio .title{ -webkit-animation-name: up;}
.go .project{ -webkit-animation-name: grow;}
.go .project:nth-child(2){ -webkit-animation-delay: 250ms;}
.go .project:nth-child(3){ -webkit-animation-delay: 500ms;}
.go .project:nth-child(4){ -webkit-animation-delay: 750ms;}
.go .project:nth-child(5){ -webkit-animation-delay: 1000ms;}
.go .project:nth-child(6){ -webkit-animation-delay: 1250ms;}
.go .project:nth-child(7){ -webkit-animation-delay: 1500ms;}
.go .project:nth-child(8){ -webkit-animation-delay: 1750ms;}
.go .project:nth-child(9){ -webkit-animation-delay: 2000ms;}
.go .project:nth-child(10){ -webkit-animation-delay: 2250ms;}
.go .project:nth-child(11){ -webkit-animation-delay: 2500ms;}
.go .project:nth-child(12){ -webkit-animation-delay: 2750ms;}

.go #detail-background{ -webkit-animation-duration: 500ms; -webkit-animation-name: overlay;}
.go #detail{ -webkit-animation-duration: 500ms; -webkit-animation-name: grow;}
.loaded #detail-image{ -webkit-animation-name: reveal; -webkit-animation-timing-function: cubic-bezier(0, 1.5, 0.75, 1);}
.go #detail-name{ -webkit-animation-delay: 250ms; -webkit-animation-name: left;}
.go #detail-description{ -webkit-animation-delay: 500ms; -webkit-animation-name: right;}
.go #detail-border{ -webkit-animation-delay: 750ms; -webkit-animation-name: fill-100; -webkit-animation-timing-function: cubic-bezier(0, 1, 0.25, 01);}
.go #detail-text{ -webkit-animation-delay: 1000ms; -webkit-animation-name: up;}
.go #detail-link{ -webkit-animation-delay: 1250ms; -webkit-animation-name: up;}
.go #detail-apps .app{ -webkit-animation-delay: 1500ms; -webkit-animation-name: up; -webkit-animation-timing-function: cubic-bezier(0, 2, 0.5, 1);}
.go #detail-apps .app:nth-child(2){ -webkit-animation-delay: 1625ms;}
.go #detail-apps .app:nth-child(3){ -webkit-animation-delay: 1750ms;}
.go #detail-close,
.go #detail-next,
.go #detail-previous{ -webkit-animation-delay: 1500ms; -webkit-animation-name: close; -webkit-animation-timing-function: cubic-bezier(0, 1.5, 0.25, 1);}
.go #detail-next{ -webkit-animation-delay: 1625ms;}
.go #detail-previous{ -webkit-animation-delay: 1750ms;}

.close #detail-apps .app,
.close #detail-link,
.close #detail-text,
.close #detail-description,
.close #detail-name,
.close #detail{ -webkit-animation-duration: 500ms; -webkit-animation-name: drop; -webkit-animation-timing-function: /*cubic-bezier(0.950, 0.050, 0.795, 0.035)*/ cubic-bezier(1, -0.5, 0.5, 1.5);}
.close #detail-close,
.close #detail-next,
.close #detail-previous{ -webkit-animation-delay: 0ms; -webkit-animation-duration: 500ms; -webkit-animation-name: revert-close; -webkit-animation-timing-function: cubic-bezier(1, -0.5, 0.5, 1.5);}
.close #detail-next{ -webkit-animation-delay: 125ms;}
.close #detail-previous{ -webkit-animation-delay: 250ms;}
.close #detail-apps .app:nth-child(3){ -webkit-animation-delay: 0ms;}
.close #detail-apps .app:nth-child(2){ -webkit-animation-delay: 125ms;}
.close #detail-apps .app:nth-child(1){ -webkit-animation-delay: 250ms;}
.close #detail-link{ -webkit-animation-delay: 375ms;}
.close #detail-text{ -webkit-animation-delay: 500ms;}
.close #detail-border{ -webkit-animation-delay: 0ms; -webkit-animation-name: revert-fill-100;}
.close #detail-description{ -webkit-animation-delay: 750ms;}
.close #detail-name{ -webkit-animation-delay: 875ms;}
.close #detail-image{ -webkit-animation-delay: 0ms; -webkit-animation-name: revert-reveal; -webkit-animation-timing-function: cubic-bezier(1, -0.5, 0.5, 1.5);}
.close #detail{ -webkit-animation-delay: 1000ms;}
.close #detail-background{ -webkit-animation-delay: 1250ms; -webkit-animation-duration: 500ms; -webkit-animation-name: revert-overlay;}

.removing #detail-apps .app,
.removing #detail-link,
.removing #detail-text,
.removing #detail-description,
.removing #detail-name{ -webkit-animation-duration: 500ms; -webkit-animation-name: drop; -webkit-animation-timing-function: cubic-bezier(1, -0.5, 0.5, 1.5);}
.removing #detail-close,
.removing #detail-next,
.removing #detail-previous{ -webkit-animation-delay: 0ms; -webkit-animation-duration: 500ms; -webkit-animation-name: revert-close; -webkit-animation-timing-function: cubic-bezier(1, -0.5, 0.5, 1.5);}
.removing #detail-next{ -webkit-animation-delay: 125ms;}
.removing #detail-previous{ -webkit-animation-delay: 250ms;}
.removing #detail-apps .app:nth-child(3){ -webkit-animation-delay: 0ms;}
.removing #detail-apps .app:nth-child(2){ -webkit-animation-delay: 125ms;}
.removing #detail-apps .app:nth-child(1){ -webkit-animation-delay: 250ms;}
.removing #detail-link{ -webkit-animation-delay: 375ms;}
.removing #detail-text{ -webkit-animation-delay: 500ms;}
.removing #detail-border{ -webkit-animation-delay: 0ms; -webkit-animation-name: revert-fill-100;}
.removing #detail-description{ -webkit-animation-delay: 750ms;}
.removing #detail-name{ -webkit-animation-delay: 875ms;}
.removing #detail-image{ -webkit-animation-delay: 0ms; -webkit-animation-name: revert-reveal; -webkit-animation-timing-function: cubic-bezier(1, -0.5, 0.5, 1.5);}

.go .element,
.go #send{ -webkit-animation-name: grow;}
.go #contact-name .element{ -webkit-animation-delay: 250ms;}
.go #contact-email .element{ -webkit-animation-delay: 500ms;}
.go #contact-subject .element{ -webkit-animation-delay: 750ms;}
.go #contact-message .element{ -webkit-animation-delay: 1000ms;}
.go #send{ -webkit-animation-delay: 1250ms;}

@-moz-keyframes loading-one{
  0%{ width: 0;}
  100%{ width: 50%;}
}

@-moz-keyframes loading-two{
  0%{ width: 50%;}
  100%{ width: 100%;}
}

@-moz-keyframes loading-three{
  0%{ border-width: 2px; height: 50%; width: 100%;}
  100%{ border-width: 0; height: 0; width: 100%;}
}

@-moz-keyframes spin{
  0% { -moz-transform: rotate(0deg);}
  50% { -moz-transform: rotate(-180deg);}
  100% { -moz-transform: rotate(-360deg);}
}

@-moz-keyframes rotate-top-right{
  0% { -moz-transform: rotate(0deg);}
  50% { -moz-transform: rotate(-180deg); -moz-transform-origin: 20% 20%;}
  100% { -moz-transform: rotate(-360deg);}
}

@-moz-keyframes rotate-top-left{
  0% { -moz-transform: rotate(0deg);}
  50% { -moz-transform: rotate(180deg); -moz-transform-origin: 80% 20%;}
  100% { -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-bottom-right{
  0% { -moz-transform: rotate(0deg);}
  50% { -moz-transform: rotate(-180deg); -moz-transform-origin: 80% 80%;}
  100% { -moz-transform: rotate(-360deg);}
}

@-moz-keyframes rotate-bottom-left{
  0% { -moz-transform: rotate(0deg);}
  50% { -moz-transform: rotate(180deg); -moz-transform-origin: 20% 80%;}
  100% { -moz-transform: rotate(360deg);}
}
@-moz-keyframes circle{
  0% { -moz-transform: scale(1.25, 1.25);}
  100% { -moz-transform: scale(0, 0);}
}

@-moz-keyframes disc{
  0% { -moz-transform: scale(0, 0);}
  100% { -moz-transform: scale(1, 1);}
}

@-moz-keyframes revert-scale{
  0% { -moz-transform: scale(1, 1);}
  100% { -moz-transform: scale(0, 0);}
}

@-moz-keyframes fade-in{
  0%{ opacity: 0;}
  100%{ opacity: 1;}
}

@-moz-keyframes fade-out{
  0%{ opacity: 1;}
  100%{ opacity: 0;}
}

@-moz-keyframes overlay{
  0%{ opacity: 0;}
  100%{ opacity: 0.86;}
}

@-moz-keyframes revert-overlay{
  0%{ opacity: 0.86;}
  100%{ opacity: 0;}
}

@-moz-keyframes down{
  0%{ opacity: 0; -moz-transform: translateY(-24px);}
  100%{ opacity: 1; -moz-transform: translateY(0);}
}

@-moz-keyframes up{
  0%{ opacity: 0; -moz-transform: translateY(24px);}
  100%{ opacity: 1; -moz-transform: translateY(0);}
}

@-moz-keyframes revert-up{
  0%{ opacity: 1; -moz-transform: translateY(0);}
  100%{ opacity: 0; -moz-transform: translateY(24px);}
}

@-moz-keyframes revert-up{
  0%{ opacity: 1; -moz-transform: translateY(0);}
  100%{ opacity: 0; -moz-transform: translateY(24px);}
}

@-moz-keyframes up-fast{
  0%{ opacity: 0; -moz-transform: translateY(24px);}
  50%{ opacity: 0.50; -moz-transform: translateY(-12px);}
  100%{ opacity: 1; -moz-transform: translateY(0);}
}

@-moz-keyframes left{
  0%{ opacity: 0; -moz-transform: translateX(24px);}
  100%{ opacity: 1; -moz-transform: translateX(0);}
}

@-moz-keyframes revert-left{
  0%{ opacity: 1; -moz-transform: translateX(0);}
  100%{ opacity: 0; -moz-transform: translateX(24px);}
}

@-moz-keyframes right{
  0%{ opacity: 0; -moz-transform: translateX(-24px);}
  100%{ opacity: 1; -moz-transform: translateX(0);}
}

@-moz-keyframes revert-right{
  0%{ opacity: 1; -moz-transform: translateX(0);}
  100%{ opacity: 0; -moz-transform: translateX(-24px);}
}

@-moz-keyframes grow{
  0%{ opacity: 0; -moz-transform: scale(0.96, 0.96);}
  100%{ opacity: 1; -moz-transform: scale(1, 1);}
}

@-moz-keyframes revert-grow{
  0%{ opacity: 1; -moz-transform: scale(1, 1);}
  100%{ opacity: 0; -moz-transform: scale(0.96, 0.96);}
}

@-moz-keyframes slide-down{
  0%{ opacity: 0; max-height: 0;}
  100%{ opacity: 1; max-height: 60px;}
}

@-moz-keyframes close{
  0%{ -moz-transform: translateY(-96px);}
  100%{ -moz-transform: translateY(0);}
}

@-moz-keyframes revert-close{
  0%{ -moz-transform: translateY(0);}
  100%{ -moz-transform: translateY(-96px);}
}

@-moz-keyframes reveal{
  0%{ opacity: 0; left: 100%;}
  100%{ opacity: 1; left: 50%;}
}

@-moz-keyframes revert-reveal{
  0%{ opacity: 1; left: 50%;}
  100%{ opacity: 0; left: 100%;}
}

@-moz-keyframes fill-100{
  0%{ width: 0%;}
  100%{ width: 100%;}
}

@-moz-keyframes revert-fill-100{
  0%{ width: 100%;}
  100%{ width: 0%;}
}

@-moz-keyframes fill-90{
  0%{ width: 0%;}
  100%{ width: 90%;}
}

@-moz-keyframes fill-80{
  0%{ width: 0%;}
  100%{ width: 80%;}
}

@-moz-keyframes fill-60{
  0%{ width: 0%;}
  100%{ width: 60%;}
}

@-moz-keyframes drop{
  0%{ opacity: 1; -moz-transform: translateY(0);}
  100%{ opacity: 0; -moz-transform: translateY(200px);}
}

@-moz-keyframes revert-drop{
  0%{ opacity: 0; -moz-transform: translateY(200px);}
  100%{ opacity: 1; -moz-transform: translateY(0);}
}

#loading-top,
#loading-bottom,
#loading-atoms,
.loading-atom,
#loading-circle,
#loading-disc,
.go #hey,
.go #there,
.go #view-portfolio,
.go #send-email,
.go .arrow,
.go .dots a,
.go .title,
.go .subtitle,
.go .skill,
.go .level strong,
.go .project,
.go #detail-background,
.go #detail,
.go #detail-image,
.go #detail-name,
.go #detail-description,
.go #detail-border,
.go #detail-text,
.go #detail-link,
.go #detail-close,
.go #detail-next,
.go #detail-previous,
.go #detail-apps .app,
.go .element,
.go #send{ -moz-animation-duration: 1000ms; -moz-animation-fill-mode: both; -moz-animation-timing-function: ease;}

#loading-top,
#loading-bottom{ -moz-animation-duration: 3000ms; -moz-animation-name: loading-one; -moz-animation-timing-function: cubic-bezier(1, 0, 0, 1);}
#loading-atoms{ -moz-animation-duration: 1250ms; -moz-animation-iteration-count: infinite; -moz-animation-name: spin; -moz-animation-timing-function: linear;}
.loading-atom{ -moz-animation-duration: 1250ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear;}
#loading-atom-1{ -moz-animation-name: rotate-top-left;}
#loading-atom-2{ -moz-animation-name: rotate-top-right;}
#loading-atom-3{ -moz-animation-name: rotate-bottom-left;}
#loading-atom-4{ -moz-animation-name: rotate-bottom-right;}
#loading-circle{ -moz-animation-duration: 2000ms; -moz-animation-name: circle; -moz-animation-timing-function: cubic-bezier(0.48, 0, 0, 1);}
#loading-disc{ -moz-animation-duration: 2000ms; -moz-animation-name: disc; -moz-animation-timing-function: cubic-bezier(0.48, 0, 0, 1);}
.go #loading-top,
.go #loading-bottom,
.go #loading-atoms,
.go #loading-atoms .loading-atom,
.go #loading-disc{ -moz-animation-duration: 1000ms; -moz-animation-name: loading-two; -moz-animation-timing-function: cubic-bezier(0.08, 0.86, 0.08, 1);}
.go #loading-atoms,
.go #loading-atoms .loading-atom,
.go #loading-disc{-moz-animation-iteration-count: 1; -moz-animation-name: revert-scale;}
.end #loading-top,
.end #loading-bottom{ -moz-animation-duration: 1000ms; -moz-animation-name: loading-three; -moz-animation-timing-function: cubic-bezier(0.08, 0.86, 0.08, 1);}

.go #hey,
.go #there,
.go #view-portfolio,
.go #send-email{ -moz-animation-timing-function: ease-out;}
.go #hey{ -moz-animation-name: down;}
.go #there{ -moz-animation-delay: 500ms; -moz-animation-name: up;}
.go #view-portfolio{ -moz-animation-delay: 1000ms; -moz-animation-name: left;}
.go #send-email{ -moz-animation-delay: 1500ms; -moz-animation-name: right;}

.go .arrow-previous{ -moz-animation-name: right;}
.go .arrow-next{ -moz-animation-name: left;}
.go .dots a{ -moz-animation-name: up-fast;}
.go .dots a:nth-child(1){ -moz-animation-delay: 250ms;}
.go .dots a:nth-child(2){ -moz-animation-delay: 375ms;}
.go .dots a:nth-child(3){ -moz-animation-delay: 500ms;}
.go .dots a:nth-child(4){ -moz-animation-delay: 625ms;}
.go .dots a:nth-child(5){ -moz-animation-delay: 750ms;}
.go .dots a:nth-child(6){ -moz-animation-delay: 1000ms;}
.go .dots a:nth-child(7){ -moz-animation-delay: 1250ms;}
.go .dots a:nth-child(8){ -moz-animation-delay: 1500ms;}

.go .title{ -moz-animation-name: left;}
.go .subtitle{ -moz-animation-delay: 250ms; -moz-animation-name: right;}

.go .skill{ -moz-animation-delay: 500ms; -moz-animation-name: up;}
.go #html5{ -moz-animation-delay: 500ms;}
.go #html5 .level strong{ -moz-animation-delay: 750ms; -moz-animation-name: fill-100;}
.go #wordpress{ -moz-animation-delay: 750ms;}
.go #wordpress .level strong{ -moz-animation-delay: 750ms; -moz-animation-name: fill-90;}
.go #jquery{ -moz-animation-delay: 1000ms;}
.go #jquery .level strong{ -moz-animation-delay: 1000ms; -moz-animation-name: fill-80;}
.go #photoshop{ -moz-animation-delay: 1250ms;}
.go #photoshop .level strong{ -moz-animation-delay: 1250ms; -moz-animation-name: fill-80;}
.go #illustrator{ -moz-animation-delay: 1500ms;}
.go #illustrator .level strong{ -moz-animation-delay: 1500ms; -moz-animation-name: fill-60;}

.go#portfolio .title{ -moz-animation-name: up;}
.go .project{ -moz-animation-name: grow;}
.go .project:nth-child(2){ -moz-animation-delay: 250ms;}
.go .project:nth-child(3){ -moz-animation-delay: 500ms;}
.go .project:nth-child(4){ -moz-animation-delay: 750ms;}
.go .project:nth-child(5){ -moz-animation-delay: 1000ms;}
.go .project:nth-child(6){ -moz-animation-delay: 1250ms;}
.go .project:nth-child(7){ -moz-animation-delay: 1500ms;}
.go .project:nth-child(8){ -moz-animation-delay: 1750ms;}
.go .project:nth-child(9){ -moz-animation-delay: 2000ms;}
.go .project:nth-child(10){ -moz-animation-delay: 2250ms;}
.go .project:nth-child(11){ -moz-animation-delay: 2500ms;}
.go .project:nth-child(12){ -moz-animation-delay: 2750ms;}

.go #detail-background{ -moz-animation-duration: 500ms; -moz-animation-name: overlay;}
.go #detail{ -moz-animation-duration: 500ms; -moz-animation-name: grow;}
.loaded #detail-image{ -moz-animation-name: reveal; -moz-animation-timing-function: cubic-bezier(0, 1.5, 0.75, 1);}
.go #detail-name{ -moz-animation-delay: 250ms; -moz-animation-name: left;}
.go #detail-description{ -moz-animation-delay: 500ms; -moz-animation-name: right;}
.go #detail-border{ -moz-animation-delay: 750ms; -moz-animation-name: fill-100; -moz-animation-timing-function: cubic-bezier(0, 1, 0.25, 01);}
.go #detail-text{ -moz-animation-delay: 1000ms; -moz-animation-name: up;}
.go #detail-link{ -moz-animation-delay: 1250ms; -moz-animation-name: up;}
.go #detail-apps .app{ -moz-animation-delay: 1500ms; -moz-animation-name: up; -moz-animation-timing-function: cubic-bezier(0, 2, 0.5, 1);}
.go #detail-apps .app:nth-child(2){ -moz-animation-delay: 1625ms;}
.go #detail-apps .app:nth-child(3){ -moz-animation-delay: 1750ms;}
.go #detail-close,
.go #detail-next,
.go #detail-previous{ -moz-animation-delay: 1500ms; -moz-animation-name: close; -moz-animation-timing-function: cubic-bezier(0, 1.5, 0.25, 1);}
.go #detail-next{ -moz-animation-delay: 1625ms;}
.go #detail-previous{ -moz-animation-delay: 1750ms;}

.close #detail-apps .app,
.close #detail-link,
.close #detail-text,
.close #detail-description,
.close #detail-name,
.close #detail{ -moz-animation-duration: 500ms; -moz-animation-name: drop; -moz-animation-timing-function: /*cubic-bezier(0.950, 0.050, 0.795, 0.035)*/ cubic-bezier(1, -0.5, 0.5, 1.5);}
.close #detail-close,
.close #detail-next,
.close #detail-previous{ -moz-animation-delay: 0ms; -moz-animation-duration: 500ms; -moz-animation-name: revert-close; -moz-animation-timing-function: cubic-bezier(1, -0.5, 0.5, 1.5);}
.close #detail-next{ -moz-animation-delay: 125ms;}
.close #detail-previous{ -moz-animation-delay: 250ms;}
.close #detail-apps .app:nth-child(3){ -moz-animation-delay: 0ms;}
.close #detail-apps .app:nth-child(2){ -moz-animation-delay: 125ms;}
.close #detail-apps .app:nth-child(1){ -moz-animation-delay: 250ms;}
.close #detail-link{ -moz-animation-delay: 375ms;}
.close #detail-text{ -moz-animation-delay: 500ms;}
.close #detail-border{ -moz-animation-delay: 0ms; -moz-animation-name: revert-fill-100;}
.close #detail-description{ -moz-animation-delay: 750ms;}
.close #detail-name{ -moz-animation-delay: 875ms;}
.close #detail-image{ -moz-animation-delay: 0ms; -moz-animation-name: revert-reveal; -moz-animation-timing-function: cubic-bezier(1, -0.5, 0.5, 1.5);}
.close #detail{ -moz-animation-delay: 1000ms;}
.close #detail-background{ -moz-animation-delay: 1250ms; -moz-animation-duration: 500ms; -moz-animation-name: revert-overlay;}

.removing #detail-apps .app,
.removing #detail-link,
.removing #detail-text,
.removing #detail-description,
.removing #detail-name{ -moz-animation-duration: 500ms; -moz-animation-name: drop; -moz-animation-timing-function: cubic-bezier(1, -0.5, 0.5, 1.5);}
.removing #detail-close,
.removing #detail-next,
.removing #detail-previous{ -moz-animation-delay: 0ms; -moz-animation-duration: 500ms; -moz-animation-name: revert-close; -moz-animation-timing-function: cubic-bezier(1, -0.5, 0.5, 1.5);}
.removing #detail-next{ -moz-animation-delay: 125ms;}
.removing #detail-previous{ -moz-animation-delay: 250ms;}
.removing #detail-apps .app:nth-child(3){ -moz-animation-delay: 0ms;}
.removing #detail-apps .app:nth-child(2){ -moz-animation-delay: 125ms;}
.removing #detail-apps .app:nth-child(1){ -moz-animation-delay: 250ms;}
.removing #detail-link{ -moz-animation-delay: 375ms;}
.removing #detail-text{ -moz-animation-delay: 500ms;}
.removing #detail-border{ -moz-animation-delay: 0ms; -moz-animation-name: revert-fill-100;}
.removing #detail-description{ -moz-animation-delay: 750ms;}
.removing #detail-name{ -moz-animation-delay: 875ms;}
.removing #detail-image{ -moz-animation-delay: 0ms; -moz-animation-name: revert-reveal; -moz-animation-timing-function: cubic-bezier(1, -0.5, 0.5, 1.5);}

.go .element,
.go #send{ -moz-animation-name: grow;}
.go #contact-name .element{ -moz-animation-delay: 250ms;}
.go #contact-email .element{ -moz-animation-delay: 500ms;}
.go #contact-subject .element{ -moz-animation-delay: 750ms;}
.go #contact-message .element{ -moz-animation-delay: 1000ms;}
.go #send{ -moz-animation-delay: 1250ms;}

@keyframes loading-one{
  0%{ width: 0;}
  100%{ width: 50%;}
}

@keyframes loading-two{
  0%{ width: 50%;}
  100%{ width: 100%;}
}

@keyframes loading-three{
  0%{ border-width: 2px; height: 50%; width: 100%;}
  100%{ border-width: 0; height: 0; width: 100%;}
}

@keyframes spin{
  0% { transform: rotate(0deg);}
  50% { transform: rotate(-180deg);}
  100% { transform: rotate(-360deg);}
}

@keyframes rotate-top-right{
  0% { transform: rotate(0deg);}
  50% { transform: rotate(-180deg); transform-origin: 20% 20%;}
  100% { transform: rotate(-360deg);}
}

@keyframes rotate-top-left{
  0% { transform: rotate(0deg);}
  50% { transform: rotate(180deg); transform-origin: 80% 20%;}
  100% { transform: rotate(360deg);}
}

@keyframes rotate-bottom-right{
  0% { transform: rotate(0deg);}
  50% { transform: rotate(-180deg); transform-origin: 80% 80%;}
  100% { transform: rotate(-360deg);}
}

@keyframes rotate-bottom-left{
  0% { transform: rotate(0deg);}
  50% { transform: rotate(180deg); transform-origin: 20% 80%;}
  100% { transform: rotate(360deg);}
}
@keyframes circle{
  0% { transform: scale(1.25, 1.25);}
  100% { transform: scale(0, 0);}
}

@keyframes disc{
  0% { transform: scale(0, 0);}
  100% { transform: scale(1, 1);}
}

@keyframes revert-scale{
  0% { transform: scale(1, 1);}
  100% { transform: scale(0, 0);}
}

@keyframes fade-in{
  0%{ opacity: 0;}
  100%{ opacity: 1;}
}

@keyframes fade-out{
  0%{ opacity: 1;}
  100%{ opacity: 0;}
}

@keyframes overlay{
  0%{ opacity: 0;}
  100%{ opacity: 0.86;}
}

@keyframes revert-overlay{
  0%{ opacity: 0.86;}
  100%{ opacity: 0;}
}

@keyframes down{
  0%{ opacity: 0; transform: translateY(-24px);}
  100%{ opacity: 1; transform: translateY(0);}
}

@keyframes up{
  0%{ opacity: 0; transform: translateY(24px);}
  100%{ opacity: 1; transform: translateY(0);}
}

@keyframes revert-up{
  0%{ opacity: 1; transform: translateY(0);}
  100%{ opacity: 0; transform: translateY(24px);}
}

@keyframes revert-up{
  0%{ opacity: 1; transform: translateY(0);}
  100%{ opacity: 0; transform: translateY(24px);}
}

@keyframes up-fast{
  0%{ opacity: 0; transform: translateY(24px);}
  50%{ opacity: 0.50; transform: translateY(-12px);}
  100%{ opacity: 1; transform: translateY(0);}
}

@keyframes left{
  0%{ opacity: 0; transform: translateX(24px);}
  100%{ opacity: 1; transform: translateX(0);}
}

@keyframes revert-left{
  0%{ opacity: 1; transform: translateX(0);}
  100%{ opacity: 0; transform: translateX(24px);}
}

@keyframes right{
  0%{ opacity: 0; transform: translateX(-24px);}
  100%{ opacity: 1; transform: translateX(0);}
}

@keyframes revert-right{
  0%{ opacity: 1; transform: translateX(0);}
  100%{ opacity: 0; transform: translateX(-24px);}
}

@keyframes grow{
  0%{ opacity: 0; transform: scale(0.96, 0.96);}
  100%{ opacity: 1; transform: scale(1, 1);}
}

@keyframes revert-grow{
  0%{ opacity: 1; transform: scale(1, 1);}
  100%{ opacity: 0; transform: scale(0.96, 0.96);}
}

@keyframes slide-down{
  0%{ opacity: 0; max-height: 0;}
  100%{ opacity: 1; max-height: 60px;}
}

@keyframes close{
  0%{ transform: translateY(-96px);}
  100%{ transform: translateY(0);}
}

@keyframes revert-close{
  0%{ transform: translateY(0);}
  100%{ transform: translateY(-96px);}
}

@keyframes reveal{
  0%{ opacity: 0; left: 100%;}
  100%{ opacity: 1; left: 50%;}
}

@keyframes revert-reveal{
  0%{ opacity: 1; left: 50%;}
  100%{ opacity: 0; left: 100%;}
}

@keyframes fill-100{
  0%{ width: 0%;}
  100%{ width: 100%;}
}

@keyframes revert-fill-100{
  0%{ width: 100%;}
  100%{ width: 0%;}
}

@keyframes fill-90{
  0%{ width: 0%;}
  100%{ width: 90%;}
}

@keyframes fill-80{
  0%{ width: 0%;}
  100%{ width: 80%;}
}

@keyframes fill-60{
  0%{ width: 0%;}
  100%{ width: 60%;}
}

@keyframes drop{
  0%{ opacity: 1; transform: translateY(0);}
  100%{ opacity: 0; transform: translateY(200px);}
}

@keyframes revert-drop{
  0%{ opacity: 0; transform: translateY(200px);}
  100%{ opacity: 1; transform: translateY(0);}
}

#loading-top,
#loading-bottom,
#loading-atoms,
.loading-atom,
#loading-circle,
#loading-disc,
.go #hey,
.go #there,
.go #view-portfolio,
.go #send-email,
.go .arrow,
.go .dots a,
.go .title,
.go .subtitle,
.go .skill,
.go .level strong,
.go .project,
.go #detail-background,
.go #detail,
.go #detail-image,
.go #detail-name,
.go #detail-description,
.go #detail-border,
.go #detail-text,
.go #detail-link,
.go #detail-close,
.go #detail-next,
.go #detail-previous,
.go #detail-apps .app,
.go .element,
.go #send{ animation-duration: 1000ms; animation-fill-mode: both; animation-timing-function: ease;}

#loading-top,
#loading-bottom{ animation-duration: 3000ms; animation-name: loading-one; animation-timing-function: cubic-bezier(1, 0, 0, 1);}
#loading-atoms{ animation-duration: 1250ms; animation-iteration-count: infinite; animation-name: spin; animation-timing-function: linear;}
.loading-atom{ animation-duration: 1250ms; animation-iteration-count: infinite; animation-timing-function: linear;}
#loading-atom-1{ animation-name: rotate-top-left;}
#loading-atom-2{ animation-name: rotate-top-right;}
#loading-atom-3{ animation-name: rotate-bottom-left;}
#loading-atom-4{ animation-name: rotate-bottom-right;}
#loading-circle{ animation-duration: 2000ms; animation-name: circle; animation-timing-function: cubic-bezier(0.48, 0, 0, 1);}
#loading-disc{ animation-duration: 2000ms; animation-name: disc; animation-timing-function: cubic-bezier(0.48, 0, 0, 1);}
.go #loading-top,
.go #loading-bottom,
.go #loading-atoms,
.go #loading-atoms .loading-atom,
.go #loading-disc{ animation-duration: 1000ms; animation-name: loading-two; animation-timing-function: cubic-bezier(0.08, 0.86, 0.08, 1);}
.go #loading-atoms,
.go #loading-atoms .loading-atom,
.go #loading-disc{animation-iteration-count: 1; animation-name: revert-scale;}
.end #loading-top,
.end #loading-bottom{ animation-duration: 1000ms; animation-name: loading-three; animation-timing-function: cubic-bezier(0.08, 0.86, 0.08, 1);}

.go #hey,
.go #there,
.go #view-portfolio,
.go #send-email{ animation-timing-function: ease-out;}
.go #hey{ animation-name: down;}
.go #there{ animation-delay: 500ms; animation-name: up;}
.go #view-portfolio{ animation-delay: 1000ms; animation-name: left;}
.go #send-email{ animation-delay: 1500ms; animation-name: right;}

.go .arrow-previous{ animation-name: right;}
.go .arrow-next{ animation-name: left;}
.go .dots a{ animation-name: up-fast;}
.go .dots a:nth-child(1){ animation-delay: 250ms;}
.go .dots a:nth-child(2){ animation-delay: 375ms;}
.go .dots a:nth-child(3){ animation-delay: 500ms;}
.go .dots a:nth-child(4){ animation-delay: 625ms;}
.go .dots a:nth-child(5){ animation-delay: 750ms;}
.go .dots a:nth-child(6){ animation-delay: 1000ms;}
.go .dots a:nth-child(7){ animation-delay: 1250ms;}
.go .dots a:nth-child(8){ animation-delay: 1500ms;}

.go .title{ animation-name: left;}
.go .subtitle{ animation-delay: 250ms; animation-name: right;}

.go .skill{ animation-delay: 500ms; animation-name: up;}
.go #html5{ animation-delay: 500ms;}
.go #html5 .level strong{ animation-delay: 750ms; animation-name: fill-100;}
.go #wordpress{ animation-delay: 750ms;}
.go #wordpress .level strong{ animation-delay: 750ms; animation-name: fill-90;}
.go #jquery{ animation-delay: 1000ms;}
.go #jquery .level strong{ animation-delay: 1000ms; animation-name: fill-80;}
.go #photoshop{ animation-delay: 1250ms;}
.go #photoshop .level strong{ animation-delay: 1250ms; animation-name: fill-80;}
.go #illustrator{ animation-delay: 1500ms;}
.go #illustrator .level strong{ animation-delay: 1500ms; animation-name: fill-60;}

.go#portfolio .title{ animation-name: up;}
.go .project{ animation-name: grow;}
.go .project:nth-child(2){ animation-delay: 250ms;}
.go .project:nth-child(3){ animation-delay: 500ms;}
.go .project:nth-child(4){ animation-delay: 750ms;}
.go .project:nth-child(5){ animation-delay: 1000ms;}
.go .project:nth-child(6){ animation-delay: 1250ms;}
.go .project:nth-child(7){ animation-delay: 1500ms;}
.go .project:nth-child(8){ animation-delay: 1750ms;}
.go .project:nth-child(9){ animation-delay: 2000ms;}
.go .project:nth-child(10){ animation-delay: 2250ms;}
.go .project:nth-child(11){ animation-delay: 2500ms;}
.go .project:nth-child(12){ animation-delay: 2750ms;}

.go #detail-background{ animation-duration: 500ms; animation-name: overlay;}
.go #detail{ animation-duration: 500ms; animation-name: grow;}
.loaded #detail-image{ animation-name: reveal; animation-timing-function: cubic-bezier(0, 1.5, 0.75, 1);}
.go #detail-name{ animation-delay: 250ms; animation-name: left;}
.go #detail-description{ animation-delay: 500ms; animation-name: right;}
.go #detail-border{ animation-delay: 750ms; animation-name: fill-100; animation-timing-function: cubic-bezier(0, 1, 0.25, 01);}
.go #detail-text{ animation-delay: 1000ms; animation-name: up;}
.go #detail-link{ animation-delay: 1250ms; animation-name: up;}
.go #detail-apps .app{ animation-delay: 1500ms; animation-name: up; animation-timing-function: cubic-bezier(0, 2, 0.5, 1);}
.go #detail-apps .app:nth-child(2){ animation-delay: 1625ms;}
.go #detail-apps .app:nth-child(3){ animation-delay: 1750ms;}
.go #detail-close,
.go #detail-next,
.go #detail-previous{ animation-delay: 1500ms; animation-name: close; animation-timing-function: cubic-bezier(0, 1.5, 0.25, 1);}
.go #detail-next{ animation-delay: 1625ms;}
.go #detail-previous{ animation-delay: 1750ms;}

.close #detail-apps .app,
.close #detail-link,
.close #detail-text,
.close #detail-description,
.close #detail-name,
.close #detail{ animation-duration: 500ms; animation-name: drop; animation-timing-function: /*cubic-bezier(0.950, 0.050, 0.795, 0.035)*/ cubic-bezier(1, -0.5, 0.5, 1.5);}
.close #detail-close,
.close #detail-next,
.close #detail-previous{ animation-delay: 0ms; animation-duration: 500ms; animation-name: revert-close; animation-timing-function: cubic-bezier(1, -0.5, 0.5, 1.5);}
.close #detail-next{ animation-delay: 125ms;}
.close #detail-previous{ animation-delay: 250ms;}
.close #detail-apps .app:nth-child(3){ animation-delay: 0ms;}
.close #detail-apps .app:nth-child(2){ animation-delay: 125ms;}
.close #detail-apps .app:nth-child(1){ animation-delay: 250ms;}
.close #detail-link{ animation-delay: 375ms;}
.close #detail-text{ animation-delay: 500ms;}
.close #detail-border{ animation-delay: 0ms; animation-name: revert-fill-100;}
.close #detail-description{ animation-delay: 750ms;}
.close #detail-name{ animation-delay: 875ms;}
.close #detail-image{ animation-delay: 0ms; animation-name: revert-reveal; animation-timing-function: cubic-bezier(1, -0.5, 0.5, 1.5);}
.close #detail{ animation-delay: 1000ms;}
.close #detail-background{ animation-delay: 1250ms; animation-duration: 500ms; animation-name: revert-overlay;}

.removing #detail-apps .app,
.removing #detail-link,
.removing #detail-text,
.removing #detail-description,
.removing #detail-name{ animation-duration: 500ms; animation-name: drop; animation-timing-function: cubic-bezier(1, -0.5, 0.5, 1.5);}
.removing #detail-close,
.removing #detail-next,
.removing #detail-previous{ animation-delay: 0ms; animation-duration: 500ms; animation-name: revert-close; animation-timing-function: cubic-bezier(1, -0.5, 0.5, 1.5);}
.removing #detail-next{ animation-delay: 125ms;}
.removing #detail-previous{ animation-delay: 250ms;}
.removing #detail-apps .app:nth-child(3){ animation-delay: 0ms;}
.removing #detail-apps .app:nth-child(2){ animation-delay: 125ms;}
.removing #detail-apps .app:nth-child(1){ animation-delay: 250ms;}
.removing #detail-link{ animation-delay: 375ms;}
.removing #detail-text{ animation-delay: 500ms;}
.removing #detail-border{ animation-delay: 0ms; animation-name: revert-fill-100;}
.removing #detail-description{ animation-delay: 750ms;}
.removing #detail-name{ animation-delay: 875ms;}
.removing #detail-image{ animation-delay: 0ms; animation-name: revert-reveal; animation-timing-function: cubic-bezier(1, -0.5, 0.5, 1.5);}

.go .element,
.go #send{ animation-name: grow;}
.go #contact-name .element{ animation-delay: 250ms;}
.go #contact-email .element{ animation-delay: 500ms;}
.go #contact-subject .element{ animation-delay: 750ms;}
.go #contact-message .element{ animation-delay: 1000ms;}
.go #send{ animation-delay: 1250ms;}

/* Responsiveness */

@media only screen and (max-width: 1000px) {
  .wrap,
  #you{ margin: 0 20px; width: auto;}
  .testimonial blockquote,
  .testimonial p{ margin: 0 160px; width: auto;}
  #you{ height: auto; padding: 120px 0; position: static;}
  #there br{ display: none;}
  .heading{ padding: 0 20px;}
  .skill .level{ float: none; margin: 0 0 20px; width: auto;}
}

@media only screen and (max-width: 950px) {
  #description{ display: none;}
}

@media only screen and (max-width: 850px) {
  #calendar{ height: 1px;}
  #contact form{ margin: 0 20px; width: auto;}
  input.element,
  #contact-subject .element,
  textarea.element{ width: 86%;}
  textarea.element{ max-width: 86%; padding: 10px;}
  #contact-name,
  #contact-email{ float: none; width: auto;}
  #contact-email,
  #contact-subject,
  #contact-message{ padding-top: 20px;}
}

@media only screen and (max-width: 800px) {
  .testimonial blockquote,
  .testimonial p{ margin: 0 20px;}
  .arrow-previous,
  .arrow-next{ display: none;}
}

@media only screen and (max-width: 700px) {
  #header{ height: auto; position: static;}
  #logo{ float: none;}
  #menu{ display: block;}
  #nav{ display: none; float: none; margin: 0; padding-top: 14px;}
  .nav{ display: block; float: none;}
}

textarea.input,
input.input {
  border-radius: 0;
  padding: 0.5em 0.5em 0.75em;
  box-sizing: content-box;
}

textarea.input {
  padding: 0.75em 0.5em;
}