body { background-image:url(../images/bg7.png); background-color:#999; font-family:'Open Sans', Arial; font-size:12px; margin:0; padding:0; }  #container { width:860px; margin:30px auto 20px; }  #content { background-color:#FFF; -webkit-box-shadow:0 1px 6px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.06) inset; -moz-box-shadow:0 1px 6px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.06) inset; box-shadow:0 1px 6px rgba(0,0,0,0.27), 0 0 40px rgba(0,0,0,0.06) inset; }  .hidden { display:none; }  .clear { clear:both; }  h1 { font-size:37px; }  h2 { font-size:30px; }  h3 { font-size:20px; }  h4 { font-size:15px; }  h5 { font-size:13px; }  h6 { font-size:12px; }  h3.main-heading { background-image:url(../images/plus.png); background-repeat:no-repeat; background-position:left 2px; margin:15px 2px; }  h3.main-heading span { border-bottom:1px solid #999; padding-bottom:7px; color:#333; line-height:16px; margin-left:28px; display:block; }  strong { font-weight:700; color:#333; }  div.top { height:60px; margin-bottom:20px; overflow:hidden; }  #logo { float:left; overflow:hidden; margin-left:10px; display:none; }  #logo h2 { font-size:30px; font-weight:900; color:#444; line-height:40px; }  #logo h4 { color:#666; line-height:20px; }  .socialicons { float:right; margin-top:18px; }  .socialicons li { float:left; display:inline; margin:0 2px 0 0; padding:0; }  .social-text { float:left; height:12px; background-color:#222; color:#FFF; padding:9px; }  .social-facebook { float:left; width:30px; height:30px; background:#222 url(../images/social_facebook.png) no-repeat 5px 5px; }  .social-twitter { float:left; width:30px; height:30px; background:#222 url(../images/social_twitter.png) no-repeat 5px 5px; }  .social-googleplus { float:left; width:30px; height:30px; background:#222 url(../images/social_googleplus.png) no-repeat 4px 3px; }  .social-linkedin { float:left; width:30px; height:30px; background:#222 url(../images/social_linkedin.png) no-repeat 4px 3px; }  .social-facebook:hover { background-color:#3b5998; }  .social-twitter:hover { background-color:#22b1e5; }  .social-googleplus:hover { background-color:#d94a38; }  .social-linkedin:hover { background-color:#0075a7; }  .social-mail:hover { background-color:#f6c500; }  #profile { background-image:url(../images/header-shadow.png), url(../images/header-bg.png); background:url(../images/header-bg.png) repeat-x\0/; background-position:center bottom, left top; background-repeat:repeat-x; overflow:hidden; background-color:#fdd42f; }  .about { float:left; margin-top:30px; width:490px; margin-left:20px; }  .about .photo-inner { float:left; background:url(../images/photo-inner.png) no-repeat; width:192px; height:212px; padding:12px 0 0 20px; }  .about .photo-inner img { background-color:#FFF; }  .about h1 { font-weight:900; color:#FFF; line-height:34px; margin-top:8px; }  .about h3 { margin-top:5px; font-size:18px; color:#FFF; line-height:18px; }  .about p { font-size:14px; margin-top:15px; color:#bc9010; line-height:20px; }  .personal-info { float:left; margin-top:30px; width:310px; min-height:230px; margin-left:10px; background:url(../images/personal-info-sep.png) no-repeat left top; padding:20px 0 0 20px; }  .personal-info li { font-size:14px; margin-bottom:10px; overflow:hidden; }  .personal-info li label { color:#a87f09; background-color:#f4c024; float:left; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:4px 7px; }  .personal-info li span { float:right; width:170px; color:#a87f09; }  .menu { height:100px; background-color:#ededed; position:relative; }  .tabs { height:116px; position:absolute; margin-top:-14px; padding-left:130px; z-index:100; }  .tabs li { float:left; height:116px; }  .tabs li > a { padding-top:80px; width:115px; height:35px; display:block; background-repeat:no-repeat; font-size:16px; color:#b9b9b9; text-align:center; }  .tabs li.active { background:url(../images/tab-hover.png) no-repeat; }  .tabs li .tab-profile { background-image:url(../images/profile-icon.png); background-position:center 40px; }  .tabs li .tab-resume { background-image:url(../images/resume-icon.png); background-position:center 30px; }  .tabs li .tab-portfolio { background-image:url(../images/portfolio-icon.png); background-position:center 35px; }  .tabs li .tab-contact { background-image:url(../images/contact-icon.png); background-position:center 41px; }  .tabs .active .tab-profile { background-image:url(../images/profile-icon-active.png); }  .tabs .active .tab-resume { background-image:url(../images/resume-icon-active.png); }  .tabs .active .tab-portfolio { background-image:url(../images/portfolio-icon-active.png); }  .tabs .active .tab-contact { background-image:url(../images/contact-icon-active.png); }  #resume { overflow:hidden; padding:20px; }  .skills-section,.timeline-section { float:left; }  .timeline-section { width:460px; padding-right:60px; }  .timeline { padding-top:10px; }  .timeline li { margin-bottom:20px; float:left; }  .timeline li .timelineUnit { float:left; line-height:17px; margin-left:11px; color:#444; font-size:13px; border-left:1px solid #fadc66; padding-left:15px; }  .timeline li .timelineUnit .timelineDate { line-height:17px; color:#f4c024; font-size:14px; margin-left:10px; font-weight:400; float:right; padding:2px 6px; }  .timeline li .timelineUnit h4 { line-height:24px; font-size:15px; color:#444; }  .timeline li .timelineUnit h5 { line-height:18px; font-size:13px; color:#999; }  .timeline li .timelineUnit p { color:#666; font-size:12px; margin-top:5px; }  .skills-section { width:300px; }  .skills { margin-top:25px; overflow:hidden; height:100%; }  .skills li { margin-bottom:15px; float:left; padding-left:30px; }  .skills li h4 { width:140px; float:left; font-size:15px; color:#444; }  .skills li .rat0,.skills li .rat1,.skills li .rat2,.skills li .rat3,.skills li .rat4,.skills li .rat5,.skills li .rat6,.skills li .rat7 { width:123px; height:14px; float:left; }  .skills li .rat0 { background:url(../images/rats.png) no-repeat; }  .skills li .rat1 { background:url(../images/rats.png) no-repeat 0 -14px; }  .skills li .rat2 { background:url(../images/rats.png) no-repeat 0 -28px; }  .skills li .rat3 { background:url(../images/rats.png) no-repeat 0 -42px; }  .skills li .rat4 { background:url(../images/rats.png) no-repeat 0 -56px; }  .skills li .rat5 { background:url(../images/rats.png) no-repeat 0 -70px; }  .skills li .rat6 { background:url(../images/rats.png) no-repeat 0 -84px; }  .skills li .rat7 { background:url(../images/rats.png) no-repeat 0 -98px; }  #portfolio { overflow:hidden; padding:0 20px 20px; }  #portfolio .extra-text { font-size:20px; border-bottom:1px solid #ededed; color:#999; margin-bottom:20px; padding:24px 0; }  #portfolio-filter { border-bottom:1px solid #ededed; overflow:hidden; padding:15px 0; }  #portfolio-filter li a { float:left; margin-right:10px; color:#fff; background-color:#666; margin-bottom:5px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:6px; }  #portfolio-list { width:820px; }  #portfolio-list li { float:left; margin-right:25px; text-align:center; background-color:#f8f8f8; border-bottom:1px solid #e5e5e5; height:185px; margin-bottom:30px; width:180px; }  #portfolio-list li:hover { border-bottom:1px solid #fdc62a; height:185px; }  #portfolio-list img { background-color:#FFF; height:120px; width:180px; }  #portfolio-list li .title { font-size:14px; margin-top:15px; font-weight:400; color:#3A3A3A; }  #portfolio-list li .categorie { font-size:11px; line-height:25px; color:#999; }  .adipoli-wrapper { position:relative; display:inline-block; margin:auto; }  .adipoli-wrapper>img { position:absolute; z-index:1; }  .adipoli-before { position:absolute; z-index:5; }  .adipoli-after { position:absolute; z-index:10; }  .adipoli-slice { display:block; position:absolute; z-index:15; height:100%; }  .adipoli-box { display:block; position:absolute; z-index:15; }  #contact { overflow:hidden; padding:30px 0; }  .contact-info,.contact-form { float:left; padding:0 20px; }  .contact-info { width:250px; }  .contact-form { width:530px; }  .contact-info ul { float:left; margin-left:11px; border-left:1px solid #fadc66; padding-left:18px; }  .contact-info ul li { font-size:13px; line-height:20px; color:#666; overflow:hidden; }  #contactform { padding-left:30px; }  #contactform p { margin-bottom:15px; }  #contactform p label { display:block; color:#999; margin-bottom:8px; font-size:13px; }  #contactform .input { line-height:20px; height:20px; width:60%; }  #contactform .textarea { width:95%; }  #contactform .submit { color:#fff; background-color:#666; border:none; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; cursor:pointer; font-size:13px; padding:8px; }  #contactform .input,.textarea { background-color:#f5f5f5; border:1px solid #CCC; color:#999; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; font-size:13px; padding:6px; }  .success,.error { margin-bottom:10px; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; padding:10px; }  .success { background-color:#E3EBC6; color:#8FA442; border:1px solid #C2D288; }  .error { background-color:#f9e5e6; color:#b3696c; border:1px solid #f7c7c9; }  #map { height:300px; margin-bottom:25px; width:100%; border-bottom:1px solid #CCC; border-top:1px solid #CCC; }  div.footer { margin-top:20px; height:20px; }  div.footer .copyright { float:left; color:#333; padding-left:6px; }  .isotope-item { z-index:2; }  .isotope-hidden.isotope-item { pointer-events:none; z-index:1; }  .isotope,.isotope .isotope-item { -webkit-transition-duration:.8s; -moz-transition-duration:.8s; transition-duration:.8s; }  .isotope { -webkit-transition-property:height, width; -moz-transition-property:height, width; transition-property:height, width; }  .isotope .isotope-item { -webkit-transition-property:0 opacity; -moz-transition-property:0 opacity; transition-property:transform, opacity; }  #style-switcher { position:absolute; top:150px; left:0; width:100px; background-color:#333; padding:15px; }  #style-switcher .title { font-size:14px; color:#FFF; margin-bottom:12px; padding:5px; }  #style-switcher ul { margin-top:20px; }  #style-switcher ul li { float:left; margin-right:5px; margin-bottom:5px; }  .social-icons li:last-child,#style-switcher ul li:last-child { margin-right:0; }  .tabs li.active a,#portfolio-list li:hover .title { color:#fdc62a; }  #portfolio-filter li a:hover,#portfolio-filter li a.current,#contactform .submit:hover { background-color:#fdc62a; }  @media only screen and min-width 768px and max-width 959px { .about { width:410px; }  .about h1 { line-height:38px; font-size:30px; }  .about h3 { font-size:14px; line-height:14px; }  .personal-info { width:280px; margin-right:10px; }  .timeline-section { width:380px; padding-right:30px; }  .skills-section { width:300px; }  #portfolio-list li { margin-right:60px; }  .contact-info { width:250px; }  .contact-form { width:420px; }  #style-switcher { display:none; }  #container,#portfolio-list { width:750px; } }  @media only screen and min-width 480px and max-width 767px { #container { width:470px; }  #logo h2 { font-size:25px; font-weight:900; color:#444; line-height:30px; }  #logo h4 { color:#666; line-height:15px; }  .socialicons { margin-top:9px; }  .about { width:420px; display:block; }  .about h1 { line-height:38px; font-size:30px; }  .about h3 { font-size:14px; line-height:14px; }  .personal-info { margin-top:0; display:block; width:420px; background:none; border-top:1px solid #fdc62a; }  .tabs { padding-left:5px; }  .timeline-section { width:420px; padding-right:60px; }  .skills li h4 { width:260px; }  #portfolio-list { width:450px; }  #portfolio-list li { margin-right:40px; }  .contact-form { margin-top:20px; width:420px; }  .social-text,#style-switcher { display:none; }  .skills-section,.contact-info { width:420px; } }  @media only screen and max-width 479px { #container { width:300px; margin-top:10px; }  #logo h2 { font-size:25px; font-weight:900; color:#444; line-height:30px; }  #logo h4 { color:#666; line-height:15px; }  div.top { height:50px; margin-bottom:5px; }  .about { width:280px; display:block; margin:10px 0 15px 10px; }  .about .photo-inner { margin-left:40px; background:url(../images/photo-inner.png) no-repeat; width:192px; height:212px; padding:12px 0 0 20px; }  .about h1 { line-height:38px; font-size:30px; text-align:center; }  .about h3 { font-size:14px; line-height:14px; text-align:center; }  .about p { text-align:center; }  .personal-info { margin-top:0; display:block; width:280px; background:none; border-top:1px solid #fdc62a; margin-left:10px; min-height:220px; padding-left:0; }  .personal-info li { font-size:13px; }  .tabs { padding-left:0; }  .tabs li > a { width:75px; font-size:14px; }  .tabs li.active { background:none; }  #resume { padding:10px; }  .timeline-section { width:280px; padding-right:60px; }  .skills li h4 { width:120px; }  #portfolio-list li { margin-left:40px; }  .contact-form { margin-top:20px; width:280px; }  .contact-info,.contact-form { padding:0 10px; }  .socialicons,#style-switcher { display:none; }  .skills-section,#portfolio-list,.contact-info { width:280px; } }