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

---

*/

1. page1 html,
2. page1 body,
3. page1 div,
4. page1 span,
5. page1 h1,
6. page1 h2,
7. page1 h3,
8. page1 h4,
9. page1 h5,
10. page1 h6,
11. page1 p,
12. page1 a{

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

}

1. page1 html {

   font-size: 62.5%;
   overflow-y: scroll;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
   

}

1. page1 *,
2. page1 *:before,
3. page1 *:after {

   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;

}

1. page1 article{

   display: block;

}

1. page1 a img {

   border: 0;

}

1. page1 * {

   margin: 0;

}

1. page1 html,
2. page1 body {

   height: 100%;

}

1. page1.divide img{

margin:0px 48% 80px 48%; width:4.8rem;

}

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

---

*/

1. page1 body,
2. page1 button,
3. page1 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;

}

1. page1 body {

   background-color:#e8f1f5; ;

}

1. page1 h1,
2. page1 h2,
3. page1 h3,
4. page1 h4,
5. page1 h5,
6. page1 h6 {

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

}

1. page1 h1 {

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

}

1. page1 h2 {

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

}

1. page1 h3 {

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

}

1. page1 h4 {

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

}

1. page1 h5 {

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

}

1. page1 p {

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

}

1. page1 small {

   font-size: 1rem

}

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

   #page1 h1 {
       font-size: 2.000em;
   }

}

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

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

}

1. page1 small {

   font-size: 75%;

}

1. page1 big {

   font-size: 125%;

}

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

---

*/

1. page1 hr {

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

}

1. page1 figure {

   margin: 0;

}

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

---

*/

1. page1 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. page1 #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;

}

1. page1 .site-main {

   padding: 0px 20px 0;

}

1. page1 article {

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

}

1. page1 article img {

   height: auto;
   max-width: 100%;

}

1. page1 .entry-header {

   text-align: center;
   ;

}

1. page1 .entry-title {

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

}

1. page1 .entry-header p {

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

}

1. page1 .entry-header hr {

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

}

1. page1 hr.short {

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

}

1. page1 article .entry-content img {

   margin-bottom: 1em;

}

1. page1 text-center {

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

}

1. page1 .about-main {

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

}

1. page1 .about-main article hr,
2. page1 .contact .contact-header hr {

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

}

1. page1 .hello {

   text-align: center;

}

1. page1 .services,
2. page1 .approach {

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

}

1. page1 .process {

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

}

1. page1 .hello h1,
2. page1 .services h1,
3. page1 .approach h1,
4. page1 .process h1,
5. page1 .contact h1 {

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

}

1. page1 .hello p,
2. page1 .services p,
3. page1 .approach p,
4. page1 .process p {

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

}

1. page1 .services .content-column p,
2. page1 .approach .content-column p,
3. page1 .process .content-column p {

   font-size: 1em;

}

1. page1 .services .content-column,
2. page1 .approach .content-column,
3. page1 .process .content-column {

   text-align: left;

}

1. page1 .process h2 {

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

}

1. page1 .hello h2,
2. page1 services h2,
3. page1 .approach h2,
4. page1 .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: 768px) {

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

}

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

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

}

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

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

}