body {font-size: 16px;line-height:18px;color:#20557B;margin:0;height:100%}
#logo {background:url(../../images/stevenHeld_logo.png) no-repeat;background-position:top left;width:271px;height:308px;text-indent:-99999px;z-index:1;opacity:1;position:absolute;left:30px;top:25px;border-radius:387px 106px 484px 116px;overflow:visible;}

<!-- a:hover #logo {background-position:top right !important;border-radius:84px 136px 464px 136px} -->
a:hover #logo {background-position:left -290px !important;border-radius:84px 136px 464px 136px}


.contact {padding:20px 40px;z-index:89;width:858px;height:auto;color:#333;clear:both;float:left;border:2px solid #327EC1;color:#666677;}
.email {font-size:15px}

footer
{
animation:footer 6.75s;
-moz-animation:footer 6.75s; /* Firefox */
-webkit-animation:footer 6.75s; /* Safari and Chrome */
}

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

@-webkit-keyframes footer /* Safari and Chrome */
{0%   {opacity:0;}50%  {opacity:0;}100%  {opacity:1;}}

@-moz-keyframes footer /* Firefox */
{0%   {opacity:0;}50%  {opacity:0;}100%  {opacity:1;}}

/* ================= Home ===============*/

.p_Home .home {width:308px;height:308px;overflow:hidden;}
#rings {z-index:9998;width:100%;height:auto;position:relative;border-top-left-radius:330px;overflow:visible;max-width:1164px;min-width:320px;margin: 9% 0 0 16%}
.p_Home #navigation {position:relative;top:0;border-radius: 300px;left:0;width:auto;height:auto;min-width:415px;max-width:100%}
.p_Home .quotemark {background:none;position:absolute;top:-4px;left:-38px;z-index:91;width:29px;height:21px;}
.p_Home .sidebar {color: #60688D;font-size: 100%;height: auto;margin:82px 0 0 600px;padding-left: 72px;width: 240px;z-index: 100;}
.p_Home .quote {position:relative;z-index:99;width:250px;height:auto;display:inline-block;top:-5px;left:13px;}
h1.uppercase {text-transform:uppercase; font-weight:bold; font-size:80px; line-height:60px}
#target {top:-745px;left:165px;opacity:1;position:absolute;z-index:1;}
.p_Home footer {opacity:1}
.p_Home .wrapper {min-height:920px;min-width:320px;overflow:hidden}
.fadeq .strong {float: right;color:#059CEF;font-size:.7em !important;}
.qts {font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;width:290px}

#design_rings1 {background:cyan;z-index:10;width:100%;height:100%;position:absolute;top:0;left:0;border-radius:330px;overflow:visible;max-height:641px}

#c.hover {background:url(../../images/ring_c_ov.png) no-repeat;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;}
.hover:hover {opacity:1 !important}

/* ***** */
.p_Home .sidebar
{
animation:quote 3.15s;
-moz-animation:quote 3.15s; /* Firefox */
-webkit-animation:quote 3.15s; /* Safari and Chrome */
}

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

@-webkit-keyframes quote /* Safari and Chrome */
{0%   {opacity:0;}50%  {opacity:0;}100%  {opacity:1;}}

@-moz-keyframes quote /* Firefox */
{0%   {opacity:0;}50%  {opacity:0;}100%  {opacity:1;}}


/* ================= About ===============*/

#stevenHeld {border:0;z-index:99;position:absolute;left: 185px;top:145px;width:380px;height:452px;text-indent:-99999px;overflow:hidden;}
.section_about.page_why .textbox {width:442px;float:left;height:auto;margin:120px 0 5px 537px;}
.textboxB {margin:20px 0 140px 537px !important}	
.section_about.page_why h2 {font-size:185%}
.callToAction {background:#20B8F1;height: 41px;padding: 20px;width: 440px;color:#fff;float: left;margin: 0 20px -3px 500px;-moz-box-shadow: 0 0 0 3px #FFFFFF inset;-webkit-box-shadow: 0 0 0 3px #FFFFFF inset;box-shadow: 0 0 0 3px #FFFFFF inset;border:2px solid #20B8F1;border-radius:40px;font-size:29px !important}
.section_about.page_why #stevenHeld {animation:stevenHeld 1.9s;-moz-animation:stevenHeld 1.9s; /* Firefox */ -webkit-animation:stevenHeld 1.9s; /* Safari and Chrome */}

@keyframes stevenHeld
{0%   {top:1345px;opacity:0}80%  {top:1300px;opacity:0}100%  {top:147px;opacity:1}}

@-webkit-keyframes stevenHeld /* Safari and Chrome */
{0%   {top:1345px;opacity:0}80%  {top:1300px;opacity:0}100%  {top:147px;opacity:1}}

@-moz-keyframes stevenHeld /* Firefox */
{0%   {top:1345px;opacity:0}80%  {top:1300px;opacity:0}100%  {top:147px;opacity:1}}

/* ***** */
.section_about.page_why .textbox, .callToAction
{
animation:textbox 1.6s;
-moz-animation:textbox 1.6s; /* Firefox */
-webkit-animation:textbox 1.6s; /* Safari and Chrome */
}

@keyframes textbox
{0%   {opacity:0}50%  {opacity:0}100%  {opacity:1}}

@-webkit-keyframes textbox /* Safari and Chrome */
{0%   {opacity:0}50%  {opacity:0}100%  {opacity:1}}

@-moz-keyframes textbox /* Firefox */
{0%   {opacity:0}50%  {opacity:0}100%  {opacity:1}}

/* ================= Process ===============*/

.section_process.page_how .textbox {width:345px;float:left;height:auto;margin:116px 0 140px 310px;position:relative;z-index:1000;}	
.section_process.page_how h1, .section_process.page_how h2, .section_process.page_how h3, .section_process.page_how h4, .section_process.page_how h5, .section_process.page_how h6 {color:#FF3399;}

/* ================= Resume ===============*/
.freelanceHire {float:right;margin:-55px 0 0 !important;font-weight:300;position:relative}
.resume {background:#fff;z-index:89;width:858px;height:auto;color:#333;margin:212px 0 0 230px;clear:both;float:left;box-shadow:0px 0 10px -5px #000000;color:#666677;position:relative;}
.resumeLogo {background: none repeat scroll 0 0 #FFFFFF;height: 210px;margin:0;overflow: hidden;padding:20px 0 17px 30px;width: 265px}
.resumeLogo a:link {color:#fff !important}
.box {color: #FFFFFF !important;height: 22px;padding: 4px 0 4px 60px;margin:0 0 10px -65px !important}
.yellow {background:#FBB03B;width:192px;margin-bottom:6px !important}
.cyan {background:#33C5F3;width:220px}
.magenta {background:#EC3A94;width:180px}
.logoSmall {font-size:15px !important;font-weight:300;padding-left:80px}
.web {border-bottom: 2px dotted #33C5F3;color: #33C5F3 !important;float: right;margin: -50px 0 0 !important;padding: 0 50px 0 0;text-align: right;width: 811px}
.rotate {transform:rotate(-6deg);-moz-transform:rotate(-6deg);-webkit-transform:rotate(-6deg);-o-transform:rotate(-6deg);-ms-transform:rotate(-6deg)}
.section_about.page_resume h2 {color:#999;font-weight:300;line-height:1.1em}
.leftSide {background:#fff;width:200px;height:auto;text-align:right;padding:17px 8px 0 0;float:left;border-right: 2px solid #EC3A94}
.education {text-transform:uppercase;padding:0 0 35px 0;border-bottom:2px dotted #33C5F3;margin-left:-1px}
.school {background: none repeat scroll 0 0 #fff;border-bottom: 2px dotted #33C5F3;font-size: 13px;height: 63px;margin: -96px 0 14px 215px;padding: 0 0 0 18px;text-align: left;width: 624px}
.experience {line-height: 1.1em;margin: -20px 0 0 -1px !important;padding: 0 0 0 14px;text-align: right;width: 180px}
.jobs {background: none repeat scroll 0 0 #FFFFFF;border-bottom: 2px dotted #33C5F3;height: auto;margin: -71px 0 14px 215px;padding: 0 0 0 18px;text-align: left;width: 604px}
.awards {text-transform:uppercase;padding:0 0 10px;margin-left:-1px}
.honors {background: none repeat scroll 0 0 #FFFFFF;border-bottom: 2px dotted #33C5F3;height: auto;margin: -157px 0 14px 215px;padding: 0 0 0 18px;text-align: left;width: 604px}
.skills {background: none repeat scroll 0 0 #FFFFFF;height: auto;margin: -59px 0 35px 215px;padding: 0 0 0 18px;text-align: left;width: 604px}
.upC {text-transform:uppercase}
.border {border-bottom: 2px dotted #33C5F3;margin: -29px 0 4px 2px !important;width: 201px}
.small {font-size:15px !important;margin-top:-15px !important;font-weight:300;}
.small a {font-weight:500}
.print {clear: both;float: left;font-size: 14px !important;margin: 25px 0 20px 230px !important;width: 430px;z-index: 99}
.section_about.page_resume footer {float:none !important}

.section_about.page_resume h5 {font-size:110%;}
.section_about.page_resume p, .section_about.page_resume h1, .section_about.page_resume h3, .section_about.page_resume h4, .section_about.page_resume h5, .section_about.page_resume h6 {color:#666677;}
.section_about.page_resume h5 {margin-top:-20px}
.section_about.page_resume p {margin:0 0 15px 0;}

.resume a:link {color:#666677}
.resume a:visited {color:#666677 !important}
.resume a:hover {color:#FF00FF !important}
.resume a:active {color:#FF00FF !important}
.section_about.page_resume .wrapper {float:none !important;min-height:768px !important}


.resume
{
animation:resume 1s;
-moz-animation:resume 1s; /* Firefox */
-webkit-animation:resume 1s; /* Safari and Chrome */
}

@keyframes resume
{0%   {left:-1100px;}50%  {left:-1100px;}100%  {left:0px;}}

@-webkit-keyframes resume /* Safari and Chrome */
{0%   {left:-1100px;}50%  {left:-1100px;}100%  {left:0px;}}

@-moz-keyframes resume /* Firefox */
{0%   {left:-1100px;}50%  {left:-1100px;}100%  {left:0px;}}

/* ***** */
.section_about.page_resume .freelanceHire
{
animation:hire 1.7s;
-moz-animation:hire 1.7s; /* Firefox */
-webkit-animation:hire 1.7s; /* Safari and Chrome */
}

@keyframes hire
{0%   {top:-1100px;}50%  {top:-1100px;}100%  {top:0px;}}

@-webkit-keyframes hire /* Safari and Chrome */
{0%   {top:-1100px;}50%  {top:-1100px;}100%  {top:0px;}}

@-moz-keyframes hire /* Firefox */
{0%   {top:-1100px;}50%  {top:-1100px;}100%  {top:0px;}}


/* ================= Portfolio ===============*/
#graphic-design-portfolio {background:#fff !important; background-image:none !important}
.section_graphic-design-portfolio #logo60 {background:url(/images/steven_held_logo.png) no-repeat;background-position:top left;background-size:contain;width:15%;height:30%;min-width:106px;text-indent:-99999px;z-index:1;position:absolute;overflow:visible;border-radius:0 0 245px 0;margin:15px;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;}
.section_graphic-design-portfolio #logo60:hover {opacity:1 !important}
.section_graphic-design-portfolio nav {position: fixed;margin: 0;padding: 0;top: 33%;left: 0px;list-style: none;z-index:9999;width:125px;height:355px;overflow:hidden;}
.section_graphic-design-portfolio nav li h2 {color:#FFF; font-family:"Lato", "Gill Sans", "Gill Sans Std", "Gill Sans MT", Arial, sans-serif;font-size: 15px;left: 18px;margin: 20px 0 0;position: fixed;text-shadow:none !important}
.section_graphic-design-portfolio nav li {left: -3px;position: relative;width: 125px;list-style:none;}
.section_graphic-design-portfolio nav li a {margin: 6px 0 0;display: block;margin-left: -2px;width: 116px;height: 60px;background-color:#FF3399;border-radius:0px 40px 40px 0px;-moz-border-radius:0px 40px 40px 0px;-webkit-border-bottom-right-radius: 40px;-webkit-border-top-right-radius: 40px;-khtml-border-bottom-right-radius: 40px;-khtml-border-top-right-radius: 40px;box-shadow: 0px 2px 3px blue;-moz-box-shadow: 0px 2px 3px blue;-webkit-box-shadow: 0px 2px 3px blue;border: 2px solid #FFFFFF;opacity: 0.4;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);transition: opacity 1.25s ease-in-out;-moz-transition: opacity 1.25s ease-in-out;-webkit-transition: opacity 1.25s ease-in-out;-o-transition: opacity 1.25s ease-in-out}
.section_graphic-design-portfolio nav li a:hover {opacity:1;box-shadow: 0px 2px 3px #666;-moz-box-shadow: 0px 2px 3px #666;-webkit-box-shadow: 0px 2px 3px #666;}
.section_graphic-design-portfolio h3 {font-size: 21px;font-weight: 300}
.section_graphic-design-portfolio footer {margin:120px auto 10px}
.section_graphic-design-portfolio .small {font-size:14px !important;margin-top:6px !important}


/* ================= Contact ===============*/
.section_about.page_contact h2 {font-size:200%;margin-bottom:-5px}
.vcard {font-weight:lighter;font-size:13px;border-left: 1px dotted #20b8f1;padding: 0 10px 0;margin:0 0 -2px -8px;}
.fn {font-size:14px;font-weight:normal}
.nocard {text-indent:-9999em;}

.form {float:left;margin:150px 0 0 270px;width:700px;height:auto;min-height:670px;position:relative;z-index:9999;border-left: 2px solid #20b8f1;padding: 0 25px 0;}
.section_about.page_contact .leftcontent {float:left}
.section_about.page_contact .wrapper {min-height:840px}
form p {margin:0 0 5px !important}
input    {
border: 1px solid #999999;display: block;height: 25px;width:355px;margin: 0 0 25px;
-webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
}
input.button {
margin:8px 0 0 0;
width:100px;
background:#fff;
color:#09C;
height:30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
}
input.button:hover {
background:#20B8F1;
color:#fff;
}

.section_about.page_contact .form
{
animation:form 1s;
-moz-animation:form 1s; /* Firefox */
-webkit-animation:form 1s; /* Safari and Chrome */
}

@keyframes form
{0%   {top:-700px;}50%  {top:-700px;}100%  {top:0px;}}

@-webkit-keyframes form /* Safari and Chrome */
{0%   {top:-700px;}50%  {top:-700px;}100%  {top:0px;}}

@-moz-keyframes form /* Firefox */
{0%   {top:-700px;}50%  {top:-700px;}100%  {top:0px;}}

/* ================= Sitemap ===============*/
.section_root.page_sitemap h2, .section_root.page_sitemap h3 {margin:0}
.section_root.page_sitemap p {font-size:16px;}
.section_root.page_sitemap .wrapper {min-height:730px}


/* ================= Error 404 ===============*/
.section_root.page_404 .textbox {width:1024px;min-width:1024px;height:auto;margin:116px auto 0;}
.section_root.page_404 .leftcontent {width:100%;min-height:480px}


/* Portrait */
@media screen and (max-width:800px) and (orientation:portrait) {
   .p_Home #logo {margin:-20px 0 0 -25px}
   .p_Home .sidebar {display:none !important}
   .p_Home #navigation {width: 70%}
   .section_graphic-design-portfolio nav {display:none}
}
@media screen and (max-width:320px) and (orientation:portrait) {
   .p_Home #logo {margin:-20px 0 0 -25px}
   .p_Home .sidebar {display:none !important}
   .p_Home #navigation {width: 70%;margin:0 0 0 20px}
   .p_Home #rings {min-height:444px}
}


/* ================= Mobile CSS ===============*/

/* Portrait */
@media screen and (max-width:500px) and (orientation:portrait) {
   .p_Home .sidebar {display:none}
   .p_Home .wrapper {min-height:100% !important;min-width:100% !important}
   #rings {margin:30px 0 0 45px}
   footer {margin:100px auto 0;width:450px}

}

/* Landscape */
@media screen and (max-width:500px) and (orientation:landscape) {
   .p_Home .wrapper {min-height:100% !important;min-width:850px}
   #rings {top:121px;left:195px;min-width:415px}
   footer {display:block;margin:80px auto 0 !important;min-width:800px}
   .p_Home .sidebar {margin:82px 0 0 430px;padding-left: 72px;}
   .section_graphic-design-portfolio nav {display:none}
   }