Team:Tianjin/Resources/CSS:maincss

/*-------------------------------------------------------------- >>> TABLE OF CONTENTS:

---

1.0 Reset 2.0 Typography 3.0 Elements 4.0 Forms 5.0 Navigation 5.1 Links 5.2 Menus 6.0 Accessibility 7.0 Alignments 8.0 Clearings 9.0 Widgets 10.0 Content 10.1 Posts and pages 10.2 Asides 10.3 Comments 11.0 Infinite scroll 12.0 Media 12.1 Captions 12.2 Galleries

---

*/

/*-------------------------------------------------------------- 1.0 Reset

---

*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, a{

   border: 0;
   font-family: inherit;
   font-size: 100%;
   font-style: inherit;
   font-weight: inherit;
   margin: 0;
   outline: 0;
   padding: 0;
   vertical-align: baseline;

}

html {

   font-size: 62.5%;
   /* Corrects text resizing oddly in IE6/7 when body font-size is set using em units http://clagnut.com/blog/348/#c790 */
   overflow-y: scroll;
   /* Keeps page centered in all browsers regardless of content height */
   -webkit-text-size-adjust: 100%;
   /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
   -ms-text-size-adjust: 100%;
   /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */

}

• ,

  before,

  after {

   /* apply a natural box layout model to all elements; see http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
   -webkit-box-sizing: border-box;
   /* Not needed for modern webkit but still used by Blackberry Browser 7.0; see http://caniuse.com/#search=box-sizing */
   -moz-box-sizing: border-box;
   /* Still needed for Firefox 28; see http://caniuse.com/#search=box-sizing */
   box-sizing: border-box;

}

article, header, main, section {

   display: block;

}

ol, ul {

   list-style: none;

}

table {

   /* tables still need 'cellspacing="0"' in the markup */
   border-collapse: collapse;
   border-spacing: 0;

}

a img {

   border: 0;

}

• {

   margin: 0;

}

html, body {

   height: 100%;

}

1. page {

   min-height: 100%;
   height: auto !important;
   /* This line and the next line are not necessary unless you need IE6 support */
   height: 100%;
   margin: 0px auto -87px;
   /* the bottom margin is the negative value of the footer's height */

}

.home header {

   margin-top: -50px;

}

.divide img{ margin:0px 48% 80px 48%; width:4.8rem;

}

/*-------------------------------------------------------------- 2.0 Typography

---

*/

body, button, input, select, textarea {

   font-family: "futura pt", "futura-pt", arial, sans-serif;
   font-style: normal;
   font-weight: 300;
   font-size: 16px;
   font-size: 1.6rem;
   line-height: 1.3;
   color: #2f353c;

}

body {

   background-color:#e8f1f5; ;

}

h1, h2, h3, h4, h5, h6 {

   clear: both;
   margin-bottom: 1.500em;
   line-height: 1.3;

}

h1 {

   font-size: 1.750em;
   font-weight: 700;

}

h2 {

   font-size: 1.500em;
   font-weight: 700;

}

h3 {

   font-size: 1.250em;
   font-weight: 700;

}

h4 {

   font-size: 1em;
   font-weight: 700;

}

h5 {

   font-size: 0.750em;
   font-weight: 400;
   letter-spacing: 0.6px;
   text-transform: uppercase;

}

p {

   font-size: 1.125em;
   margin-bottom: 1.500em;
   line-height: 1.3;
   font-weight: 400;

}

small {

   font-size: 1rem

}

@media screen and (min-width: 600px) {

   h1 {
       font-size: 2.000em;
   }

}

@media screen and (min-width: 1200px) {

   h1 {
       font-size: 2.625em;
   }
   h5 {
       font-size: 0.875em;
   }
   p {
       font-size: 1.250em;
   }

}

small {

   font-size: 75%;

}

big {

   font-size: 125%;

}

/*-------------------------------------------------------------- 3.0 Elements

---

*/

hr {

   background-color: #ccc;
   border: 0;
   height: 1px;
   margin-bottom: 1.5em;

}

ul, ol {

   margin: 0;

}

ul {

   list-style: none;

}

ol {

   list-style: decimal;

}

li>ul, li>ol {

   margin-bottom: 0;
   margin-left: 1.5em;

}

figure {

   margin: 0;

}

/*-------------------------------------------------------------- 4.0 Forms

---

*/

textarea {

   overflow: auto;
   /* Removes default vertical scrollbar in IE6/7/8/9 */
   padding-left: 3px;
   vertical-align: top;
   /* Improves readability and alignment in all browsers */
   width: 100%;

}

1. pdfviewer{

margin:auto } /*-------------------------------------------------------------- 10.0 Intro

---

*/

.introduction {

   width: 100%;
   height: 100%;
   float: left;
   background-color: #F8F1E9;
   position: relative;
   overflow: hidden;
   z-index: -1;

}

.innertube {

   width: 2000px;
   height: 1600px;
   background-color: #f8f1e9;
   position: relative;
   z-index: 910;

}

/*-------------------------------------------------------------- 10.1 Posts and pages

---

*/

1. primary {

   background-color: #e8f1f5;
   float: left;
   overflow: hidden;
   width: 100%;
   height: 100%;
   padding: 50px 10px 0;

}

1. work,
2. instagram,
3. home-feed {

   position: relative;
   background-color: #e8f1f5

   overflow: hidden;
   width: 100%;
   height: 100%;
   padding: 0 10px;
   margin-bottom: 50px;

}

1. work .inner,
2. primary .inner,
3. instagram .inner {

   width: 100%;
   max-width: 1400px;
   height: 100%;
   padding: 0;
   margin: 0 auto;
   text-align: center;

}

1. home-feed .inner {

   width: 100%;
   height: 100%;
   padding: 0;
   margin: 0 auto;
   text-align: center;

}

.site-main {

   padding: 0px 20px 0;

}

article {

   width: 100%;
   max-width: 1160px;
   height: 100%;
   margin: 10px auto 0 auto;
   padding: 0;

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

   .page-template-page-we-know article {
       max-width: 640px;
   }

}

article img {

   height: auto;
   max-width: 100%;

}

1. instafeed {

   height: 100%;
   overflow: hidden;
   margin-bottom: 50px;

}

1. instafeed img {

   height: auto;
   max-width: 100%;

}

1. instafeed a {

   position: relative;
   padding: 5px;

}

1. instafeed .video .icon {

   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background: url(../fonts/play.svg) center center no-repeat;

}

.entry-header {

   text-align: center;
   ;

}

.entry-title {

   font-size: 2.625em;
   font-weight: 700;
   line-height: 1;
   margin: 20px 0 40px;
   color: #004a7c;

} .entry-header p {

   font-size: 1.5em;
   line-height: 1.3;
   margin: 0 auto 0.833em;
   width: 100%;
   max-width: 580px;

}

.entry-header hr {

   background-color: #2f353c;
   border: 0 none;
   width: 64px;
   height: 12px;
   margin: 0 auto 40px;

}

hr.short {

   display: inline-block;
   background-color: #2f353c;
   border: 0 none;
   width: 31px;
   height: 7px;
   margin-bottom: 1.500em;

}

.form-content {

   width: 50%;
   margin: 1.5em auto 0;

}

.overview-header {

   float: left;
   width: 100%;
   height: 50px;
   margin-bottom: 20px;
   border-top: 1px solid #c8c3b9;
   border-bottom: 1px solid #c8c3b9;

}

.overview-footer {

   float: left;
   width: 100%;
   height: 100%;
   margin: 20px 0 50px;
   border-top: 1px solid #c8c3b9;
   border-bottom: 1px solid #c8c3b9;

}

.overview-open {

   float: left;
   padding: 15px 0 12px 20px;
   font-size: 0.875em;
   font-weight: 300;
   letter-spacing: .5px;
   cursor: pointer;
   background: url(../images/overview-up.png) 0 center no-repeat;

}

article .entry-content img {

   margin-bottom: 1em;

}

.more-news {

   position: absolute;
   bottom: 1em;
   left: 50%;
   height: 26px;
   width: 26px;

}

.work-pod.journal .date, .news .date {

   font-size: 0.750em;
   font-weight: 700;
   line-height: 1;
   letter-spacing: 0.2px;
   margin-bottom: 10px;

}

.text-center {

   margin: 0 auto;
   width: 100%;
   max-width: 580px;

}

.about-main {

   width: 80%;
   max-width: 1200px;
   height: 100%;
   overflow: hidden;
   margin: 0 auto 100px;
   padding: 0 20px;

}

.about-main article hr, .contact .contact-header hr {

   background-color: #2f353c;
   border: 0 none;
   height: 12px;
   margin: 1.3em auto;
   width: 64px;

}

.hello {

   text-align: center;

}

.services, .approach {

   text-align: center;
   margin-bottom: 180px;

}

.process {

   text-align: center;
   margin-bottom: 90px;

}

.hello h1, .services h1, .approach h1, .process h1, .contact h1 {

   font-size: 2.625em;
   font-weight: 700;
   line-height: 1;
   margin-top: 20px;
   text-align: center;
   color: #004a7c;

}

.hello p, .services p, .approach p, .process p {

   font-size: 1.5em;
   line-height: 1.3;
   letter-spacing: 0.2px;
   max-width: 550px;
   margin: 0 auto 1.3em;

}

.services .content-column p, .approach .content-column p, .process .content-column p {

   font-size: 1em;

}

.services .content-column, .approach .content-column, .process .content-column {

   text-align: left;

}

.process h2 {

   font-size: 4.250em;
   font-weight: 700;

}

.hello h2, .services h2, .approach h2, .process h3 {

   font-size: 1.500em;
   font-weight: 700;
   border-top: 1px solid #c8c4bb;
   border-bottom: 1px solid #c8c4bb;
   padding: 10px 0;
   margin-bottom: 10px;

}

.contact-header {

   text-align: center;

}

.contact-map {

   float: left;
   width: 33%;
   padding: 0 1.25em 0 0;

}

.contact-text {

   float: left;
   width: 33%;
   padding: 0 0.75em 0;

}

.contact-details {

   float: left;
   width: 33%;
   padding: 0 0 0 1.25em;

}

.contact-map {

   height: 350px;

}

1. map-canvas {

   width: 100%;
   height: 100%;

}

.contact-details p {

   font-size: 1.500em;
   font-weight: 500;
   margin-bottom: .4em;
   line-height: 1.3

}

.contact-details hr, .contact-text hr {

   background-color: #ccc;
   border: 0 none;
   height: 1px;
   margin-bottom: 1em;
   margin-top: 1em;

}

.contact-details a {

   text-decoration: none;
   color: #2e343a;

}

.phone, .email, .address, .twitter, .pinterest, .instagram {

   width: 100%;
   padding-left: 50px;

}

.phone:before {

   content: "";
   display: block;
   background: url("../images/contact-phone.svg") 0 center no-repeat;
   width: 30px;
   height: 30px;
   float: left;
   margin: 0 0 0 -48px;
   opacity: .5;

}

.email:before {

   content: "";
   display: block;
   background: url("../fonts/contact-email.svg") 0 center no-repeat;
   width: 30px;
   height: 30px;
   float: left;
   margin: 0 0 0 -48px;
   opacity: .5;

}

.address:before {

   content: "";
   display: block;
   background: url("../fonts/contact-address.svg") 4px top no-repeat;
   width: 30px;
   height: 30px;
   float: left;
   margin: 0 0 0 -48px;
   opacity: .5;

}

.twitter:before {

   content: "";
   display: block;
   background: url("../fonts/contact-twitter.svg") 0 center no-repeat;
   width: 30px;
   height: 30px;
   float: left;
   margin: 0 0 0 -48px;
   opacity: .5;

}

.pinterest:before {

   content: "";
   display: block;
   background: url("../fonts/contact-pinterest.svg") 0 center no-repeat;
   width: 30px;
   height: 30px;
   float: left;
   margin: 0 0 0 -48px;
   opacity: .5;

}

.instagram:before {

   content: "";
   display: block;
   background: url("../fonts/contact-instagram.svg") 0 center no-repeat;
   width: 30px;
   height: 30px;
   float: left;
   margin: 0 0 0 -48px;
   opacity: .5;

}

.contact-text h2 {

   font-size: 1.500em;
   font-weight: 500;
   margin-bottom: 10px;

}

.contact-text p {

   font-size: 1em;
   font-weight: 300;
   margin-bottom: 10px;

}

/*-------------------------------------------------------------- 10.2 Asides

---

*/

.blog .format-aside .entry-title, .archive .format-aside .entry-title {

   display: none;

}

/*-------------------------------------------------------------- 10.3 Comments

---

*/

.comment-content a {

   word-wrap: break-word;

}

.bypostauthor {

   display: block;

}

/*-------------------------------------------------------------- 11.0 Infinite scroll

---

*/

/* Globally hidden elements when Infinite Scroll is supported and in use. */

.infinite-scroll .paging-navigation,

/* Older / Newer Posts Navigation (always hidden) */

.infinite-scroll.neverending .site-footer {

   /* Theme Footer (when set to scrolling) */
   display: none;

}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before */

.infinity-end.neverending .site-footer {

   display: block;

}

/*-------------------------------------------------------------- 12.0 Media

---

*/

.page-content img.wp-smiley, .entry-content img.wp-smiley, .comment-content img.wp-smiley {

   border: none;
   margin-bottom: 0;
   margin-top: 0;
   padding: 0;

}

/* Make sure embeds and iframes fit their containers */

embed, iframe, object {

   max-width: 100%;

}

.video {

   position: relative;
   height: 0;
   overflow: hidden;
   padding-bottom: 56.25%;
   width: 100%;

}

.video iframe {

   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;

}

/*-------------------------------------------------------------- 12.1 Captions

---

*/

.wp-caption {

   margin-bottom: 1.5em;
   max-width: 100%;

}

.wp-caption img[class*="wp-image-"] {

   display: block;
   margin: 0 auto;

}

.wp-caption-text {

   text-align: center;

}

.wp-caption .wp-caption-text {

   margin: 0.8075em 0;

}

.mc4wp-response {

   width: 100%;
   display: inline-block;

}

.mc4wp-form-fields input[type="submit"] {

   background: #eee8db;
   border: 1px solid #2f353c;
   border-radius: 0;
   box-shadow: none;
   color: #2f353c !important;
   cursor: pointer;
   display: inline-block;
   font-size: 1em;
   height: 42px;
   line-height: 1;
   padding: 0;
   width: 100%;
   text-shadow: none;
   text-transform: uppercase;
   -webkit-appearance: button;
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -ms-transform: all 0.5s;
   -o-transition: all 0.5s;
   transition: all 0.5s;

}

.mc4wp-form-fields input[type="submit"]:hover {

   background: #2f353c;
   color: #eee8db !important;

}

.mc4wp-form-fields input[type="email"] {

   background: #e8f1f5

   border: 1px solid #2f353c;
   border-radius: 0;
   color: #2f353c !important;
   font-size: 1em;
   height: 42px;
   line-height: 1;
   padding: 10px;
   width: 100%;

}

/*-------------------------------------------------------------- 12.2 Galleries

---

*/

.gallery {

   margin-bottom: 1.5em;

}

.gallery-item {

   display: inline-block;
   text-align: center;
   vertical-align: top;
   width: 100%;

}

.gallery-columns-2 .gallery-item {

   max-width: 50%;

}

.gallery-columns-3 .gallery-item {

   max-width: 33.33%;

}

.gallery-columns-4 .gallery-item {

   max-width: 25%;

}

.gallery-columns-5 .gallery-item {

   max-width: 20%;

}

.gallery-columns-6 .gallery-item {

   max-width: 16.66%;

}

.gallery-columns-7 .gallery-item {

   max-width: 14.28%;

}

.gallery-columns-8 .gallery-item {

   max-width: 12.5%;

}

.gallery-columns-9 .gallery-item {

   max-width: 11.11%;

}

.gallery-caption {

   display: block;

}

/*

 3D rollovers styles
 Homepage: http://github.com/codepo8/3Drollovers
 Copyright (c) 2011 Christian Heilmann
 Code licensed under the BSD License:
 http://wait-till-i.com/license.txt

• /

.rollover {

   display: inline-block;
   position: relative;

}

.front {

   z-index: 2;
   position: absolute;
   left: 0;
   top: 0;

}

.back {

   z-index: 1;
   position: absolute;
   left: 0;
   top: 0;

}

.rollover:hover .back, .rollover:focus .back {

   z-index: 2;

}

.rollover:hover .front, .rollover:focus .front {

   z-index: 1;

}

.flip .rollover {

   -webkit-perspective: 800px;
   -moz-perspective: 800px;
   -ms-perspective: 800px;
   -o-perspective: 800px;
   perspective: 800px;

}

.flip .cube {

   height: 26px;
   width: 26px;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   transform-style: preserve-3d;
   -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
   -moz-transform: rotateX(0) rotateY(0) rotateZ(0);
   -ms-transform: rotateX(0) rotateY(0) rotateZ(0);
   -o-transform: rotateX(0) rotateY(0) rotateZ(0);
   transform: rotateX(0) rotateY(0) rotateZ(0);
   -webkit-transition: .3s;
   -moz-transition: .3s;
   -ms-transition: .3s;
   -o-transition: .3s;
   transition: .3s;

}

.flip .front {

   -webkit-transform: translate3d(0, 0, 1px);
   -moz-transform: translate3d(0, 0, 1px);
   -ms-transform: translate3d(0, 0, 1px);
   -o-transform: translate3d(0, 0, 1px);
   transform: translate3d(0, 0, 1px);

}

.flip .back {

   -webkit-transform: rotateY(180deg) translate3d(0, 0, 0);
   -moz-transform: rotateY(180deg) translate3d(0, 0, 0);
   -ms-transform: rotateY(180deg) translate3d(0, 0, 0);
   -o-transform: rotateY(180deg) translate3d(0, 0, 0);
   transform: rotateY(180deg) translate3d(0, 0, 0);

}

.flip .rollover:hover .cube, .flip .rollover:focus .cube, .work-pod:hover .cube, .news-summary:hover .cube, .related:hover .cube {

   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
   transform: rotateY(180deg);

}

.up .front {

   -webkit-transform: translate3d(0, 0, 1px);
   -moz-transform: translate3d(0, 0, 1px);
   -ms-transform: translate3d(0, 0, 1px);
   -o-transform: translate3d(0, 0, 1px);
   transform: translate3d(0, 0, 1px);

}

.up .back {

   -webkit-transform: rotateX(180deg) translate3d(0, 0, 0);
   -moz-transform: rotateX(180deg) translate3d(0, 0, 0);
   -ms-transform: rotateX(180deg) translate3d(0, 0, 0);
   -o-transform: rotateX(180deg) translate3d(0, 0, 0);
   transform: rotateX(180deg) translate3d(0, 0, 0);

}

.up .rollover:hover .cube, .up .rollover:focus .cube, .work-pod:hover .up .cube, .news-summary:hover .up .cube, .related:hover .up .cube {

   -webkit-transform: rotateX(180deg);
   -moz-transform: rotateX(180deg);
   -ms-transform: rotateX(180deg);
   -o-transform: rotateX(180deg);
   transform: rotateX(180deg);

}

.profile-mobile h1 {

   font-size: 2.625em;
   font-weight: 700;
   line-height: 1;
   margin-top: 20px;
   text-align: center;

}

.profile-mobile p {

   font-size: 1.250em;
   letter-spacing: 0.2px;
   line-height: 1.3;
   margin: 0 auto 1.3em;
   text-align: center;

}

.profile-mobile strong {

   line-height: 2;

}

.wpcf7 strong {

   padding-bottom: 10px;
   display: inline-block;

}

.wpcf7 input, .wpcf7 textarea {

   width: 100%;
   margin-bottom: 20px;

}

/* Shop */

.shop-main {

   width: 100%;
   max-width: 1400px;
   height: 100%;
   overflow: hidden;
   margin: 0 auto;
   padding-top: 50px;

}

.single-shoppe .entry-content hr {

   background-color: #2f353c;
   border: 0 none;
   height: 2px;
   margin: 30px 0;
   width: 50px;

}

input.wspsc_add_cart_submit[type="submit"] {

   background-color: #e8f1f5

   border: 1px solid #2c333b;
   color: #2c333b;
   padding: 15px 45px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   border-radius: 0;
   box-shadow: none;
   cursor: pointer;
   -webkit-appearance: button;
   font-size: 1em;
   line-height: 1;
   text-shadow: none;
   text-transform: uppercase;

}

.shopping_cart {

   max-width: 660px;
   width: 100%;
   margin: 0 auto;

}

input.wspsc_add_cart_submit[type="submit"]:hover {

   background-color: #2c333b;
   color: #e8f1f5

}

.wspsc_cart_header_image {

   display: none;

}

.wspsc_cart_item_thumb td {

   background-color: #005691;

}

.wspsc_cart_item_thumb a {

   color: #3b4144;

}

.shopping_cart th, .shopping_cart td {

   padding: 10px;
   border-bottom: 5px solid #e8f1f5

   color: #3b4144;
   font-size: 18px;

}

.wspsc_cart_item_thumb td:nth-child(1) {

   width: 60%;

}

.wspsc_cart_item_thumb td:nth-child(2), .wspsc_cart_item_thumb td:nth-child(4) {

   width: 10%;

}

.wspsc_cart_item_thumb td:nth-child(3) {

   width: 20%;

}

.shopping_cart th {

   font-size: 12px;
   font-weight: 400;
   color: #3b4144;

}

.wspsc_cart_item_thumb td:last-of-type {

   background-color: transparent !important;
   ;

}

.wp_cart_empty_cart_section {

   text-align: center;

}

.wpspsc_checkout_form td {

   text-align: right;
   padding-right: 10%;

}

@keyframes spin {

 0% {
   transform: rotate(0deg);
 }
 100% {
   transform: rotate(360deg);
 }

}

@media screen and (max-width: 950px) {

   .overview-overview {
       width: 100%;
   }
   .overview-testimonial,
   .overview-credits {
       width: 50%;
       margin: 20px 0;
   }
   .overview-testimonial h2,
   .overview-testimonial p {
       margin: 0 15px 20px 0;
   }
   .one_fourth {
       width: 50% !important;
   }
   .one_fourth>div {
       padding: 0 20px 30px !important;
   }
   .contact-details {
       padding: 0 0 0 1em;
       width: 50%;
   }
   .contact-text {
       padding: 0 1em 0 0;
       width: 50%;
   }
   .contact-map {
       width: 100%;
       margin-bottom: 1em;
       padding: 0;
   }
   #masonry {
       padding: 0 0 0 14px;
   }
   .logo {
       margin: 9px 0 0 10px;
   }
   .overview-overview h2 {
       margin: 0 0 15px 0;
   }
   .overview-overview p {
       margin-right: 0
   }

}

@media screen and (max-width: 768px) {

   .news-inner hr,
   .news-inner .date,
   .tweet-inner hr {
       display: none;
   }
   .news #masonry,
   .news-summary {
       width: 100%;
   }
   .process .one_fourth {
       height: 300px;
   }
   .layer2,
   .layer3 {
       display: none;
   }
   .layer4 {
       display: block;
       position: absolute;
       top: 50px;
       right: 0;
       bottom: 0px;
       left: 0;
       z-index: 902;
       text-align: center;
   }
   #content {
       margin: 70px auto 0;
   }
   .form-content {
       width: 100%;
   }
   .menu-categories-container ul {
       margin: 80px 0 30px;
   }
   
   

}

.loading {

   border-radius: 50%;
   width: 24px;
   height: 24px;
   border: .25rem solid rgba(222,218,208,.5);
   border-top-color: rgba(222,218,208,1);
   animation: spin 1s infinite linear;
   position: absolute;
   z-index: 5;
   top: 50%;
   left: 50%;
   margin: -12px 0 0 -12px;

}

@media screen and (max-width: 640px) {

   .layer4 {
       display: none;
   }
   .layer6 {
       display: block;
       position: absolute;
       top: 50px;
       right: 0;
       bottom: 0px;
       left: 0;
       z-index: 902;
   }
   .intro-text {
       max-width: 640px;
       padding: 20px;
   }
   .overview-testimonial,
   .overview-credits {
       width: 100%;
   }
   .overview-overview h2,
   .overview-overview p,
   .overview-testimonial h2,
   .overview-testimonial p,
   .overview-credits h2 {
       margin: 0 0 20px 0;
   }
   .entry-header p {
       width: 100%;
   }
   .full_width,
   .one_half,
   .one_third,
   .two_third,
   .one_fourth,
   .three_fourth,
   .one_fifth,
   .two_fifth,
   .three_fifth,
   .four_fifth,
   .one_sixth,
   .five_sixth {
       clear: both;
       margin-bottom: 1em;
       margin-left: 0;
       margin-right: 0;
       width: 100% !important;
       height: 100% !important;
   }
   .one_half>div {
       padding: 20px 0 !important;
   }
   .one_third>div {
       padding: 0 20px 30px !important;
   }
   .contact-details,
   .contact-text {
       padding: 0;
       width: 100%;
   }
   #pod-content {
       padding: 10px 0;
   }
   .site-main {
       padding: 50px 0 0;
   }
   .overview-credits p {
       margin-left: 0;
   }

}

@media screen and (max-width: 480px) {

   .overview-header {
       height: auto;
   }
   .work-pod,
   .news-pod,
   .tweet-pod {
       width: 100%
   }
   .news-summary-image,
   .news-summary-text {
       width: 260px;
   }
   .news-pod .news-inner,
   .tweet-pod .tweet-inner {
       float: none;
       margin: 0 auto;
       width: 260px;
   }
   .hello {
       margin: 60px 0 100px;
   }
   .services,
   .approach {
       margin-bottom: 100px;
   }
   .news-summary-text .date {
       display: none;
   }
   .news-summary-text h2 {
       margin-top: 1em;
   }
   .contact-details,
   .contact-text,
   .contact-map {
       padding: 0;
   }
   .overlay {
       display: none;
   }
   .contact-details p,
   .contact-text h2 {
       font-size: 1.250em;
   }
   .phone:before,
   email:before,
   .address:before {
       background: none;
   }
   .phone,
   .email,
   .address {
       padding-left: 0;
   }
   .footer-content {
       display: none;
   }
   .footer-mobile {
       display: block;
   }

}