/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/* What follows is the result of much research on cross-browser styling. Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, Kroc Camen, and the H5BP dev community and team. */
/* ========================================================================== Base styles: opinionated defaults ========================================================================== */
html, button, input, select, textarea { color: #222; }

html { font-size: 1em; line-height: 1.4; }

/* Remove text-shadow in selection highlight: h5bp.com/i These selection rule sets have to be separate. Customize the background color to match your design. */
::-moz-selection { background: #b3d4fc; text-shadow: none; }

::selection { background: #b3d4fc; text-shadow: none; }

/* A better looking default horizontal rule */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

/* Remove the gap between images, videos, audio and canvas and the bottom of their containers: h5bp.com/i/440 */
audio, canvas, img, video { vertical-align: middle; }

/* Remove default fieldset styles. */
fieldset { border: 0; margin: 0; padding: 0; }

/* Allow only vertical resizing of textareas. */
textarea { resize: vertical; }

/* ========================================================================== Browse Happy prompt ========================================================================== */
.browsehappy { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 50%; height: 50%; text-align: center; color: #fff; }

/* ========================================================================== Author's custom styles ========================================================================== */
@font-face { font-family: 'HelveticaNeueLight'; src: url("./fonts/helveticaneue-light-webfont.eot"); src: url("./fonts/helveticaneue-light-webfont.eot?#iefix") format("embedded-opentype"), url("./fonts/helveticaneue-light-webfont.woff") format("woff"), url("./fonts/helveticaneue-light-webfont.ttf") format("truetype"), url("./fonts/helveticaneue-light-webfont.svg#HelveticaNeueLight") format("svg"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'HelveticaNeueMedium'; src: url("./fonts/helveticaneue-medium-webfont.eot"); src: url("./fonts/helveticaneue-medium-webfont.eot?#iefix") format("embedded-opentype"), url("./fonts/helveticaneue-medium-webfont.woff") format("woff"), url("./fonts/helveticaneue-medium-webfont.ttf") format("truetype"), url("./fonts/helveticaneue-medium-webfont.svg#HelveticaNeueMedium") format("svg"); font-weight: normal; font-style: normal; }

@font-face { font-family: 'HelveticaNeue'; src: url("./fonts/helveticaneue-webfont.eot"); src: url("./fonts/helveticaneue-webfont.eot?#iefix") format("embedded-opentype"), url("./fonts/helveticaneue-webfont.woff") format("woff"), url("./fonts/helveticaneue-webfont.ttf") format("truetype"), url("./fonts/helveticaneue-webfont.svg#HelveticaNeue") format("svg"); font-weight: normal; font-style: normal; }

html, body { width: 100%; min-width: 1024px; min-height: 650px; }

html.modal, body.modal { overflow: hidden; }

body { font: 14px/16px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", 'Microsoft YaHei', sans-serif; font-weight: 300; color: #eee999; background-color: deepskyblue; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }
body.modal { background-color: deepskyblue; color: deepskyblue; }

::selection { background: #fff; }

::-webkit-selection { background: #fff; }

::-moz-selection { background: #fff; }

::-o-selection { background: #fff; }

::-ms-selection { background: #fff; }

@-webkit-keyframes shining-words { 0% { color: white; }
  50% { color: #eee999; }
  100% { color: white; } }

@-moz-keyframes shining-words { 0% { color: white; }
  50% { color: #eee999; }
  100% { color: white; } }

@keyframes shining-words { 0% { color: white; }
  50% { color: #eee999; }
  100% { color: white; } }

.ref-wrapper { position: absolute; top: 0; left: 0; width: 100%; }

.content-wrapper { position: relative; margin: 0 auto; width: 1024px; }

.modal #header { background: transparent !important; }
.modal #header #ynottony-logo .normal { opacity: 0; }
.modal #header #ynottony-logo .invert { opacity: 1; }

#header { position: fixed; top: 0; left: 0; width: 100%; z-index: 90000; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00bfff+0,00bfff+100&1+0,0+100 */ background: -moz-linear-gradient(top, deepskyblue 0%, rgba(0, 191, 255, 0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, deepskyblue 0%, rgba(0, 191, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #00bfff 0%, rgba(0, 191, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00bfff', endColorstr='#0000bfff',GradientType=0 ); /* IE6-9 */ }
#header #ynottony-logo { position: relative; float: right; width: 388px; height: 84px; }
#header #ynottony-logo .normal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/common/ynottony-logo3.png) no-repeat 0 0; background-size: 100%; z-index: 10; opacity: 1; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }
#header #ynottony-logo .invert { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/common/ynottony-logo3-i.png) no-repeat 0 0; background-size: 100%; opacity: 0; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }

.modal #main-content li:before, .modal #main-content .bullet:before, .modal #main-content .btn-more { -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; color: deepskyblue !important; }
.modal #main-content .p-btn-more { -webkit-animation-play-state: initial !important; animation-play-state: initial !important; color: deepskyblue !important; }

#main-content { position: relative; width: 100%; z-index: 1000; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; -o-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }
#main-content .content-wrapper { margin-top: 123px; text-align: center; }
#main-content .famous-quote { display: inline-block; margin-bottom: 50px; overflow: hidden; }
#main-content .famous-quote.open .bullet:before { content: "-"; }
#main-content .famous-quote.open .subcopy { margin-top: 0 !important; }
#main-content .famous-quote .bullet:before { content: "+"; position: relative; display: inline-block; top: -2px; width: 22px; color: #eee999; font-size: 21px; line-height: 1em; }
#main-content .famous-quote .quote { font-family: 'HelveticaNeueLight'; font-size: 63px; line-height: 1.11111em; text-align: left; }
#main-content .famous-quote .quote .desktop { display: block; }
#main-content .famous-quote .quote .mobile { display: none; }
#main-content .famous-quote .btn-more { position: absolute; font-size: 24px; color: #eee999; line-height: 1.04em; cursor: pointer; margin: 5px 0 0 20px; }
#main-content .famous-quote .author { font-size: 24px; font-style: italic; line-height: 1.04em; text-align: right; margin-right: 90px; margin-bottom: 15px; }
#main-content .famous-quote .subcopy-wrapper { width: 87%; font-size: 15px; line-height: 1.2em; margin: 0% 0 0 43px; overflow: hidden; text-align: justify; }
#main-content .famous-quote .subcopy-wrapper .subcopy { margin-top: -30%; }
#main-content .sections { text-align: left; padding: 0 38px; }
#main-content .sections .section { min-height: 72px; overflow: hidden; cursor: pointer; }
#main-content .sections .section.open .bullet:before { content: "-"; -webkit-transform-origin: 5px 15px; -moz-transform-origin: 5px 15px; -ms-transform-origin: 5px 15px; -o-transform-origin: 5px 15px; transform-origin: 5px 15px; }
#main-content .sections .section.open .services { margin-top: 35px !important; }
#main-content .sections .section.open .persona { margin-top: 35px !important; }
#main-content .sections .section.open .projects { margin-top: 35px !important; }
#main-content .sections .section.open .pr-articles { margin-top: 35px !important; }
#main-content .sections .section .title { font-size: 31px; line-height: 24px; font-family: HelveticaNeueMedium; }
#main-content .sections .section .title:hover .bullet:before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
#main-content .sections .section .bullet:before { content: "+"; position: relative; display: inline-block; top: -4px; width: 24px; color: #eee999; font-size: 26px; line-height: 1em; -webkit-transform-origin: 7px 15px; -moz-transform-origin: 7px 15px; -ms-transform-origin: 7px 15px; -o-transform-origin: 7px 15px; transform-origin: 7px 15px; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; -o-transition: -o-transform 0.4s ease-out; transition: transform 0.4s ease-out; }
#main-content .sections .section .services { margin: -100% 0 0 45px; }
#main-content .sections .section .services .service { min-height: 25px; margin-bottom: 35px; overflow: hidden; }
#main-content .sections .section .services .service.open:hover .service.bullet:before { -webkit-transform-origin: 4px 13px; -moz-transform-origin: 4px 13px; -ms-transform-origin: 4px 13px; -o-transform-origin: 4px 13px; transform-origin: 4px 13px; }
#main-content .sections .section .services .service.open .service.bullet:before { content: "-" !important; }
#main-content .sections .section .services .service.open .works { margin-top: 35px !important; }
#main-content .sections .section .services .service.open .s-description { margin-top: 5px !important; }
#main-content .sections .section .services .service .s-title { font-size: 24px; line-height: 25px; }
#main-content .sections .section .services .service .s-title .service.bullet:before { content: "+"; top: -3px; width: 20px; font-size: 22px; -webkit-transform-origin: 6px 13px; -moz-transform-origin: 6px 13px; -ms-transform-origin: 6px 13px; -o-transform-origin: 6px 13px; transform-origin: 6px 13px; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; -o-transition: -o-transform 0.4s ease-out; transition: transform 0.4s ease-out; }
#main-content .sections .section .services .service .s-title .s-big-title { display: inline-block; }
#main-content .sections .section .services .service .s-title:hover .service.bullet:before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
#main-content .sections .section .services .service .s-description { font-size: 16px; line-height: 1.2em; margin: -100% 0 0 30px; cursor: auto; }
#main-content .sections .section .works { margin: -100% 0 0 45px; }
#main-content .sections .section .works .work { margin-bottom: 55px; min-height: 27px; overflow: hidden; }
#main-content .sections .section .works .work.open:hover .work.bullet:before { -webkit-transform-origin: 4px 13px; -moz-transform-origin: 4px 13px; -ms-transform-origin: 4px 13px; -o-transform-origin: 4px 13px; transform-origin: 4px 13px; }
#main-content .sections .section .works .work.open .work.bullet:before { content: "-" !important; }
#main-content .sections .section .works .work.open .w-client, #main-content .sections .section .works .work.open .w-description { margin-top: 0 !important; }
#main-content .sections .section .works .work .w-title { font-size: 20px; margin-bottom: 5px; font-weight: bold; }
#main-content .sections .section .works .work .w-title .work.bullet:before { content: "+"; top: -3px; width: 20px; font-size: 22px; font-weight: normal; -webkit-transform-origin: 6px 13px; -moz-transform-origin: 6px 13px; -ms-transform-origin: 6px 13px; -o-transform-origin: 6px 13px; transform-origin: 6px 13px; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; -o-transition: -o-transform 0.4s ease-out; transition: transform 0.4s ease-out; }
#main-content .sections .section .works .work .w-title .w-big-title { display: inline-block; }
#main-content .sections .section .works .work .w-title:hover .work.bullet:before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
#main-content .sections .section .works .work .w-client { font-style: italic; font-size: 18px; line-height: 1em; margin: -200% 0 3px 30px; cursor: auto; }
#main-content .sections .section .works .work .w-description { font-size: 16px; line-height: 1.2em; margin: -100% 0 0 30px; cursor: auto; }
#main-content .sections .section .projects { margin: -1000% 0 0 45px; }
#main-content .sections .section .projects .project { margin-bottom: 55px; min-height: 27px; overflow: hidden; }
#main-content .sections .section .projects .project.open .project.bullet:before { content: "-" !important; }
#main-content .sections .section .projects .project.open .p-description { margin-top: 0 !important; }
#main-content .sections .section .projects .project .p-title { font-size: 20px; margin-bottom: 5px; font-weight: bold; cursor: auto; }
#main-content .sections .section .projects .project .p-title .project.bullet:before { content: "+"; top: -3px; width: 20px; color: #eee999; font-size: 22px; font-weight: normal; }
#main-content .sections .section .projects .project .p-client { margin-left: 30px; font-style: italic; font-size: 18px; line-height: 1em; margin-bottom: 3px; }
#main-content .sections .section .projects .project .p-description { font-size: 16px; line-height: 1.2em; margin: -100% 0 5px 30px; margin-top: 0; cursor: auto; }
#main-content .sections .section .projects .project .p-description .showcase { width: 100%; }
#main-content .sections .section .projects .project .p-description .showcase .image { width: 100%; }
#main-content .sections .section .projects .project .p-description .showcase .video { position: relative; }
#main-content .sections .section .projects .project .p-description .showcase .video:before { display: block; content: ""; width: 100%; padding-top: 56.24284%; }
#main-content .sections .section .projects .project .p-description .showcase .video > .wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
#main-content .sections .section .projects .project .p-btn-more { margin-left: 30px; font-size: 16px; color: #eee999; }
#main-content .sections .section .projects .project .p-btn-more .bullet:before { content: "+"; position: relative; display: inline-block; top: -1px; width: 17px; color: #eee999; font-size: 17px; font-weight: bold; line-height: 1em; -webkit-transform-origin: 5px 11px; -moz-transform-origin: 5px 11px; -ms-transform-origin: 5px 11px; -o-transform-origin: 5px 11px; transform-origin: 5px 11px; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; -o-transition: -o-transform 0.4s ease-out; transition: transform 0.4s ease-out; }
#main-content .sections .section .projects .project .p-btn-more:hover .bullet:before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }
#main-content .sections .section .persona { margin: -150% 0 0 35px; }
#main-content .sections .section .persona .person { margin-bottom: 35px; cursor: auto; }
#main-content .sections .section .persona .person .p-name { font-size: 26px; font-weight: bold; line-height: 26px; }
#main-content .sections .section .persona .person .p-title { font-size: 18px; line-height: 1em; margin-bottom: 15px; }
#main-content .sections .section .persona .person .p-quote { font-style: italic; font-size: 16px; line-height: 1.2em; margin-bottom: 20px; }
#main-content .sections .section .persona .person .p-resume { padding: 0 0 0 25px; list-style: none; }
#main-content .sections .section .persona .person .p-resume li { font-size: 16px; line-height: 1.2em; margin-bottom: 10px; }
#main-content .sections .section .persona .person .p-resume li:before { content: '-'; margin: 0 12px 0 0; font-size: 22px; color: #eee999; -webkit-transform-origin: 6px 13px; -moz-transform-origin: 6px 13px; -ms-transform-origin: 6px 13px; -o-transform-origin: 6px 13px; transform-origin: 6px 13px; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; -o-transition: -o-transform 0.4s ease-out; transition: transform 0.4s ease-out; }
#main-content .sections .section .persona .person .p-resume li .year { display: inline-block; width: 100px; font-style: italic; font-weight: bold; }
#main-content .sections .section .persona .person .p-resume li .details { margin-left: 20px; }
#main-content .sections .section .persona .contact { margin-bottom: 35px; cursor: auto; }
#main-content .sections .section .persona .contact .c-title { font-size: 26px; font-weight: bold; line-height: 26px; }
#main-content .sections .section .persona .contact .c-emails { padding: 0 0 0 25px; list-style: none; }
#main-content .sections .section .persona .contact .c-emails li.c-email { font-size: 16px; line-height: 1.2em; margin-bottom: 10px; }
#main-content .sections .section .persona .contact .c-emails li.c-email:before { content: '-'; margin: 0 12px 0 0; font-size: 22px; color: #eee999; }
#main-content .sections .section .persona .contact .c-emails li.c-email a { display: inline-block; color: #fff; }
#main-content .sections .section .pr-articles { margin: -100% 0 0 45px; }
#main-content .sections .section .pr-articles .pr-article { margin-bottom: 55px; min-height: 27px; overflow: hidden; }
#main-content .sections .section .pr-articles .pr-article.open .pr-article.bullet:before { content: "-" !important; }
#main-content .sections .section .pr-articles .pr-article.open .pr-description { margin-top: 0 !important; }
#main-content .sections .section .pr-articles .pr-article .pr-title { font-size: 20px; margin-bottom: 5px; font-weight: bold; cursor: auto; }
#main-content .sections .section .pr-articles .pr-article .pr-title .pr-article.bullet:before { content: "+"; top: -3px; width: 20px; color: deepskyblue; font-size: 22px; font-weight: normal; }
#main-content .sections .section .pr-articles .pr-article .pr-client { margin-left: 30px; font-style: italic; font-size: 18px; line-height: 1em; margin-bottom: 3px; }
#main-content .sections .section .pr-articles .pr-article .pr-description { font-size: 16px; line-height: 1.2em; margin: -100% 0 5px 30px; margin-top: 0; cursor: auto; }
#main-content .sections .section .pr-articles .pr-article .pr-description.chinese { font-size: 14px; line-height: 1.4em; }
#main-content .sections .section .pr-articles .pr-article .pr-btn-more { margin-left: 30px; font-size: 16px; color: #eee999; }
#main-content .sections .section .pr-articles .pr-article .pr-btn-more .bullet:before { content: "+"; position: relative; display: inline-block; top: -1px; width: 17px; color: #eee999; font-size: 17px; font-weight: bold; line-height: 1em; -webkit-transform-origin: 5px 11px; -moz-transform-origin: 5px 11px; -ms-transform-origin: 5px 11px; -o-transform-origin: 5px 11px; transform-origin: 5px 11px; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; -o-transition: -o-transform 0.4s ease-out; transition: transform 0.4s ease-out; }
#main-content .sections .section .pr-articles .pr-article .pr-btn-more:hover .bullet:before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); }

.windows #main-content .sections .section .services .service .s-title .service.bullet:before { -webkit-transform-origin: 6px 10px; -moz-transform-origin: 6px 10px; -ms-transform-origin: 6px 10px; -o-transform-origin: 6px 10px; transform-origin: 6px 10px; }
.windows #main-content .sections .section .works .work .w-title .work.bullet:before { -webkit-transform-origin: 6px 10px; -moz-transform-origin: 6px 10px; -ms-transform-origin: 6px 10px; -o-transform-origin: 6px 10px; transform-origin: 6px 10px; }
.windows #main-content .sections .section .pr-articles .pr-article .pr-btn-more .bullet:before, .windows #main-content .sections .section .projects .project .p-btn-more .bullet:before { top: 1px; -webkit-transform-origin: 5px 8px; -moz-transform-origin: 5px 8px; -ms-transform-origin: 5px 8px; -o-transform-origin: 5px 8px; transform-origin: 5px 8px; }

.modal #modal { visibility: visible; -webkit-transition: opacity 0.4s 1s; -webkit-transition-delay: ease-out; -moz-transition: opacity 0.4s 1s ease-out; -o-transition: opacity 0.4s 1s ease-out; transition: opacity 0.4s 1s ease-out; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; z-index: 200000; }

#modal { visibility: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; }
#modal .content { position: absolute; width: 100%; height: 70%; margin: auto; top: 5%; left: 0; bottom: 0; right: 0; }
#modal .content .project { height: 100%; }
#modal .content .slideshow { width: 100%; height: 100%; margin: 0 !important; }
#modal .content .slideshow .slick-track, #modal .content .slideshow .slick-list { height: 100% !important; }
#modal .content .slideshow .slide { float: left; height: 100%; }
#modal .content .slideshow .slide .photo { width: 100%; height: 100%; }
#modal .content .slideshow .slide .photo .zoom-click { visibility: hidden; pointer-events: none; position: absolute; left: 0; right: 0; bottom: 10px; margin: auto; width: 150px; height: 30px; font-size: 10px; font-weight: bold; text-align: center; color: #eee999; }
#modal .content .slideshow .slide .photo .zoom-click:before { content: "+"; position: relative; display: block; top: 0px; width: 150px; color: #eee999; font-size: 20px; line-height: 1em; -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; -o-transition: -o-transform 0.4s ease-out; transition: transform 0.4s ease-out; }
#modal .content .slideshow .slide .photo:hover .zoom-click { visibility: visible; }
#modal .content .slideshow .slide img { width: auto; height: 99.5%; margin: 0 auto; border: 1px solid #ccc; }
#modal .content .slideshow .slide .flash { width: 100%; height: 100%; }
#modal .content .slideshow .slide .flash object { padding: 20px 0; }
#modal .content .slideshow .slide .flash object.LREC { position: relative; width: 300px; height: 250px; display: block; margin: 0 auto; }
#modal .content .slideshow .slide .flash object.SuperBanner { position: relative; width: 728px; height: 90px; display: block; margin: 0 auto; }
#modal .btn-close { position: absolute; top: 0; left: 0; width: 80px; height: 80px; cursor: pointer; }
#modal .btn-close:before { content: "+"; position: relative; display: block; top: 10px; left: 20px; color: #eee999; font-size: 66px; line-height: 1em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }

/* ========================================================================== Mobile Class min-DEVICE-width/max-DEVICE-width ========================================================================== */
@media only screen and (min-device-width: 320px) and (max-device-width: 540px) { html, body { width: 100%; min-width: 320px; min-height: inherit; }
  .content-wrapper { width: 100%; }
  #header { width: 95%; margin: 0 2.5%; background-color: deepskyblue; }
  #header #ynottony-logo { width: 100%; }
  #header #ynottony-logo .normal, #header #ynottony-logo .invert { background-size: 100% !important; }
  #main-content { width: 95%; margin: 0 2.5%; }
  #main-content .content-wrapper { margin-top: 95px !important; }
  #main-content .famous-quote { margin-bottom: 30px; }
  #main-content .famous-quote .quote { font-size: 30px; margin-bottom: 15px; }
  #main-content .famous-quote .quote .desktop { display: none; }
  #main-content .famous-quote .quote .mobile { display: block; }
  #main-content .famous-quote .btn-more { position: relative; float: right; top: 15px; left: 0; margin: 0; }
  #main-content .famous-quote .author { text-align: left; margin-right: 0; }
  #main-content .famous-quote .subcopy-wrapper { margin: 0 auto; width: 90%; }
  #main-content .famous-quote .subcopy-wrapper .subcopy { margin-top: -130%; }
  #main-content .sections { padding: 0; }
  #main-content .sections .section .services { margin: -300% 0 0 15px; }
  #main-content .sections .section .services.open .s-description { margin-top: 15px !important; }
  #main-content .sections .section .services .service .s-title .service.bullet:before { float: left; }
  #main-content .sections .section .services .service .s-title .s-big-title { float: left; width: 90%; line-height: 1.2em; }
  #main-content .sections .section .services .service .s-title:nth-child(2) { height: 75px; }
  #main-content .sections .section .services .service .s-description { margin: -600% 0 0 20px; }
  #main-content .sections .section .works { margin: -300% 0 0 15px; }
  #main-content .sections .section .works .work { margin-bottom: 30px; }
  #main-content .sections .section .works .work .w-title .work.bullet:before { float: left; }
  #main-content .sections .section .works .work .w-title .w-big-title { float: left; width: 90%; line-height: 1.2em; }
  #main-content .sections .section .works .work .w-client { margin: -200% 0 3px 20px; }
  #main-content .sections .section .works .work .w-description { margin: -200% 0 0 20px; }
  #main-content .sections .section .projects { margin: -800% 0 0 25px; }
  #main-content .sections .section .projects .project .p-title { line-height: 1.2em; }
  #main-content .sections .section .projects .project .p-title .project.bullet:before { width: 0; font-size: 0; }
  #main-content .sections .section .projects .project .p-description { margin-left: 0; }
  #main-content .sections .section .projects .project .p-btn-more { margin-left: 0; }
  #main-content .sections .section .persona { margin: -800% 0 0 30px; }
  #main-content .sections .section .persona .person .p-resume { padding: 0; }
  #main-content .sections .section .pr-articles { margin: -800% 0 0 25px; }
  #main-content .sections .section .pr-articles .pr-article .pr-title { line-height: 1.2em; }
  #main-content .sections .section .pr-articles .pr-article .pr-title .pr-article.bullet:before { width: 0; font-size: 0; }
  #main-content .sections .section .pr-articles .pr-article .pr-description { margin-left: 0; }
  #main-content .sections .section .pr-articles .pr-article .pr-btn-more { margin-left: 0; }
  #modal .content .slideshow .slide .photo .zoom-click { visibility: hidden !important; }
  #modal .btn-close { position: relative; top: 90%; margin: 0 auto; width: 50px; height: 50px; }
  #modal .btn-close:before { left: 10px; font-size: 50px; } }
/* ========================================================================== Helper classes ========================================================================== */
/* Image replacement */
.ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; }

.ir:before { content: ""; display: block; width: 0; height: 150%; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Clearfix: contain floats  For modern browsers 1. The space content is one way to avoid an Opera bug when the `contenteditable` attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that receive the `clearfix` class. 2. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements. */
.clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }

.clearfix:after { clear: both; }

/* For IE 6/7 only Include this rule to trigger hasLayout and contain floats. */
.clearfix { *zoom: 1; }

/* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */
@media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ }
/* ========================================================================== Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */
@media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  /* Don't show links for images, or javascript/internal links */
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; /* h5bp.com/t */ }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; } }