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

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

---

Revision as of 03:06, 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

---

*/

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

}