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

Revision as of 03:06, 20 August 2017 (view source) GFz (Talk | contribs) ← Older edit		Latest revision as of 08:41, 27 October 2017 (view source) GFz (Talk | contribs)
(32 intermediate revisions by 2 users not shown)
Line 22:		Line 22:
	12.2 Galleries		12.2 Galleries
	--------------------------------------------------------------*/		--------------------------------------------------------------*/
−		+	html {
−		+
−	/*--------------------------------------------------------------	+
−	1.0 Reset	+
−	--------------------------------------------------------------*/	+
−		+
−	#page1 html,	+
−	#page1 body,	+
−	#page1 div,	+
−	#page1 span,	+
−	#page1 h1,	+
−	#page1 h2,	+
−	#page1 h3,	+
−	#page1 h4,	+
−	#page1 h5,	+
−	#page1 h6,	+
−	#page1 p,	+
−	#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;	+
−	}	+
−		+
−	#page1 html {	+
	font-size: 62.5%;		font-size: 62.5%;
−	overflow-y: scroll;	+	overflow-x:hidden;
−	-webkit-text-size-adjust: 100%;	+
−	-ms-text-size-adjust: 100%;	+
−		+
	}		}
−	#page1 *,
−	#page1 *:before,
−	#page1 *:after {
−	-webkit-box-sizing: border-box;
−	-moz-box-sizing: border-box;
−	box-sizing: border-box;
−	}
−
−	#page1 article{
−	display: block;
−	}
−
−	#page1 a img {
−	border: 0;
−	}
−
−	#page1 * {
−	margin: 0;
−	}
−
−	#page1 html,
−	#page1 body {
−	height: 100%;
−	}
−
−	#page1.divide img{
−	margin:0px 48% 80px 48%;
−	width:4.8rem;
−
−	}
	/*--------------------------------------------------------------		/*--------------------------------------------------------------
Line 94:		Line 32:
	--------------------------------------------------------------*/		--------------------------------------------------------------*/
−	#page1 body,	+	body {
−	#page1 button,	+
−	#page1 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 42:
	}		}
−	#page1 body {	+	body {
−	background-color:#e8f1f5; ;	+	background-color:#e8f1f5;
	}		}
−	#page1 h1,	+	h1,
−	#page1 h2,	+	h3,
−	#page1 h3,	+	h4,
−	#page1 h4,	+	h5,
−	#page1 h5,	+	h6 {
−	#page1 h6 {	+
	clear: both;		clear: both;
	margin-bottom: 1.500em;		margin-bottom: 1.500em;
	line-height: 1.3;		line-height: 1.3;
		+
		+
	}		}
−	#page1 h1 {	+	h2{
−	font-size: 1.750em;	+	clear: both;
−	font-weight: 700;	+	margin-bottom: 1.500em;
		+	line-height: 1.3;
		+	text-align:center;
		+
		+	}
		+
		+
		+	h1 {
		+	font-size: 2.7 em;
		+	font-weight: normal;
		+	text-align:center;
	}		}
−	#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: 0.85em;
	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;
−	letter-spacing: 0.6px;
−	text-transform: uppercase;
	}		}
−	#page1 p {	+	p {
	font-size: 1.125em;		font-size: 1.125em;
	margin-bottom: 1.500em;		margin-bottom: 1.500em;
	line-height: 1.3;		line-height: 1.3;
	font-weight: 400;		font-weight: 400;
		+	text-align:justify;
		+
	}		}
−		+	/************************字体*******************************/
−	#page1 small {	+
−	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.800em;
	}		}
	}		}
	@media screen and (min-width: 1200px) {		@media screen and (min-width: 1200px) {
−	#page1 h1 {	+	h1 {
−	font-size: 2.625em;	+	font-size: 3.85em;
	}		}
−	#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 133:
	--------------------------------------------------------------*/		--------------------------------------------------------------*/
−	#page1 hr {	+	hr {
	background-color: #ccc;		background-color: #ccc;
	border: 0;		border: 0;
Line 197:		Line 140:
	}		}
−	#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 167:
	--------------------------------------------------------------*/		--------------------------------------------------------------*/
−	#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 176:
	}		}
−	#page1 #pdfviewer{	+	#pdfviewer{
	margin:auto		margin:auto
	}		}
		+
	/*--------------------------------------------------------------		/*--------------------------------------------------------------
	10.1 Posts and pages		10.1 Posts and pages
	--------------------------------------------------------------*/		--------------------------------------------------------------*/
−
	#primary {		#primary {
	background-color: #e8f1f5;<!--背景颜色-->		background-color: #e8f1f5;<!--背景颜色-->
	float: left;		float: left;
−	overflow: hidden;	+	width: 90%;
−	width: 100%;	+
	height: 100%;		height: 100%;
	padding: 50px 10px 0;		padding: 50px 10px 0;
		+	margin:0 auto;
	}		}
−	#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 205:
	}		}
−	#page1 article img {	+	article img {
−	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 223:
	}		}
	<!--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 231:
	}		}
−	#page1 .entry-header hr {	+	.entry-header hr {
	background-color: #2f353c;		background-color: #2f353c;
	border: 0 none;		border: 0 none;
Line 278:		Line 239:
	}		}
−	#page1 hr.short {	+	hr.short {
	display: inline-block;		display: inline-block;
	background-color: #2f353c;		background-color: #2f353c;
Line 287:		Line 248:
	}		}
−	#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 263:
	}		}
−	#page1 .about-main {	+	.about-main {
	width: 80%;		width: 80%;
	max-width: 1200px;		max-width: 1200px;
	height: 100%;		height: 100%;
−	overflow: hidden;	+	margin: 0 auto;
−	margin: 0 auto 100px;	+
	padding: 0 20px;		padding: 0 20px;
	}		}
−	#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 280:
	}		}
−	#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,	+
−	#page1 .approach h1,	+
−	#page1 .process h1,	+
−	#page1 .contact h1 {	+
	font-size: 2.625em;		font-size: 2.625em;
	font-weight: 700;		font-weight: 700;
Line 343:		Line 304:
	}		}
−	#page1 .hello p,	+	#hello p{
−	#page1 .services p,	+	font-size: 1.325em;
−	#page1 .approach p,	+	margin-bottom: 1.500em;
−	#page1 .process p {	+	line-height: 1.5;
		+	font-weight: 400;
		+	text-align:justify;
		+	}
		+
		+
		+	.services p,
		+	.approach p,
		+	.process p {
	font-size: 1.5em;		font-size: 1.5em;
	line-height: 1.3;		line-height: 1.3;
Line 354:		Line 323:
	}		}
−	#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 {	+	#hello h2{
		+	clear: both;
		+	margin-bottom: 1.500em;
		+	line-height: 1.5;
		+	text-align:left;
		+	color: #004a7c;
		+	}
		+
		+	.process h2 {
	font-size: 4.250em;		font-size: 4.250em;
	font-weight: 700;		font-weight: 700;
	}		}
−	#page1 .hello h2,	+	.services h2,
−	#page1 services h2,	+	.approach h2,
−	#page1 .approach h2,	+	.process h3 {
−	#page1 .process h3 {	+
	font-size: 1.500em;		font-size: 1.500em;
	font-weight: 700;		font-weight: 700;
Line 382:		Line 358:
	margin-bottom: 10px;		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) {		@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 378:
	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 394:
	@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 406:
	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 443:
	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 466:
	@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;
	}		}
	}		}

---

Latest revision as of 08:41, 27 October 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

---

*/

html {

   font-size: 62.5%;
   overflow-x:hidden;

}

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

---

*/

body {

   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, h3, h4, h5, h6 {

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

}

h2{

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

}

h1 {

   font-size: 2.7 em;
   font-weight: normal;
   text-align:center;

}

h2 {

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

}

h3 {

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

}

h4 {

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

}

h5 {

   font-size: 0.750em;
   font-weight: 400;

}

p {

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

text-align:justify;

} /************************字体*******************************/ @media screen and (min-width: 600px) {

   h1 {
       font-size: 2.800em;
   }

}

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

   h1 {
       font-size: 3.85em;
   }
   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;
   width: 90%;
   height: 100%;
   padding: 50px 10px 0;
   margin:0 auto;

}

.site-main {

   padding: 0px 20px 0;

}

article {

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

}

article img {

   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%;
   margin: 0 auto;
   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;

}

1. hello h1 {

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

}

1. hello p{

font-size: 1.325em;

   margin-bottom: 1.500em;
   line-height: 1.5;
   font-weight: 400;

text-align:justify; }

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

}

1. hello h2{

clear: both;

   margin-bottom: 1.500em;
   line-height: 1.5;

text-align:left; color: #004a7c; }

.process h2 {

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

}

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

}

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

}