/* This file will hold styles for the mobile version of your website (mobile first). */
/* This also can include ANY global CSS that applies site-wide. Unless overwritten by a more specific style rule, CSS declarations in global.css will apply site-wide. */

/*pink: F4848E
green: B4C179
very pale pink: FEF9FA*/

body {
	font-family: 'Ubuntu', sans-serif;
	margin: 0;
	padding: 0;
	font-size: 18px;
	color: #999;
	font-weight: 400;
	}
p {
	margin: 0 0 .7em 0;
	line-height: 1.7em;
	}

/*header*/
#zone-header-wrapper {
	background: hsla(355, 84%, 74%, 0.9);
	padding: 8px 0;
	font-size: 1.1em;
	position: fixed;
	z-index: 9999;
	width: 100%;
	}
.logged-in #zone-header-wrapper {
	z-index: 1;
	}
#zone-header ul {
	margin: 0 auto;
	text-align: center;
	padding: 10px 0;
	}
#zone-header ul li {
	color: #FFF;
	}
#zone-header ul li a {
	text-decoration: none;
	}
#zone-header ul li.last {
	margin-right: 0;
	border-right: none;
	padding: 0.8em 0 0 0;
	}
#zone-header ul li a:link,
#zone-header ul li:visited {
	color: #FFF !important;
	text-decoration: none;
	font-style: normal;
	}
#zone-header ul li:hover {
	color: #FFF !important;
	text-decoration: underline;
	font-style: normal;
	}
 #zone-header ul li:active {
	color: #FFF !important;
	text-decoration: none;
	font-style: normal;
	}
/*branding*/
#zone-branding-wrapper {
	padding-top: 86px;
	}
h1.site-name,
h2.site-name {
	line-height: 0em;
	text-indent: -99999px;
	}
#zone-branding {
	text-align: center;
	padding:  20px 0;
	}
#zone-branding img#logo {
	width: 100%;
	max-width: 450px;
	height: auto;
	}
/*menu*/
#block-responsive-dropdown-menus-main-menu {
	display: none;
	}
#zone-menu ul,
#zone-menu ul li {
	padding: 0;
	margin: 0;
	list-style-type: none;
	list-style-image: none;
	text-decoration: none;
	}
#zone-menu .custom-mobile-menu ul li {
	border-bottom: 1px solid #FFF;
	}
#zone-menu ul li a {
	text-decoration: none;
	font-style: normal;
	}
#zone-menu .custom-mobile-menu ul li a {
	background: #ECE8DE;
	color: #999;
	font-size: 18px;
	padding: 15px 0px;
	text-align: center;
	text-transform: uppercase;
	float: left;
	width: 48%;
	margin: 2px 1%;
	display: inline-block;
	}
#zone-menu .custom-mobile-menu ul li a.active {
	background: #d4d0c7;
	color: #FFF;
	}
/*preface*/

#zone-preface {
	padding-top: 40px;
	padding-bottom: 25px;
	}
.three-round-images {
	width: 100%;
	margin: 0 auto;
	height: auto;
	}

.three-round-images ul li {
	width: 30%;
	height: auto;
	margin-right: 5%;
	float: left;
	}
.three-round-images ul li.last {
	margin-right: 0;
	}
.three-round-images img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	}
/*content*/
#zone-content-wrapper {
	margin-top: 10px;
	padding: 40px 0 40px 0;
	background: #F9F8F3;
	}
#zone-content {
	max-width: 620px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	}
#zone-content a {
	text-decoration: none;
	color: #93A24B;
	border-bottom: 1px dotted #93A24B;
	transition: 0.5s;
	}
#zone-content a:hover {
	text-decoration: none;
	border-bottom: none;
	color: #F4848E;
	}
#zone-content .button a {
	background: #B4C179;
	color: #FFF;
	padding: 20px 40px;
	text-decoration: none;
	display: inline-block;
	transition: 0.5s;
	border-bottom: none;
	letter-spacing: 0.05em;
	border-radius: 5px;
	font-size: 1.2em;
	text-transform: uppercase;
	}
#zone-content .button a:hover {
	background: #F4848E;
	text-decoration: none;
	border-bottom: none;
	}
#zone-content .share-buttons {
	margin-top: 40px;
	}
#zone-content #block-addtoany-addtoany-button a {
	text-decoration: none;
	border: none;
	
	}
h1, h2, h3 {
	color: #7f7f7f;
	font-weight: 500;
	}
h1#page-title,
h1.section-title {
	text-align: center;
	font-size: 1.6em;
	margin-bottom: 1em;
	line-height: 1.2em;
	}
#zone-content h2 {
	 margin-bottom: 1em;
  margin-top: 40px;
  font-size: 1.3em;
  line-height: 1.2em;
	}
h3 {
 margin-bottom: 1em;
 text-tranform: uppercase;
 margin-top: 30px;
 font-size: 1.2em;
}
#zone-content h2 a {
	text-decoration: none;
	color: #999;
	border-bottom: none;
	}

#zone-content ul {
	margin-left: 60px;
	margin-right: 60px;
	}
.page-user #zone-content ul {
	margin-left: 0;
	margin-right: 0;
	}
#zone-content ul li {
	list-style-type: disc;
	margin-bottom: 1em;
	}
#zone-content ol {
	margin-left: 60px;
	}
#zone-content ol li {
	list-style-type: decimal;
	margin-bottom: 18px;
	line-height: 1.8em;
	}
#zone-content img {
	max-width: 100%;
	height: auto;
	padding-top: 10px;
	}
img.one-round {
	max-width: 300px;
	height: auto;
	margin-bottom: 30px;
	border-radius: 50%;
	border: 2px solid #F1EEE2;
	}
#zone-content p.accent {
	color: #F4848E;
	font-weight: 500;
	font-size: 1.2em;
	line-height: 1.5em;
	margin-top: 30px;
	}
#zone-content p.accent a {
		color: #F4848E;
	}
#zone-content p.accent a:hover {
		color: #93A24B;
	}
img.flourish {
	margin-top: 35px;
	}
.snippet {
	font-style: italic;
	}
.snippet-client {
	font-weight: 500;
	font-size: 0.9em;
	margin-bottom: 30px;
	padding-bottom: 50px;
	background-image: url(../../../../default/files/pinkspider-dots.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100px;
	}
.block-in-content {
	margin-bottom: 30px;
	padding-bottom: 50px;
	background-image: url(../../../../default/files/pinkspider-dots.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100px;
	}

/*portfolio/testimonials page*/
.context-portfolio #zone-content .views-row,
.context-testimonials #zone-content .views-row,
.page-blog .views-row,
.page-taxonomy .views-row,
.content-section {
	margin-bottom: 40px;
	padding-bottom: 70px;
	background-image: url(../../../../default/files/pinkspider-dots.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	}
.content-section {
	padding-bottom: 60px;
	}
.context-portfolio #zone-content .field-image-portfolio {
	background: #F5F5F5;
	background-image:url(../images/farmer.png);
	background-repeat: repeat;
	padding: 40px 0;
	margin-bottom: 20px;
	}
.context-portfolio #zone-content img {
	width: 80%;
	height: auto;
	}

.context-terms-conditions #zone-content,
.context-privacy-policy #zone-content {
	text-align: left;
	}
/*blog*/

.node-type-article .field-video {
	margin-bottom: 20px;
	}
footer.submitted,
footer.comment-submitted {
	font-size: 0.9em;
	margin-bottom: 20px;
	font-style: italic;
	text-align: center;
	}
h2.blog-roll-title {
	text-align: center;
	}
h2.blog-roll-title a {
	color: #999;
	}
.field-tags {
	display: inline;
	}
.field-image,
.view-blog img  {
	margin-bottom: 1em;
	}
.field-tags a {
	color: #555555;
	margin-right: 10px;
	}

/*Link to all blog posts*/
.blog-link {
	width: 100%;
	text-align: center;
	margin-top: 40px;
	}
.blog-link a {
	color: #555;
	font-size: 1.2em;
	font-weight: 600;
	}
.blog-link a:hover {
	color: #000;
	text-decoration: none;
	border-bottom: dotted 1px #000;
	}
.smaller {
	font-size: 0.9em;
	font-style: italic;
	}
 .node-type-article #zone-content #block-addtoany-addtoany-button {
	 margin-top: 40px;
	 }

	
/*ARTICLE COMMENTING*/
em.new {
	color: red;
	}
#zone-content nav.links ul,
#zone-content nav.links ul li {
	margin: 0;
	padding: 0;
	}
form#comment-form .username {
	font-style: italic;
	}
#comments.comment-wrapper {
	border-top: 1px solid #EDEDED;
	margin-top: 40px;
	}
article .comment {
	margin-bottom: 20px;
	}
article .comment h3 {
	margin-bottom: 5px;
	
	}
.indented {
	margin-left: 40px;
	}
/*read more*/

#zone-content .read-more,
#zone-postscript .read-more,
.blog.button a {
	text-align: center;
	}

#zone-content .read-more a,
#zone-postscript .read-more a,
.blog.button a {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: #B4C179;
	padding: 10px 15px;
	color: #FFF;
	text-decoration :none;
	border: 2px solid #B4C179;
	display: inline-block;
	font-style: normal;
	margin-top: 20px;
	transition: 0.5s;
	}
#zone-content #block-views-front-page-service-blocks-block .views-row .read-more a,
#zone-postscript #block-views-front-page-service-blocks-block .views-row .read-more a {
	color: #F4848E;
	background-color: #FFF;
	font-weight: 600;
	font-size: 1.1em;
	transition: 0.5s;
	}
#zone-content .read-more a:hover,
#zone-postscript .read-more a:hover,
.blog.button a:hover {
	border: 2px dotted #FFF;
	background: #F4848E;
	}
#zone-content #block-views-front-page-service-blocks-block .views-row .read-more a:hover,
#zone-postscript #block-views-front-page-service-blocks-block .views-row .read-more a:hover {
	border: 2px dotted #B4C179;
	
	}

.context-affordable-website-design #zone-content .read-more.last {
	margin-right: 0;
	}
.context-terms-conditions #zone-content,
.context-privacy-policy #zone-content {
	text-align: left;
	}
p.font-options {
	background: #FFF;
	padding: 40px 0;
	}

/*--webform--*/
.webform-client-form {
	padding: 40px;
	background: #ECE8DE;
	max-width: 400px;
	margin: 0 auto;
	}
.webform-component--your-name input,
.webform-component--phone input,
.webform-component--email input,
.webform-component--message{
	width: 100%;
	max-width: 400px;
	margin-bottom: 20px;
		}
.webform-client-form textarea, 
.webform-client-form select, 
.webform-client-form input[type="text"], 
.webform-client-form input[type="email"] {
	border: none;
	}
#zone-content .webform-component-markup {
	margin-bottom: 40px;
	font-size: 1.2em;
	color: #898989;
	}
.block-webform label {
	font-size: 1.2em;
	display: block;
	color: #898989;
	margin-bottom: 5px;
	font-weight: 400;
	}
#zone-content .webform-component-radios {
	text-align: left;
	}
.webform-component-radios label {
	margin-bottom: 30px;
	margin-top: 20px;
	}
.block-webform .form-type-radio label {
	font-size: 18px;
	margin-top: -2px;

	}
.block-webform .description {
	font-size: 12px;
	}
input.webform-submit,
input#edit-submit {
	border: none;
	border-radius: 2px;
	text-shadow: none;
	background: #B4C179;
	display: inline-block;
	margin-top: 20px;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 18px;
	padding: 15px 20px;
	letter-spacing: 0.05em;
	transition: 0.5s ease;
	color: #FFF;
	}
input.webform-submit:hover,
input#edit-submit:hover {
	background: #F4848E;
	}

textarea, select, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"] {
	font-size: 18px;
	height: 2.5em;
	width: 100%;
	max-width: 400px;
	}
input[type="radio"] {
	float: left;
	margin-right: 10px;
	}
/*postscript*/
#zone-postscript-wrapper {
	padding: 40px 0 40px 0;
	background: #F1EEE2;
	}
#zone-postscript {
	max-width: 620px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	}
#zone-postscript .view-testimonials .testimonial {
	font-style: italic;
	font-size: 1.2em;
	}
.context-web-design-wimbledon #zone-postscript h2.block-title {
	margin-bottom: 1em;
	font-size: 24px;
	text-transform: uppercase;
	}
/*footer*/
#zone-footer-wrapper {
	color: #999;	
	padding-top: 40px;
	line-height: 1.5em;
	text-align: center;
	}

#zone-footer-wrapper .block {
	margin-bottom: 30px;
	}
#zone-footer-wrapper h2.block-title {
	text-transform: uppercase;
	margin-bottom: 15px;
	font-size: 20px;
	color: #F4848E;
	}
#zone-footer-wrapper p {
	margin-bottom: 1em;
	}
#zone-footer-wrapper ul,
#zone-footer-wrapper ul li {
	text-align: center;
	list-style-type: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
	}
#zone-footer-wrapper a {
	color: #999;
	text-decoration: none;
	}
#zone-footer-wrapper .blog.button a {
	color: #FFF;
	padding-left: 30px;
	padding-right: 30px;
	}
#zone-footer-wrapper .block#block-views-social-media-icons-block {
	height: 35px;
	}
#zone-footer-wrapper #block-views-social-media-icons-block div {
	display: inline-block;
	padding: 0 5px;
	}
#region-footer-second {
	font-size: 12px;
	}
#region-footer-second img {
	width: 25px;
	height: auto;
	}

/* TABLET */	
@media screen and (min-width: 740px) {
	
	
#zone-header ul li {
	display: inline;
	margin-right: 40px;
	border-right: 1px solid #FFF;
	padding-right: 40px;
	}
/*branding*/
#zone-branding-wrapper {
	padding-top: 79px;
	}	
/*menu*/
.custom-mobile-menu {
	display: none;
	}
#block-responsive-dropdown-menus-main-menu {
	display: block;
	}
#block-responsive-dropdown-menus-main-menu ul {
line-height: 1.2em;
text-align: center;
margin:0 0 0 0;
	}
#block-responsive-dropdown-menus-main-menu ul li {
	display: inline-block;
	}
#block-responsive-dropdown-menus-main-menu ul li a,
#block-responsive-dropdown-menus-main-menu ul li .nolink {
	color: #999;
	display: inline-block;
	width: auto;
	padding: 0px 15px;
	font-size: 17px;
	letter-spacing: 0.03em;
	text-transform: lowercase;
	}

#block-responsive-dropdown-menus-main-menu ul li a.active {
	background: none;
	color: #F4848E;
	font-weight: 400;
}

#block-responsive-dropdown-menus-main-menu ul.sub-menu {
	margin-top: 0px;
	padding-top: 0px;
	}
#block-responsive-dropdown-menus-main-menu ul ul.sub-menu li a {
	background: #F7F7F7;
	color: #555;
	display: inline-block;
	line-height: 1em;
	padding: 15px;
	font-size: 0.9em;
	text-transform: none;
	width: 100px;
	text-align: left;
	font-weight: normal;
	border-bottom: 1px solid #CCC;
	text-align: center;
	}
#block-responsive-dropdown-menus-main-menu ul ul.sub-menu li.last a {
	border-bottom: none;
	}
#block-responsive-dropdown-menus-main-menu ul.sub-menu li a.active {
	color: #555555;
	font-style: italic;
	font-weight: 400;
}
#block-responsive-dropdown-menus-main-menu ul.sub-menu li a:hover,
#block-responsive-dropdown-menus-main-menu ul.sub-menu li a.active:hover {
	color: #FFF;
	background: hsl(0, 0%, 21%);
	background: #B4C179;
	}

#block-responsive-dropdown-menus-main-menu ul.sub-menu li.last a:hover {
	border-bottom: none;
	}
#zone-content-wrapper {
	margin-top: 40px;
	}
	
/*preface*/

#zone-preface {
	padding-bottom: 0px;
	}
.three-round-images {
	width: 490px;
	height: 140px;
	}

.three-round-images ul li {
	width: 140px;
	height: 140px;
	margin-right: 30px;
	}
.three-round-images img {
	width: 140px;
	height: 140px;
	border-radius: 70px;
	}
}