/* CSS Document */
#mobile:not( .mm-menu ) {display: none;}
.EditMode .columns {-webkit-column-count: auto; -moz-column-count: auto; column-count:auto;}
button:focus { outline:none !important; }
* {box-sizing: border-box; background-repeat:no-repeat;}
.stButton .stLarge:hover {background-position:0px !important;}
a[x-apple-data-detectors] {
  color: inherit !important; /* Or your desired color */
  text-decoration: none !important;
}

/* ----- HTML STYLES ----- */
/* undo default styling of common (X)HTML browsers */
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,td,tr,th,td, select {margin:0px; padding:0px; border:none;}
p, li, a, input, select {font-family:"proxima-nova", Arial, sans-serif; color:#7f7f7f;}
p a {color:#c9d526;}
h1,h2,h3,h4,h5,h6, h1 a, h2 a, h3 a ,h4 a, h5 a, h6 a {font-weight:normal; font-family:"proxima-nova", Arial, sans-serif; color:#7f7f7f; line-height:1.3em;}
a img,:link img,:visited img { border:none; }
address {font-style:normal;}
.ErrorLabel {display:none;}
input {-webkit-appearance: none;}
.videoWrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; margin-bottom:40px; }
.videoWrapper iframe {position: absolute; top: 0;left: 0; width: 100%; height: 100%;}
.middle {display: table-cell; vertical-align: middle;}

#container {position: relative; max-width: 100%; margin: 0px auto; text-align: left;}
#container>div {min-width:320px; width: 100%; max-width: 100%; float:left; position:relative;}
.wrapper {margin: 0 auto; width: 1400px; max-width: 100%;}
.content {float: left; width: 90%; max-width: 100%; margin:0 5%; position:relative;}

p {font-size:14px; line-height:1.4em;}
.top {margin-top:-74px; padding-top:74px;}
.margin {padding:40px 0;}
.wide {margin-bottom:40px;}
.center {text-align:center;}

@media only screen and (min-width: 640px) {
.margin {padding:50px 0;}
p {font-size:16px;}
.top {margin-top:-84px; padding-top:84px;}
  }

@media only screen and (min-width: 1024px) {
.margin {padding:60px 0;}
p {font-size:18px;}
  }

.copy h1 {color:#6DBCA7; font-size:32px; margin-bottom:20px;}
.copy h2 {color:#6DBCA7; font-size:18px; margin-bottom:20px;}
.copy h3 {}
.copy h4 {}
.copy ul {margin-bottom:16px;}
.copy ul li {font-size:14px; line-height:1.4em; margin-bottom:4px;list-style-type:disc; margin-left:20px;}
.copy p {margin-bottom:20px;}
.copy table td {vertical-align:top; padding-right:15px; font-family:"proxima-nova", Arial, sans-serif; color:#ffffff; font-size:14px; line-height:1.4em; border-bottom:1px solid #ffffff;}
.copy table td:nth-child(1) {width:65%;}

@media only screen and (min-width: 768px) {
.copy h1 {font-size:36px;}
.copy h2 {font-size:20px;}
.copy table td {font-size:16px;}
	.copy ul li {font-size:16px;}
  }

@media only screen and (min-width: 1024px) {
.copy h1 {font-size:40px;}
.copy h2 {font-size:22px;}
.copy table td {font-size:18px;}
	.copy ul li {font-size:18px; }
  }



ul#menu-mainnav {display:none;float:right; margin-top:32px;}
ul#menu-mainnav>li {float:left; padding-left:10px;}
ul#menu-mainnav>li>a {color:#ffffff; font-size:17px; font-weight:bold;padding:3px 15px;}
ul#menu-mainnav>li>a:hover, ul#menu-mainnav>li.Highlighted>a  {background-color:#ffffff; color:#007dc5; -webkit-border-radius: 20px; border-radius: 20px;}

a#navButton {margin-top:12px; float:right; position:relative; display:none; height:50px; color:#FFFFFF; font-size:16px; text-transform:lowercase;  background-image:url(/stp/media/images/hamburger-white.png); background-repeat:no-repeat; background-position:center center; width:60px;}
a#navButton span {color:#2d7248; display:none; position:absolute; left:-75px; top:15px; font-family:"bebas_neue_regular",sans-serif; text-transform:lowercase; letter-spacing:2px;  font-size:18px;}

@media only screen and (min-width: 640px) {
  a#navButton {margin-top:18px;}
  }
@media only screen and (min-width: 1024px) {
  a#navButton {display:none;}
  ul#menu-mainnav {display:block;}
  }

#footer {background-color:#27354c;}
ul#menu-footernav {float:left;  margin-bottom:80px;}
ul#menu-footernav li {line-height:18px; height:18px; float:left; padding-right:15px; margin-right:15px; border-right:1px solid #ffffff;}
ul#menu-footernav li:last-child {padding:0px; margin:0px; border:0px;}
ul#menu-footernav li a {color:#ffffff; font-weight:bold; }
#footer p.copyright {color:#ffffff; clear:left;}

#navigation {background-color:rgba(109,188,167,1.0); height:74px; }
#navigation a.home {position:relative; width:100px; z-index:100; float:left; display:inline-block; padding:0px 5px 0px 5px; background-color:#ffffff; -webkit-box-shadow: 3px 3px 10px 1px #000000; box-shadow: 3px 3px 10px 1px #000000; -webkit-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;}
#navigation a.home img {width:100%;}
#navigation p.phone {z-index:100; color:#ffffff; font-weight:300; font-size:18px; position:absolute; top:108px; right:11px; margin-right:-5.5555%;}
#navigation a.contact {display:none;}
#navigation a.windowLink {color:#ffffff; font-size:14px; font-weight:bold; background-color:#007dc5; padding:10px 10px; float:right; margin-right:-5.5555%;}
#menu {background-color:rgba(49,128,107,0.6); height:74px; z-index:10;}

@media only screen and (min-width: 640px) {
#navigation {height:84px;}
#navigation a.home {width:auto; padding:0px 5px 0px 5px; }
#navigation a.windowLink {font-size:16px; padding:12px 20px;}
#navigation p.phone {font-size:22px; position:absolute; top:112px; right:20px; margin-right:-5.5555%;}
#menu {height:84px;}
  }

@media only screen and (min-width: 1024px) {
#navigation a.contact {display:block; color:#ffffff; font-size:17px; font-weight:bold; float:right;  display:inline-block; margin:16px 30px 0 0;}
#navigation a.windowLink {font-size:18px; padding:16px 30px; margin-right:0px;}
#navigation p.phone {font-size:30px; position:absolute; top:22px; left:190px; margin:0px; right:auto;}
  }


#banner {overflow:hidden; float:left; background-image:url(/wp-content/themes/stpaccess/assets/header-cherry-picker.jpg); background-size:cover;} 
#banner .cherryHeader {display:block; float:left; width:100%; padding:50px 0;}
#banner .cherryHeader h1 {color:#ffffff; font-size:40px; font-weight:300;  margin-bottom:20px; line-height:40px;}
#banner .cherryHeader h2 {color:#ffffff; font-size:25px; font-size:300;}
#banner .cherryHeader p {color:#ffffff; font-size:20px; font-size:300; margin-bottom:20px;}
#banner .stripe {float:left;  background-color:rgba(49,128,107,0.6); padding:20px 5% 0 5%; width:111.1111%; margin-left:-5.5555%;}
#banner .stripe h3 {font-size:30px; color:#ffffff; font-weight:300; margin-bottom:20px; text-align:center;}
#banner .thirds {float:left; background-color:#5fbda8; width:111.1111%; margin-left:-5.55%; padding:20px 5% 0px 5%;}
#banner .third {float:left; width:100%;  margin-bottom:30px; text-align:center;}
#banner .third h4 {font-size:20px; color:#ffffff; margin-bottom:10px; font-weight:bold;}
#banner .third p {color:#ffffff; font-size:16px; font-weight:300;}

@media only screen and (min-width: 640px) {
#banner .stripe {padding:30px 0 0 0;}
#banner .cherryHeader h1 {font-size:52px; line-height:52px;}
#banner .cherryHeader h2 {font-size:35px;}
#banner .cherryHeader p {font-size:25px;}
#banner .stripe h3 {font-size:35px; margin-bottom:30px;}
#banner .thirds {background-color:transparent; padding:0px; margin:0px; width:100%;}
#banner .third {width:33.3333%; border-right:1px solid #ffffff; padding:0 5%;  margin-bottom:45px;}
#banner .third:last-child {border-right:0px;}
#banner .third h4 {font-size:24px;margin-bottom:15px;}
#banner .third p {font-size:16px;}
  }

@media only screen and (min-width: 640px) and (max-width:1023px) {
#banner .cherryHeader {float:right; margin:30px 0; text-align:center; padding:65px; background-color:#f7a700; -webkit-border-radius: 600px; border-radius: 600px; width:450px; height:450px; }
#banner .cherryHeader h1 {font-size:45px; line-height:45px;}
#banner .cherryHeader h2 {font-size:38px; }
#banner .cherryHeader p {font-size:25px;}
  }


@media only screen and (min-width: 1024px) {
#banner {height:1060px;} 
#banner .content {height:976px;}
#banner .cherryHeader {text-align:center; display:inline-block; float:right; width:676px; height:437px; background-image:url(/wp-content/themes/stpaccess/assets/bubble.png); background-position:center bottom; background-size:contain; padding:20px 100px 0px 100px;}
#banner .cherryHeader h1 {font-size:60px; line-height:60px;}
#banner .cherryHeader h2 {font-size:45px; margin-bottom:-3px;}
#banner .cherryHeader p {font-size:30px; margin-bottom:10px;}
#banner .stripe {padding-top:40px;}
#banner .stripe {position:absolute; bottom:0px; background-color:rgba(49,128,107,0.6); padding:30px 0 0 0; width:100%; margin-left:0%;}
#banner .stripe:before {content:''; background-color:rgba(49,128,107,0.6); position: absolute; top: 0; bottom: 0; width: 9600px; right: 100%; z-index: 1;}
#banner .stripe:after {content:''; background-color:rgba(49,128,107,0.6); position: absolute; top: 0; bottom: 0; width: 9600px; left: 100%; z-index: 1;}
#banner .stripe h3 {font-size:40px; margin-bottom:40px;}
#banner .third {margin-bottom:60px;}
#banner .third h4 {font-size:26px; margin-bottom:20px;}
#banner .third p {font-size:18px;}
  }

#cleaning {text-align:center;}
#cleaning .third {display:inline-block; vertical-align:top; width:100%; border-right:1px solid #ffffff; text-align:left; margin-bottom:40px; float:left;}
#cleaning .third:last-child {margin-bottom:0px;}
#cleaning .third img {width:100%; margin-bottom:20px;}
#cleaning .third h3 {font-size:26px; color:#000000; margin-bottom:20px; font-weight:bold;}
#cleaning .third h4 {font-size:18px; color:#6DBCA7; margin-bottom:16px;}

@media only screen and (min-width: 640px) {
#cleaning .third {width:50%;  padding:0 3%;}
#cleaning .third h3 {font-size:28px; margin-bottom:25px;}
#cleaning .third h4 {font-size:20px; margin-bottom:18px;}
#cleaning .third img {margin-bottom:25px;}
  }
@media only screen and (min-width: 1024px) {
#cleaning .third {width:33.3333%; margin-bottom:0px;}
#cleaning .third h3 {font-size:30px; margin-bottom:30px;}
#cleaning .third h4 {font-size:22px; margin-bottom:30px;}
#cleaning .third img {margin-bottom:30px;}
  }


#quote {background-image:url(/wp-content/themes/stpaccess/assets/quote-background.jpg); background-size:cover; background-position:center center; text-align:center;}
#quote h2 {color:#ffffff; font-size:32px; font-weight:300; margin-bottom:30px;}
#contactForm input[type=text] {width:100%; padding:10px; font-size:18px; font-weight:normal; font-family:"proxima-nova", Arial, sans-serif; color:#007dc5; font-weight:bold; border-radius:0px; border:0px;}
#contactForm input[type=email] {width:100%; padding:10px; font-size:18px; font-weight:normal; font-family:"proxima-nova", Arial, sans-serif; color:#007dc5; font-weight:bold;  border-radius:0px; border:0px;}
#contactForm button[type=submit] {display:inline-block; background-color:#007dc5; color:#ffffff; font-size:18px; font-weight:normal; font-family:"proxima-nova", Arial, sans-serif; padding:10px 30px; margin-bottom:30px; border-radius:0px; border:0px;}
.wpforms-container ::-webkit-input-placeholder { /* Chrome and Safari */
   color: #007dc5 !important;
}
#quote h4 {color:#ffffff; font-size:24px; font-weight:300;}
#quote h4 {color:#ffffff; font-size:24px; font-weight:300;}
#quote .wpforms-error {color:#fff; font-size:18px; font-weight:normal; font-family:"proxima-nova", Arial, sans-serif;}

@media only screen and (min-width: 640px) {
#quote h2 {font-size:36px;}
#quote h4 {font-size:26px;}
  }
@media only screen and (min-width: 1024px) {
#quote h2 {font-size:40px;}
#quote h4 {font-size:28px;}
  }

.cherryPicker {float:left; margin-bottom:20px;}
.cherryPicker:last-child {margin-bottom:0px;}
.cherryPicker .image {float:left; width:100%; height:288px; background-size:cover; background-position:center;}
.cherryPicker .copy {float:left; width:100%; background-color:#007dc5; padding:3% 4%;}
.cherryPicker .copy h3 {color:#ffffff; font-size:30px; margin-bottom:20px; width:100%; float:left;}
.cherryPicker .copy p {color:#ffffff;}
.cherryPicker .copy table {margin-top:20px;}
.cherryPicker .copy .left {float:left; width:100%; }
.cherryPicker .copy .right {float:right; width:100%;}
.cherryPicker:nth-child(odd) .copy {background-color:#6DBCA7;}

@media only screen and (min-width: 640px) {
.cherryPicker {display:flex;}
.cherryPicker .image {float:left; height:auto; width:50%; flex-grow: 1;}
.cherryPicker .copy {float:left; width:50%;}
  }
@media only screen and (min-width: 1024px) {
.cherryPicker .image {width:33.3333%;}
.cherryPicker .copy {width:66.6666%;}
.cherryPicker .copy .left {width:50%; padding-right:5%; border-right:1px solid #ffffff;}
.cherryPicker .copy .right {width:45%;}
  }

#testimonial {background-image:url(/wp-content/themes/stpaccess/assets/testimonial-banner.jpg); background-size:cover; background-position:center;}
#testimonial h3 {color:#ffffff; font-size:32px; text-align:center; font-weight:300; margin-bottom:40px;}
#testimonial p {color:#ffffff; font-size:22px; margin-bottom:20px;}
#testimonial p strong {color:#ffffff; font-weight:bold; font-size:18px;}
#testimonial p:last-child {margin-bottom:0px;}

@media only screen and (min-width: 768px) {
#testimonial h3 {font-size:36px;}
#testimonial p {font-size:26px;}
#testimonial p strong {font-size:20px;}
  }

@media only screen and (min-width: 1024px) {
#testimonial h3 {font-size:40px;}
#testimonial p {font-size:30px;}
#testimonial p strong {font-size:22px;}
    }