Team:Shenzhen BGIC 0101/style

From 2013.igem.org

(Difference between revisions)
Line 53: Line 53:
     height: 100%}
     height: 100%}
.push {
.push {
-
     height: 245px;
+
     height: 45px;
}
}
p img {
p img {

Revision as of 08:14, 20 October 2013

@font-face {

 font-family: 'Tangerine';
 font-style: normal;
 font-weight: 400;
 src: local('Tangerine'), url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');

}

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, em, img, ins, kbd, q, s, samp, small, strike, strong, 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;

letter-spacing: 0.05em; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

   display: block;

} body {

   line-height: 1;

} ol, ul {

   list-style: none;

}

p, ul, ol {

   margin: 0 0 0px; 
   

} ul, ol {

   padding: 1.5em 0 0 2.5em;

}


body {

 /*  background: #f2f2f2;*/
   background: #262626;
   font-family: "proxima-nova", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 21px;
   color: #262626;
   -webkit-font-smoothing: antialiased;
   -webkit-text-size-adjust: 100%}

html, body {

   height: 100%}
  1. wrap {
  //background: url(Gene.jpg) no-repeat fixed;

background-size:cover;

   margin-bottom: 0px;
   min-height: 100%;
   height: auto!important;
   height: 100%}

.push {

   height: 45px;

} p img {

   margin: 0;

} em {

   font-style: italic;

} strong {

   font-weight: bold;

} hr {

   border: solid #ddd;
   border-width: 1px 0 0;
   clear: both;
   margin: 10px 0 30px;
   height: 0;

} a, a:visited {

   color: #666;
   text-decoration: none;
   outline: 0;

} a:hover, a:focus {

   color: #333;

} p a, p a:visited {

   line-height: inherit;

} img.scale-with-grid {

   max-width: 100%;
   height: auto;

}

header {

   width: 100%;
   height: 90px;
   background: #222;
   background: rgba(0, 0, 0, .2);
   border-color: #fff;
   border-bottom: 1px solid rgba(255, 255, 255, .25);
   position: fixed;
   top: 0;
   z-index: 10;
   -webkit-transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -ms-transition: all .2s ease-in-out;
   transition: all .2s ease-in-out;

} header.sticky {

   height: 60px;
   background: #993399;
   border: 0;
   box-shadow: 0 1px 6px rgba(0, 0, 0, .2);

} header h1 {

   margin: 0;

}

  1. logo {
   width: 84px;
   height: 59px;
   display: block;
   background: url(Genovo-logo.png) no-repeat;
   text-indent: -99999em;
   position: absolute;
   top: 15px;
   left: 15px;
   -webkit-transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   transition: all .2s ease-in-out;

}

  1. logo1{
   width: 80px;
   height: 60px;
   display: block;
   background: url(Igem_logo12.png) no-repeat;
   text-indent: -99999em;
   position: absolute;
   top: 15px;
   right: 10px;
   -webkit-transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   transition: all .2s ease-in-out;
   z-index:9999;

} nav {

   text-align: center;
   margin-top: 35px;
   -webkit-transition: margin .2s ease-in-out;
   -moz-transition: margin .2s ease-in-out;
   transition: margin .2s ease-in-out;

} .sticky nav {

   margin-top: 20px;

} nav a, #start-project {

   font-weight: 600;
   text-transform: uppercase;
   color: #555;
   text-shadow: 0 1px 0 #fff;
   padding: 16px;
   font-size: 14px;

} .light nav a {

   color: #ddd;/* top-nav color */
   text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
   opacity: .5;
   -webkit-transition: opacity .1s linear;
   -moz-transition: opacity .1s linear;
   transition: opacity .1s linear;

} nav a.current-menu-item, nav a.current_page_parent, nav a:hover, .single-work .light nav a.menu-item-18, .single-lab .light nav a.menu-item-17, .single-post .light nav a.menu-item-16 {

   opacity: 1;

} .single-work nav a.current_page_parent, .single-lab nav a.current_page_parent {

   opacity: .5;

}

  1. blog {
   z-index: 6;

}

  1. blog article {
   margin: 10px auto 60px;
   max-width: 700px;
   position: relative;

}


  1. home-content h2, #fresh h2, h2.section-title {
   color: #358;
   font-size: 12px;
   text-shadow: 0 1px 0 #fff;
   font-weight: 600;
   width: 150px;
   background: #aaa;
   margin: -20px auto 20px;
   text-align: center;

}

  1. home-content .column, #fresh {
   border-top: 1px solid #d0d0d0;

}

  1. home-content .one-third {
   float: right!important;

} .mini-post {

   float: left;
   background: #fff;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .4);
   border-radius: 2px;
   overflow: hidden;
   width: 290px;
   -webkit-transition: all .2s ease-out;
   -moz-transition: all .2s ease-out;
   transition: all .2s ease-out;
   color: #333;
   min-height: 320px;
   cursor: pointer;

} .mini-post:hover {

   margin-top: -5px;
   box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .4);

} .mini-post .text {

   padding: 20px 20px 10px;

} .mini-post h3 {

   font-size: 16px;
   line-height: 20px;
   font-weight: 600;
   margin: 0;

} .mini-post .meta {

   font-size: 11px;

} .mini-post p {

   font-size: 13px;

} .mini-post .more {

   font-weight: 600;

}

  1. tweet {
   margin: 40px auto;
   padding-top: 40px;
   border-top: 1px solid #d0d0d0;

}

  1. tweet .text {
   padding: 0 90px;
   background: url(art/bird.svg) no-repeat 35px 0;
   font-size: 26px;
   font-weight: 300;

}

  1. tweet .text p {
   margin: 0 0 10px;
   text-align: center;
   line-height: 36px;

}

  1. tweet .text p.author {
   font-size: 20px;

}

  1. page-header {
   width: auto;
 //  height: 220px;
   //background: url(Test-head.jpg) top center;
   margin: 0 0 35px;
   box-shadow: 2px 1px 12px #272727;
  

} .wf-loading #page-header h1 {

   visibility: hidden;

}

.blog #page-header {

  // background: url(Test-head.jpg) top center;

}

  1. page-header h1 {
   font-family: "abril-fatface", 'Adobe Garamond', 'Garamond', serif;
   color: #fff;
   text-align: center;
   padding: 130px 0 0 0;
   text-shadow: 0 2px 0 #000;
   font-size: 60px;

}

  1. blog {
   z-index: 6;

}

  1. blog article {
   margin: 10px auto 60px;
   max-width: 1200px;
   position: relative;

}

  1. blog article .post {
   background: #fff;
//   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .4);
   box-shadow: 2px 1px 6px #272727;
   border-radius: 2px;
   overflow: hidden;
   color: #333;
   margin: 0 0 15px;

}

  1. blog article .post .text {
   padding: 20px 20px 10px;

} .post-content a { color: #2683a5; } .post-content a:hover { color: #4ea9a2; }

  1. blog article .post h2 {
       font-family: 'Tangerine', serif;
       font-size: 48px;

text-shadow: 4px 4px 4px #aaa; color: #38f; letter-spacing: 0.1em; word-spacing: 0.3em; font-weight: 700;

   line-height: 36px;
   margin: 0;

}

  1. blog article .post h3 {
   font-size: 14px;
   line-height: 18px;
   text-transform: uppercase;
   font-weight: 700;

}

  1. blog article .post .meta {
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;

}

  1. blog article .post p {
   font-size: 16px;

line-height: 19px; font-family: Trebuchet MS; font-weight: 600; } .short-url, .share, .categories {

   background: #eaeaea left center no-repeat;
   border-radius: 2px;
   border-bottom: 1px solid #fff;
   border-top: 1px solid #d0d0d0;
   float: left;
   margin: 0 20px 0 0;
   padding: 4px 15px 4px 35px;
   font-size: 11px;
   color: #666;
   text-transform: uppercase;
   font-weight: 700;
   text-shadow: 0 1px 0 #fff;
   -webkit-transition: all .2s ease-out;
   -moz-transition: all .2s ease-out;
   transition: all .2s ease-out;

} .addthis_toolbox {

   display: none;
   padding: 0 20px 20px;

} .short-url:hover, .share:hover {

   background-color: #ddd;
   border-top: 1px solid #aaa;

}

  1. blog article.quote {
   max-width: 940px;

}

  1. blog article.quote .quote-content {
   background: #676767;
   padding: 30px;
   border-radius: 3px;
   border-top: #111 1px solid;
   border-bottom: #fff 1px solid;
   margin: 0 0 15px;

}

  1. blog article.quote .quote-content p {
   font-size: 26px;
   line-height: 32px;
   color: #eee;
   font-weight: 300;

}

  1. blog article.quote p.ref {
   color: #fff;
   padding: 0;
   margin: 0;

}

  1. blog article.quote .quote-content a {
   color: #fff;
   text-decoration: underline;

}

  1. blog-pagination {
   display: block;
   text-align: center;
   margin: 35px 0;

} .wp-paginate {

   display: inline-block;
   padding: 0;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .4);
   border-radius: 3px;

} .wp-paginate li {

   padding: 0!important;
   display: inline-block;
   background-image: none!important;
   background-color: #fff;
   margin: 0;
   float: left;

} .wp-paginate a, .wp-paginate .page.current {

   color: #333;
   padding: 10px 13px;
   display: inline-block;
   margin-bottom: 0!important;
   min-width: 10px;
   border-right: 1px solid #eee;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   -webkit-transition: all .1s ease-in-out;
   -moz-transition: all .1s ease-in-out;
   transition: all .1s ease-in-out;

} .wp-paginate span {

   margin-bottom: 0!important;

} .wp-paginate a.next {

   border-left: 0;

} .wp-paginate .page {

   margin: 0;

} .wp-paginate .page.current {

   background-color: #fafafa;
   color: #888;

} .wp-paginate a:hover {

   background: #555;
   color: #fff;
   border-right: 1px solid #555;

}

  1. disqus_thread {
   margin: 10px auto 35px!important;
   max-width: 660px;
   position: relative;
   background: #eaeaea;
   border-radius: 2px;
   border-bottom: 1px solid #fff;
   border-top: 1px solid #d0d0d0;
   color: #1a1a1a;
   padding: 20px;
   font-size: 12px;

}

  1. disqus_thread h3 {
   font-size: 14px;
   text-transform: uppercase;
   text-shadow: 0 1px 0 #fff;
   font-weight: 600;

}

  1. contact {
   position: relative;
   height: 940px;

}

  1. location-map {
   width: 100%;
   height: 940px;
   display: block;
   position: absolute;
   top: 0;

}

  1. contact .container {
   padding-top: 60px;

}

  1. contact #contact-details, #contact #message {
   background: #262626;
   float: none;
   display: block;
   margin: 0 0 35px;
   box-shadow: 0 0 25px 0 rgba(0, 0, 0, .25);

}

  1. phone-address, #work-planner {
   padding: 30px 40px;

}

  1. phone-address {
   border-bottom: 1px solid #565656;

}

  1. phone-address p, #work-planner h2, #message h2 {
   text-transform: uppercase;
   color: #fff;
   font-weight: 600;
   font-size: 14px;

}

  1. phone-address p {
   padding-left: 35px;

}

  1. phone-address p#phone {
   background: url(art/phone.png) no-repeat 2px 2px;

}

  1. phone-address p#address {
   background: url(art/map.png) no-repeat 2px 2px;
   margin: 0;

}

  1. work-planner h2, #message h2 {
   margin: 0 0 10px;
   line-height: normal;

}

  1. work-planner p {
   color: #9c9c9c;
   font-size: 13px;
   font-weight: 600;

}

  1. work-planner a {
   padding: 12px 40px 12px 12px;
   color: #fff;
   text-transform: uppercase;
   font-weight: 700;
   font-size: 12px;
   background: #ce462b url(art/get-started-arrow.png) no-repeat right center;
   margin: 0 0 10px;
   display: block;
   width: 128px;
   -webkit-transition: background-color .2s ease-in-out;
   -moz-transition: background-color .2s ease-in-out;
   transition: background-color .2s ease-in-out;

}

  1. work-planner a:hover {
   background-color: #4ea9a2;

}

  1. contact #message .wrapper {
   padding: 30px 40px;

}

  1. contact #message .field {
   display: block;
   position: relative;
   margin: 0 0 15px;

}

  1. contact #message label {
   position: absolute;
   top: 9px;
   left: 11px;
   color: #aaa;
   font-size: 13px;
   font-weight: 500;

}

  1. contact #message input, #contact #message textarea {
   width: 300px;
   max-width: 300px;
   background: #000;
   border: 0;
   border-bottom: 1px solid #373737;
   width: 100%;
   color: #ddd;
   font-size: 13px;
   font-weight: 500;
   padding: 8px 10px;

}

  1. contact #message textarea {
   height: 80px;

}

  1. contact #message input:focus, #contact #message textarea:focus {
   background: #111;
   outline: 0;

}

  1. contact #message button {
   padding: 14px 40px 14px 12px;
   color: #fff;
   text-transform: uppercase;
   font-weight: 700;
   text-align: left;
   font-size: 12px;
   background: #343434 url(art/message-arrow.png) no-repeat right center;
   display: block;
   margin: 0;
   width: 180px;
   -webkit-transition: background-color .2s ease-in-out;
   -moz-transition: background-color .2s ease-in-out;
   transition: background-color .2s ease-in-out;
   font-family: "proxima-nova", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

}

  1. contact #message button:hover {
   background-color: #666;

} .contact footer {

   margin: 0;

} footer {

   padding: 35px 0 20px;
   background: #003399;
   height: 130px;

box-shadow: 4px 3px 25px #000; } footer h3 {

   font-size: 13px;
   line-height: 20px;
   font-weight: 600;
   color: #fff;
   text-transform: uppercase;
   margin: 0 0 20px;

} footer p {

   color: #a5a5a5;
   font-size: 12px;
   line-height: 20px;
   font-weight: 600;

} footer p a, footer p a:visited, footer p span {

   color: #dedede;

} footer p a:hover {

   color: #fff;

}

  1. footer-contact p {
   margin-right: 40px;
   float: left;

}

  1. footer-project p {
   max-width: 180px;

}

  1. footer-newsletter {
   position: relative;

}

  1. footer-newsletter p {
   position: absolute;
   font-size: 11px;
   top: 0;
   right: 0;
   color: #7c7c7c;

}

  1. footer-newsletter input {
   width: 220px;
   height: 19px;
   background: #202020;
   border: 0;
   margin: 0;
   padding: 10px;
   color: #fff;
   font-size: 12px;
   -webkit-transition: background .3s ease-in-out;
   -moz-transition: background .3s ease-in-out;
   transition: background .3s ease-in-out;
   float: left;
   border-radius: 0;

}

  1. footer-newsletter input:focus {
   outline: 0;
   background: #333;

}

  1. footer-newsletter label {
   position: absolute;
   top: 49px;
   left: 10px;
   color: #a5a5a5;
   font-size: 12px;

}

  1. footer-newsletter button {
   width: 39px;
   height: 39px;
   text-indent: -99999em;
   background: #202020 url(art/btn-arrow.svg) no-repeat center center;
   float: right;
   -webkit-transition: background .3s ease-in-out;
   -moz-transition: background .3s ease-in-out;
   transition: background .3s ease-in-out;

}

  1. footer-newsletter button:hover {
   background-color: #333;

}

  1. footer-final {
   margin: 15px auto;
   padding-top: 35px;
   border-top: 1px solid #313131;
   position: relative;

}

  1. footer-final a, #footer-final a:visited {
   color: #aaa;

}

  1. footer-final a:hover {
   color: #fff;

}

  1. footer-final p {
   font-weight: 600;
   font-size: 12px;
   display: block;
   margin: 0;

}

  1. footer-nav {
   text-align: center;

}

  1. footer-nav a {
   margin: 0 8px;

}

  1. footer-final p#footer-social {
   text-align: right;
   margin-left: 40px;

}

  1. footer-social a, #footer-social a:visited {
   margin: 0 0 0 16px;

} .left {

   float: left;

} .right {

   float: right;

} span.error {

   color: red;
   font-size: 12px;

} p.success {

   background: #009b00;
   padding: 5px;
   color: #fff;
   text-align: center;
   font-weight: 600;
   border-radius: 3px;

} p.fail {

   background: red;
   padding: 5px;
   color: #fff;
   text-align: center;
   font-weight: 600;
   border-radius: 3px;

} .success {

   color: #a5a5a5;
   font-size: 12px;

} .alignnone {

   margin: 5px 20px 20px 0;

} .aligncenter, div.aligncenter {

   display: block;
   margin: 5px auto 5px auto;

} .alignright {

   float: right;
   margin: 5px 0 20px 20px;

} .alignleft {

   float: left;
   margin: 5px 20px 20px 0;

} .aligncenter {

   display: block;
   margin: 5px auto 5px auto;

} a img.alignright {

   float: right;
   margin: 5px 0 20px 20px;

} a img.alignnone {

   margin: 5px 20px 20px 0;

} a img.alignleft {

   float: left;
   margin: 5px 20px 20px 0;

} a img.aligncenter {

   display: block;
   margin-left: auto;
   margin-right: auto;

} .wp-caption {

   background: #fff;
   border: 1px solid #f0f0f0;
   max-width: 96%;
   padding: 5px 3px 10px;
   text-align: center;

} .wp-caption.alignnone {

   margin: 5px 20px 20px 0;

} .wp-caption.alignleft {

   margin: 5px 20px 20px 0;

} .wp-caption.alignright {

   margin: 5px 0 20px 20px;

} .wp-caption img {

   border: 0 none;
   height: auto;
   margin: 0;
   max-width: 98.5%;
   padding: 0;
   width: auto;

} .wp-caption p.wp-caption-text {

   font-size: 11px;
   line-height: 17px;
   margin: 0;
   padding: 0 4px 5px;

} .cols_2_left, .cols_2_right, .cols_3_left, .cols_3_middle, .cols_3_right {

   margin: 0 0 1.5em;

} .cols_2_left {

   float: left;
   width: 47%}

.cols_2_right {

   float: right;
   width: 47%}

.cols_3_left {

   float: left;
   width: 30%}

.cols_3_middle {

   float: left;
   width: 30%;
   margin-left: 5%}

.cols_3_right {

   float: right;
   width: 30%}

.container {

   position: relative;
   width: 1000px;
   margin: 0 auto;
   padding: 0;

} .container.short {

   width: 940px;

} .container .column, .container .columns {

   float: left;
   display: inline;
   margin-left: 10px;
   margin-right: 10px;

} .row {

   margin-bottom: 20px;

} .column.alpha, .columns.alpha {

   margin-left: 0;

} .column.omega, .columns.omega {

   margin-right: 0;

} .container .one.column, .container .one.columns {

   width: 40px;

} .container .two.columns {

   width: 100px;

} .container .three.columns {

   width: 160px;

} .container .four.columns {

   width: 220px;

} .container .five.columns {

   width: 180px;

} .container .six.columns {

   width: 340px;

} .container .seven.columns {

   width: 400px;

} .container .eight.columns {

   width: 460px;

} .container .nine.columns {

   width: 520px;

} .container .ten.columns {

   width: 580px;

} .container .eleven.columns {

   width: 640px;

} .container .twelve.columns {

   width: 700px;

} .container .thirteen.columns {

   width: 760px;

} .container .fourteen.columns {

   width: 820px;

} .container .fifteen.columns {

   width: 880px;

} .container .sixteen.columns {

   width: 940px;

} .container .one-third.column {

   width: 290px;

} .container .two-thirds.column {

   width: 615px;

} .container .offset-by-one {

   padding-left: 60px;

} .container .offset-by-two {

   padding-left: 120px;

} .container .offset-by-three {

   padding-left: 180px;

} .container .offset-by-four {

   padding-left: 240px;

} .container .offset-by-five {

   padding-left: 300px;

} .container .offset-by-six {

   padding-left: 360px;

} .container .offset-by-seven {

   padding-left: 420px;

} .container .offset-by-eight {

   padding-left: 480px;

} .container .offset-by-nine {

   padding-left: 540px;

} .container .offset-by-ten {

   padding-left: 600px;

} .container .offset-by-eleven {

   padding-left: 660px;

} .container .offset-by-twelve {

   padding-left: 720px;

} .container .offset-by-thirteen {

   padding-left: 780px;

} .container .offset-by-fourteen {

   padding-left: 840px;

} .container .offset-by-fifteen {

   padding-left: 900px;

} @media only screen and (max-width:1049px) {

   #case-details .images {
   width: auto;
   margin-left: 0;

}

  1. case-details .images.two img {
   width: 450px;

} }@media only screen and (min-width:960px) {

   #logo {
   -webkit-transform-style: preserve-3d;

}

   #logo1 {
   -webkit-transform-style: preserve-3d;

} .sticky #logo {

   -webkit-transform: scale(.75);
   -moz-transform: scale(.75);
   -ms-transform: scale(.75);
   -o-transform: scale(.75);
   transform: scale(.75);
   top: 0;
   left: -10px;

} .sticky #logo1 {

   -webkit-transform: scale(.75);
   -moz-transform: scale(.75);
   -ms-transform: scale(.75);
   -o-transform: scale(.75);
   transform: scale(.75);
   top: 0;
   right: -1px;

}

}@media only screen and (min-device-width :768px) and (max-device-width:1024px) and (orientation:landscape) {

   #logo {
   -webkit-transform-style: flat;

}

   #logo1 {
   -webkit-transform-style: flat;

} .sticky #logo {

   -webkit-transform: none;
   -moz-transform: none;
   -ms-transform: none;
   -o-transform: none;
   transform: none;
   background-position: 0 -80px;
   top: 8px;
   left: 10px;

} .sticky #logo1 {

   -webkit-transform: none;
   -moz-transform: none;
   -ms-transform: none;
   -o-transform: none;
   transform: none;
   background-position: 0 -80px;
   top: 8px;
   right: 1px;

} }@media only screen and (min-width:768px) and (max-width:959px) {

   .container {
   width: 768px;

} .container.short {

   width: 748px;

} .container .column, .container .columns {

   margin-left: 10px;
   margin-right: 10px;

} .column.alpha, .columns.alpha {

   margin-left: 0;
   margin-right: 10px;

} .column.omega, .columns.omega {

   margin-right: 0;
   margin-left: 10px;

} .alpha.omega {

   margin-left: 0;
   margin-right: 0;

} .container .one.column, .container .one.columns {

   width: 28px;

} .container .two.columns {

   width: 76px;

} .container .three.columns {

   width: 124px;

} .container .four.columns {

   width: 172px;

} .container .five.columns {

   width: 220px;

} .container .six.columns {

   width: 268px;

} .container .seven.columns {

   width: 316px;

} .container .eight.columns {

   width: 364px;

} .container .nine.columns {

   width: 412px;

} .container .ten.columns {

   width: 460px;

} .container .eleven.columns {

   width: 508px;

} .container .twelve.columns {

   width: 556px;

} .container .thirteen.columns {

   width: 604px;

} .container .fourteen.columns {

   width: 652px;

} .container .fifteen.columns {

   width: 700px;

} .container .sixteen.columns {

   width: 748px;

} .container .one-third.column {

   width: 236px;

} .container .two-thirds.column {

   width: 492px;

} .container .offset-by-one {

   padding-left: 48px;

} .container .offset-by-two {

   padding-left: 96px;

} .container .offset-by-three {

   padding-left: 144px;

} .container .offset-by-four {

   padding-left: 192px;

} .container .offset-by-five {

   padding-left: 240px;

} .container .offset-by-six {

   padding-left: 288px;

} .container .offset-by-seven {

   padding-left: 336px;

} .container .offset-by-eight {

   padding-left: 384px;

} .container .offset-by-nine {

   padding-left: 432px;

} .container .offset-by-ten {

   padding-left: 480px;

} .container .offset-by-eleven {

   padding-left: 528px;

} .container .offset-by-twelve {

   padding-left: 576px;

} .container .offset-by-thirteen {

   padding-left: 624px;

} .container .offset-by-fourteen {

   padding-left: 672px;

} .container .offset-by-fifteen {

   padding-left: 720px;

} .sticky #logo {

   background-position: 0 -80px;
   top: 8px;
   left: 10px;

} .sticky #logo1 {

   background-position: 0 -80px;
   top: 8px;
   right: 1px;

} nav a {

   padding-left: 10px;
   padding-right: 10px;

}

  1. footer-contact {
   width: 220px;

}

  1. footer-newsletter {
   float: right;
   width: 280px;

} .mini-post {

   width: 236px;

} .mini-post img {

   width: 100%;
   height: auto;

}

  1. case-details .images {
   width: auto;
   margin-left: 0;

}

  1. case-details .images img {
   width: 100%}
  1. case-details .images.two img {
   width: 350px;

}

  1. case-details, #meta .container, .single #page-header .container {
   padding: 0 10px;
   width: 748px;

} .about .column-text {

   padding: 0 15px;

}

  1. feature h1 {
   font-size: 55px;

}

  1. page-header.case h1 {
   font-size: 40px;
   line-height: 34px;

}

  1. page-header.case h2 {
   max-width: 40%;
   line-height: 24px;

}

  1. blog-top #categories {
   width: 220px;

}

  1. blog-top form {
   width: 340px;

}

  1. blog-top #rss {
   width: 100px;

} .container .seven.columns {

   width: 400px;

} .single-work #page-header h2, .single-lab #page-header h2 {

   font-weight: 500;
   font-size: 16px;
   line-height: 22px;

}

footer {

   height: auto;

}

  1. wrap {
   margin-bottom: 0;
   min-height: 0;

} .push {

   display: none;

}

  1. copyright, #footer-social {
   width: 150px;
   margin: 0!important;

}

  1. location-map {
   display: none;

}

  1. contact {
   height: auto;

}

  1. contact .container {
   padding-top: 10px;

}

  1. contact #contact-details {
   float: left;
   width: 340px;

}

  1. contact #message {
   float: right;
   width: 400px;

}

  1. footer-nav {
   width: 448px;

}

  1. processes {
   margin: 0 30px;

} .process .text {

   padding: 0 15px;

} .process p {

   font-size: 13px;
   line-height: 18px;

} }@media only screen and (max-width:767px) {

   .container, .container.short {
   width: 300px;

} .container .columns, .container .column {

   margin: 0;

} .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column {

   width: 300px;

} .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen {

   padding-left: 0;

} .sticky #logo {

   background-position: 0 -80px;
   top: 8px;
   left: 10px;

} .sticky #logo1 {

   background-position: 0 -80px;
   top: 8px;
   right: 1px;

}

  1. feature {
   height: 250px;

}

  1. feature article, #feature ul {
   display: none!important;

}

  1. feature h1 {
   top: 100px;
   font-size: 36px;
   line-height: 42px;

}

  1. home-content, #home-content .column, .mini-post {
   width: auto;
   float: none!important;
   display: block;

}

  1. home-content .column {
   margin: 0 0 40px;

} .mini-post {

   margin: 0 auto 20px;
   width: 290px;

}

  1. tweet {
   padding: 40px 0 0 0;
   margin: 40px 0;
   width: auto;

}

  1. tweet .text {
   padding: 40px 20px 0;
   background-position: center top;

} nav a {

   padding-left: 6px;
   padding-right: 6px;
   font-size: 12px;

}

  1. work article {
   width: 30%;
   margin: 10px;

}

  1. work article .image, #work article a img, .labs#work article .image {
   width: 100%;
   height: auto;

}

  1. case-details .images {
   width: auto;
   margin-left: 0;

}

  1. case-details .images img, #case-details .images.two img {
   width: 100%;
   margin: 0 0 20px!important;

}

  1. page-header.case h1 {
   font-size: 30px;
   line-height: 28px;
   max-width: 55%}
  1. page-header.case h2 {
   max-width: 50%;
   line-height: 24px;

} .labs #page-header h1 {

   font-size: 46px;

}

  1. meta p {
   float: right;
   margin: 0;

}

  1. meta p:first-child {
   width: 50%;
   float: left;

}

  1. work-with-us {
   font-size: 18px;

}

  1. blog-top #categories {
   margin-bottom: 15px;

}

  1. blog-top form {
   width: 200px;

}

  1. blog-top input {
   width: 170px;

}

  1. blog-top #rss {
   width: 80px;
   float: right;

}

  1. blog article img {
   width: 100%;
   height: auto;

}

  1. blog article {
   margin-bottom: 30px;

}

  1. blog article iframe {
   height: 270px;

}

  1. blog article .post h2 {
   font-size: 20px;
   line-height: 22px;

}

  1. blog .share {
   display: none;

} .short-url {

   margin-bottom: 5px;

} .categories {

   float: left;

} .content h2 {

   font-size: 30px;
   line-height: 38px;

} .content p {

   font-size: 14px;
   line-height: 22px;
   font-weight: 500;

}

footer {

   height: auto;

}

  1. wrap {
   margin-bottom: 0;
   min-height: 0;

} .push {

   display: none;

}

  1. processes {
   margin: 0 20px;

} .process .text {

   padding: 0 10px;

} .process p {

   font-size: 12px;
   line-height: 16px;

} }@media only screen and (min-width:480px) and (max-width:767px) {

   .container, .container.short {
   width: 420px;

} .container .columns, .container .column {

   margin: 0;

} .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column {

   width: 420px;

}

  1. footer-newsletter input {
   width: 360px;

}

  1. blog-top form {
   width: 300px;

}

  1. blog-top input {
   width: 270px;

}

  1. blog-top #rss {
   width: 100px;
   float: right;

} .categories {

   float: right;

} .column-text {

   -moz-column-count: 1;
   -webkit-column-count: 1;
   column-count: 1;

} }@media only screen and (min-width:320px) and (max-width:580px) {

   #logo, .sticky #logo {
   background-position: 0 -80px;
   top: 10px;
   left: 10px;

}

   #logo1, .sticky #logo1 {
   background-position: 0 -80px;
   top: 10px;
   right: 1px;

} header, header.sticky {

   height: 100px;

} .sticky nav, nav {

   margin-top: 64px;

} nav a {

   padding-left: 5px;
   padding-right: 5px;

}

  1. feature h1 {
   top: 120px;
   font-size: 22px;
   line-height: 30px;

}

  1. tweet .text p {
   font-size: 20px;
   line-height: 24px;

}

  1. work article {
   width: 45%;
   margin: 6px;

}

  1. page-header {
   height: 200px;

}

  1. page-header h1 {
   font-size: 34px;

} .labs #page-header h1 {

   font-size: 25px;

}

  1. page-header.case h2 {
   font-size: 16px;
   font-weight: 500;
   line-height: 20px;

}

  1. work-with-us {
   font-size: 15px;
   text-align: center;

}

  1. work-with-us span {
   background-image: none;

}

  1. contact #message input, #contact #message textarea {
   width: 200px;
   max-width: 200px;

}

  1. fresh ul {
   display: none;

}

  1. blog article iframe {
   height: 200px;

}

  1. process {
   display: none;

} }.container:after {

   content: "\0020";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;

}