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

Revision as of 03:06, 20 August 2017 (view source) GFz (Talk | contribs) ← Older edit		Revision as of 03:08, 20 August 2017 (view source) GFz (Talk | contribs) Newer edit →
Line 28:		Line 28:
	--------------------------------------------------------------*/		--------------------------------------------------------------*/
−	#page1 html,	+	html,
−	#page1 body,	+	body,
−	#page1 div,	+	div,
−	#page1 span,	+	span,
−	#page1 h1,	+	h1,
−	#page1 h2,	+	h2,
−	#page1 h3,	+	h3,
−	#page1 h4,	+	h4,
−	#page1 h5,	+	h5,
−	#page1 h6,	+	h6,
−	#page1 p,	+	p,
−	#page1 a{	+	a{
	border: 0;		border: 0;
	font-family: inherit;		font-family: inherit;
Line 51:		Line 51:
	}		}
−	#page1 html {	+	html {
	font-size: 62.5%;		font-size: 62.5%;
	overflow-y: scroll;		overflow-y: scroll;
Line 59:		Line 59:
	}		}
−	#page1 *,	+	*,
−	#page1 *:before,	+	*:before,
−	#page1 *:after {	+	*:after {
	-webkit-box-sizing: border-box;		-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;		-moz-box-sizing: border-box;
Line 67:		Line 67:
	}		}
−	#page1 article{	+	article{
	display: block;		display: block;
	}		}
−	#page1 a img {	+	a img {
	border: 0;		border: 0;
	}		}
−	#page1 * {	+	* {
	margin: 0;		margin: 0;
	}		}
−	#page1 html,	+	html,
−	#page1 body {	+	body {
	height: 100%;		height: 100%;
	}		}
−	#page1.divide img{	+	#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 */
		+	}
		+
		+	.divide img{
	margin:0px 48% 80px 48%;		margin:0px 48% 80px 48%;
	width:4.8rem;		width:4.8rem;
Line 94:		Line 103:
	--------------------------------------------------------------*/		--------------------------------------------------------------*/
−	#page1 body,	+	body,
−	#page1 button,	+	button,
−	#page1 textarea {	+	input,
		+	select,
		+	textarea {
	font-family: "futura pt", "futura-pt", arial, sans-serif;		font-family: "futura pt", "futura-pt", arial, sans-serif;
	font-style: normal;		font-style: normal;
Line 106:		Line 117:
	}		}
−	#page1 body {	+	body {
	background-color:#e8f1f5; ;		background-color:#e8f1f5; ;
	}		}
−	#page1 h1,	+	h1,
−	#page1 h2,	+	h2,
−	#page1 h3,	+	h3,
−	#page1 h4,	+	h4,
−	#page1 h5,	+	h5,
−	#page1 h6 {	+	h6 {
	clear: both;		clear: both;
	margin-bottom: 1.500em;		margin-bottom: 1.500em;
Line 121:		Line 132:
	}		}
−	#page1 h1 {	+	h1 {
	font-size: 1.750em;		font-size: 1.750em;
	font-weight: 700;		font-weight: 700;
	}		}
−	#page1 h2 {	+	h2 {
	font-size: 1.500em;		font-size: 1.500em;
	font-weight: 700;		font-weight: 700;
	}		}
−	#page1 h3 {	+	h3 {
	font-size: 1.250em;		font-size: 1.250em;
	font-weight: 700;		font-weight: 700;
	}		}
−	#page1 h4 {	+	h4 {
	font-size: 1em;		font-size: 1em;
	font-weight: 700;		font-weight: 700;
	}		}
−	#page1 h5 {	+	h5 {
	font-size: 0.750em;		font-size: 0.750em;
	font-weight: 400;		font-weight: 400;
Line 148:		Line 159:
	}		}
−	#page1 p {	+	p {
	font-size: 1.125em;		font-size: 1.125em;
	margin-bottom: 1.500em;		margin-bottom: 1.500em;
Line 155:		Line 166:
	}		}
−	#page1 small {	+	small {
	font-size: 1rem		font-size: 1rem
	}		}
	@media screen and (min-width: 600px) {		@media screen and (min-width: 600px) {
−	#page1 h1 {	+	h1 {
	font-size: 2.000em;		font-size: 2.000em;
	}		}
Line 166:		Line 177:
	@media screen and (min-width: 1200px) {		@media screen and (min-width: 1200px) {
−	#page1 h1 {	+	h1 {
	font-size: 2.625em;		font-size: 2.625em;
	}		}
−	#page1 h5 {	+	h5 {
	font-size: 0.875em;		font-size: 0.875em;
	}		}
−	#page1 p {	+	p {
	font-size: 1.250em;		font-size: 1.250em;
	}		}
	}		}
−	#page1 small {	+	small {
	font-size: 75%;		font-size: 75%;
	}		}
−	#page1 big {	+	big {
	font-size: 125%;		font-size: 125%;
	}		}
Line 190:		Line 201:
	--------------------------------------------------------------*/		--------------------------------------------------------------*/
−	#page1 hr {	+	hr {
	background-color: #ccc;		background-color: #ccc;
	border: 0;		border: 0;
Line 197:		Line 208:
	}		}
−	#page1 figure {	+	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;		margin: 0;
	}		}
Line 205:		Line 235:
	--------------------------------------------------------------*/		--------------------------------------------------------------*/
−	#page1 textarea {	+	textarea {
	overflow: auto;		overflow: auto;
	/* Removes default vertical scrollbar in IE6/7/8/9 */		/* Removes default vertical scrollbar in IE6/7/8/9 */
Line 214:		Line 244:
	}		}
−	#page1 #pdfviewer{	+	#pdfviewer{
	margin:auto		margin:auto
	}		}
Line 231:		Line 261:
	}		}
−	#page1 .site-main {	+	.site-main {
	padding: 0px 20px 0;		padding: 0px 20px 0;
	}		}
−	#page1 article {	+	article {
	width: 100%;		width: 100%;
	max-width: 1160px;		max-width: 1160px;
Line 243:		Line 273:
	}		}
−	#page1 article img {	+	article img {
	height: auto;		height: auto;
	max-width: 100%;		max-width: 100%;
	}		}
−	#page1 .entry-header {	+	.entry-header {
	text-align: center;		text-align: center;
	;		;
	}		}
−	#page1 .entry-title {	+	.entry-title {
	font-size: 2.625em;		font-size: 2.625em;
	font-weight: 700;		font-weight: 700;
Line 262:		Line 292:
	}		}
	<!--title颜色-->		<!--title颜色-->
−	#page1 .entry-header p {	+	.entry-header p {
	font-size: 1.5em;		font-size: 1.5em;
	line-height: 1.3;		line-height: 1.3;
Line 270:		Line 300:
	}		}
−	#page1 .entry-header hr {	+	.entry-header hr {
	background-color: #2f353c;		background-color: #2f353c;
	border: 0 none;		border: 0 none;
Line 278:		Line 308:
	}		}
−	#page1 hr.short {	+	hr.short {
	display: inline-block;		display: inline-block;
	background-color: #2f353c;		background-color: #2f353c;
Line 287:		Line 317:
	}		}
−	#page1 article .entry-content img {	+	.form-content {
		+	width: 50%;
		+	margin: 1.5em auto 0;
		+	}
		+
		+	article .entry-content img {
	margin-bottom: 1em;		margin-bottom: 1em;
	}		}
−	#page1 text-center {	+	.text-center {
	margin: 0 auto;		margin: 0 auto;
	width: 100%;		width: 100%;
Line 297:		Line 332:
	}		}
−	#page1 .about-main {	+	.about-main {
	width: 80%;		width: 80%;
	max-width: 1200px;		max-width: 1200px;
Line 306:		Line 341:
	}		}
−	#page1 .about-main article hr,	+	.about-main article hr,
−	#page1 .contact .contact-header hr {	+	.contact .contact-header hr {
	background-color: #2f353c;		background-color: #2f353c;
	border: 0 none;		border: 0 none;
Line 315:		Line 350:
	}		}
−	#page1 .hello {	+	.hello {
	text-align: center;		text-align: center;
	}		}
−	#page1 .services,	+	.services,
−	#page1 .approach {	+	.approach {
	text-align: center;		text-align: center;
	margin-bottom: 180px;		margin-bottom: 180px;
	}		}
−	#page1 .process {	+	.process {
	text-align: center;		text-align: center;
	margin-bottom: 90px;		margin-bottom: 90px;
	}		}
−	#page1 .hello h1,	+	.hello h1,
−	#page1 .services h1,	+	.services h1,
−	#page1 .approach h1,	+	.approach h1,
−	#page1 .process h1,	+	.process h1,
−	#page1 .contact h1 {	+	.contact h1 {
	font-size: 2.625em;		font-size: 2.625em;
	font-weight: 700;		font-weight: 700;
Line 343:		Line 378:
	}		}
−	#page1 .hello p,	+	.hello p,
−	#page1 .services p,	+	.services p,
−	#page1 .approach p,	+	.approach p,
−	#page1 .process p {	+	.process p {
	font-size: 1.5em;		font-size: 1.5em;
	line-height: 1.3;		line-height: 1.3;
Line 354:		Line 389:
	}		}
−	#page1 .services .content-column p,	+	.services .content-column p,
−	#page1 .approach .content-column p,	+	.approach .content-column p,
−	#page1 .process .content-column p {	+	.process .content-column p {
	font-size: 1em;		font-size: 1em;
	}		}
−	#page1 .services .content-column,	+	.services .content-column,
−	#page1 .approach .content-column,	+	.approach .content-column,
−	#page1 .process .content-column {	+	.process .content-column {
	text-align: left;		text-align: left;
	}		}
−	#page1 .process h2 {	+	.process h2 {
	font-size: 4.250em;		font-size: 4.250em;
	font-weight: 700;		font-weight: 700;
	}		}
−	#page1 .hello h2,	+	.hello h2,
−	#page1 services h2,	+	.services h2,
−	#page1 .approach h2,	+	.approach h2,
−	#page1 .process h3 {	+	.process h3 {
	font-size: 1.500em;		font-size: 1.500em;
	font-weight: 700;		font-weight: 700;
Line 434:		Line 469:
	@media screen and (max-width: 768px) {		@media screen and (max-width: 768px) {
−	#page1 .process .one_fourth {	+	.process .one_fourth {
	height: 300px;		height: 300px;
	}		}
−	#page1 .layer2,	+	.layer2,
−	#page1 .layer3 {	+	.layer3 {
	display: none;		display: none;
	}		}
−	#page1 .layer4 {	+	.layer4 {
	display: block;		display: block;
	position: absolute;		position: absolute;
Line 451:		Line 486:
	text-align: center;		text-align: center;
	}		}
−	#page1  #content {	+	#content {
	margin: 70px auto 0;		margin: 70px auto 0;
	}		}
−	#page1 .form-content {	+	.form-content {
	width: 100%;		width: 100%;
	}		}
−	#page1 .menu-categories-container ul {	+	.menu-categories-container ul {
	margin: 80px 0 30px;		margin: 80px 0 30px;
	}		}
Line 467:		Line 502:
	@media screen and (max-width: 640px) {		@media screen and (max-width: 640px) {
−	#page1  .layer4 {	+	.layer4 {
	display: none;		display: none;
	}		}
−	#page1 .layer6 {	+	.layer6 {
	display: block;		display: block;
	position: absolute;		position: absolute;
Line 479:		Line 514:
	z-index: 902;		z-index: 902;
	}		}
−	#page1 .intro-text {	+	.intro-text {
	max-width: 640px;		max-width: 640px;
	padding: 20px;		padding: 20px;
	}		}
−	#page1 .overview-testimonial,	+	.overview-testimonial,
−	#page1 .overview-credits {	+	.overview-credits {
	width: 100%;		width: 100%;
	}		}
−	#page1 .overview-overview h2,	+	.overview-overview h2,
−	#page1  .overview-overview p,	+	.overview-overview p,
−	#page1 .overview-testimonial h2,	+	.overview-testimonial h2,
−	#page1 .overview-testimonial p,	+	.overview-testimonial p,
−	#page1  .overview-credits h2 {	+	.overview-credits h2 {
	margin: 0 0 20px 0;		margin: 0 0 20px 0;
	}		}
−	#page1 .entry-header p {	+	.entry-header p {
	width: 100%;		width: 100%;
	}		}
−	#page1  .full_width,	+	.full_width,
−	#page1 .one_half,	+	.one_half,
−	#page1 .one_third,	+	.one_third,
−	#page1  .two_third,	+	.two_third,
−	#page1 .one_fourth,	+	.one_fourth,
−	#page1 three_fourth,	+	.three_fourth,
−	#page1 .one_fifth,	+	.one_fifth,
−	#page1 .two_fifth,	+	.two_fifth,
−	#page1 .three_fifth,	+	.three_fifth,
−	#page1 .four_fifth,	+	.four_fifth,
−	#page1 .one_sixth,	+	.one_sixth,
−	#page1 .five_sixth {	+	.five_sixth {
	clear: both;		clear: both;
	margin-bottom: 1em;		margin-bottom: 1em;
Line 516:		Line 551:
	height: 100% !important;		height: 100% !important;
	}		}
−	#page1 .one_half>div {	+	.one_half>div {
	padding: 20px 0 !important;		padding: 20px 0 !important;
	}		}
−	#page1 .one_third>div {	+	.one_third>div {
	padding: 0 20px 30px !important;		padding: 0 20px 30px !important;
	}		}
−	#page1 .contact-details,	+	.contact-details,
−	#page1 .contact-text {	+	.contact-text {
	padding: 0;		padding: 0;
	width: 100%;		width: 100%;
	}		}
−	#page1  #pod-content {	+	#pod-content {
	padding: 10px 0;		padding: 10px 0;
	}		}
−	#page1 .site-main {	+	.site-main {
	padding: 50px 0 0;		padding: 50px 0 0;
	}		}
−	#page1 .overview-credits p {	+	.overview-credits p {
	margin-left: 0;		margin-left: 0;
	}		}
Line 539:		Line 574:
	@media screen and (max-width: 480px) {		@media screen and (max-width: 480px) {
−	#page1 .overview-header {	+	.overview-header {
	height: auto;		height: auto;
	}		}
−	#page1 .work-pod,	+	.work-pod,
−	#page1 .news-pod,	+	.news-pod,
−	#page1 .tweet-pod {	+	.tweet-pod {
	width: 100%		width: 100%
	}		}
−	#page1 .news-summary-image,	+	.news-summary-image,
−	#page1 .news-summary-text {	+	.news-summary-text {
	width: 260px;		width: 260px;
	}		}
−	#page1 .news-pod .news-inner,	+	.news-pod .news-inner,
−	#page1 .tweet-pod .tweet-inner {	+	.tweet-pod .tweet-inner {
	float: none;		float: none;
	margin: 0 auto;		margin: 0 auto;
	width: 260px;		width: 260px;
	}		}
−	#page1 .hello {	+	.hello {
	margin: 60px 0 100px;		margin: 60px 0 100px;
	}		}
−	#page1 .services,	+	.services,
−	#page1 .approach {	+	.approach {
	margin-bottom: 100px;		margin-bottom: 100px;
	}		}
−	#page1 .news-summary-text .date {	+	.news-summary-text .date {
	display: none;		display: none;
	}		}
−	#page1 .news-summary-text h2 {	+	.news-summary-text h2 {
	margin-top: 1em;		margin-top: 1em;
	}		}
−	#page1 .contact-details,	+	.contact-details,
−	#page1 .contact-text,	+	.contact-text,
−	#page1 .contact-map {	+	.contact-map {
	padding: 0;		padding: 0;
	}		}
−		+	.overlay {
−	#page1 .contact-details p,	+	display: none;
−	#page1 .contact-text h2 {	+	}
		+	.contact-details p,
		+	.contact-text h2 {
	font-size: 1.250em;		font-size: 1.250em;
	}		}
−	#page1 .phone:before,	+	.phone:before,
−	#page1 email:before,	+	email:before,
−	#page1.address:before {	+	.address:before {
	background: none;		background: none;
	}		}
−	#page1 .phone,	+	.phone,
−	#page1 .email,	+	.email,
−	#page1 .address {	+	.address {
	padding-left: 0;		padding-left: 0;
	}		}
−	#page1 .footer-content {	+	.footer-content {
	display: none;		display: none;
	}		}
−	#page1 .footer-mobile {	+	.footer-mobile {
	display: block;		display: block;
	}		}
	}		}

---

Revision as of 03:08, 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%;
   overflow-y: scroll;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
   

}

• ,

  before,

  after {

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

}

article{

   display: block;

}

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

}

.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: 768px) {

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

}