Difference between revisions of "Team:Tianjin/Resources/CSS:maincss"

Line 271: Line 271:
 
margin:auto
 
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
 
10.1 Posts and pages
Line 306: Line 284:
 
     padding: 50px 10px 0;
 
     padding: 50px 10px 0;
 
}
 
}
−
 
−
#work,
 
−
#instagram,
 
−
#home-feed {
 
−
    position: relative;
 
−
    background-color: #e8f1f5
 
−
;
 
−
    overflow: hidden;
 
−
    width: 100%;
 
−
    height: 100%;
 
−
    padding: 0 10px;
 
−
    margin-bottom: 50px;
 
−
}
 
−
 
−
#work .inner,
 
−
#primary .inner,
 
−
#instagram .inner {
 
−
    width: 100%;
 
−
    max-width: 1400px;
 
−
    height: 100%;
 
−
    padding: 0;
 
−
    margin: 0 auto;
 
−
    text-align: center;
 
−
}
 
−
 
−
#home-feed .inner {
 
−
    width: 100%;
 
−
    height: 100%;
 
−
    padding: 0;
 
−
    margin: 0 auto;
 
−
    text-align: center;
 
−
}
 
−
 
  
 
.site-main {
 
.site-main {
Line 350: Line 295:
 
     margin: 10px auto 0 auto;
 
     margin: 10px auto 0 auto;
 
     padding: 0;
 
     padding: 0;
−
}
 
−
@media screen and (max-width: 1000px) {
 
−
    .page-template-page-we-know article {
 
−
        max-width: 640px;
 
−
    }
 
 
}
 
}
  
Line 360: Line 300:
 
     height: auto;
 
     height: auto;
 
     max-width: 100%;
 
     max-width: 100%;
−
}
 
−
 
−
#instafeed {
 
−
    height: 100%;
 
−
    overflow: hidden;
 
−
    margin-bottom: 50px;
 
−
}
 
−
 
−
#instafeed img {
 
−
    height: auto;
 
−
    max-width: 100%;
 
−
}
 
−
 
−
#instafeed a {
 
−
    position: relative;
 
−
    padding: 5px;
 
−
}
 
−
 
−
#instafeed .video .icon {
 
−
    position: absolute;
 
−
    top: 0;
 
−
    right: 0;
 
−
    bottom: 0;
 
−
    left: 0;
 
−
    background: url(../fonts/play.svg) center center no-repeat;
 
 
}
 
}
  
Line 429: Line 344:
 
     width: 50%;
 
     width: 50%;
 
     margin: 1.5em auto 0;
 
     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 {
 
article .entry-content img {
 
     margin-bottom: 1em;
 
     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;
 
 
}
 
}
  
Line 571: Line 441:
 
     margin-bottom: 10px;
 
     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;
 
−
}
 
−
 
−
#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
 
12.2 Galleries
Line 916: Line 490:
 
.gallery-caption {
 
.gallery-caption {
 
     display: block;
 
     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);
 
−
  }
 
 
}
 
}
  
Line 1,270: Line 577:
 
      
 
      
 
}
 
}
−
 
−
 
−
 
−
.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;
 
−
}
 
−
 
  
  

Revision as of 02:36, 20 August 2017

/*-------------------------------------------------------------- >>> 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.1 Posts and pages

*/


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

}

.site-main { 

   padding: 0px 20px 0;

}

article { 

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

}

article img { 

   height: auto;
   max-width: 100%;

}

.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;

}

article .entry-content img { 

   margin-bottom: 1em;

}

.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;

} /*-------------------------------------------------------------- 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;

}

@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;
   }

}


@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;
   }

}