/* Theme Name:PetCo Author:Viewport Author URI:http://www.viewport.co.za Description:Custom theme for PetCo Version:1.0 License:GNU General Public License License URI:license.txt Text Domain:PetCo Domain Path:/languages/ Tags:PetCo */ /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;margin:0;padding:0} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} body{line-height:1} ol,ul{list-style:none} blockquote,q{quotes:none} blockquote:before,blockquote:after,q:before,q:after{content:none} table{border-collapse:collapse;border-spacing:0} html, body {height:100%} body {background:white; color:#666; font-size:100%; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-stretch:normal; text-rendering:optimizeLegibility !important; -webkit-font-smoothing:antialiased !important; -webkit-text-size-adjust:none;} /* Fonts */ h1, h2, h3, h4, h5, h6 {color:#333; padding:0.25em 0; line-height:110%; font-weight:normal; text-transform:uppercase;} h1 {font-size:275%; padding:0.25em 0;} h2 {font-size:240%; } h3 {font-size:190%;} h4 {font-size:175%; line-height:125%; font-weight:bold; text-transform:none;} h6 {font-size:100%; font-weight:bold;} p {line-height:150%; padding:0.5em 0} p em, p i {font-style:italic;} strong, b {font-weight:700} small{font-size:80%;} hr {height:1px; border:0; background:#ddd; margin:1em 0;} .clearfix {clear:both;display:block; height:1em;} .content-block.green hr, .content-block.blue hr {background:white;opacity:0.25;} @media screen and (max-width:768px) { h1 {font-size:175%; padding:0.25em 0;} h2 {font-size:150%; } h3 {font-size:140%;} } @media screen and (max-width:480px) { body {font-size:85%;} p {text-transform:none !important;} } /* Images */ img {max-width:100%;} /* Buttons/Links */ a {text-decoration:none; color:#b5b700; -webkit-transition:all 0.25s ease; -moz-transition:all 0.25s ease; -ms-transition:all 0.25s ease; -o-transition:all 0.25s ease; transition:all 0.25s ease} a:hover {color:#619ed4} .btn {cursor:pointer; outline:none; padding:0.75em 1.25em!important; text-align:center; min-width:100px; text-transform:uppercase; border:1px solid #19212a; color:#19212a; display:inline-block; text-align:center; -webkit-border-radius:5px; border-radius:5px; } .btn:hover {color:white; background:#19212a; border-color:#19212a;} @media screen and (max-width:768px) { .btn {padding:0.5em 1em!important; min-width:50px; margin-right:8px;} } /* Page tructure */ .wrapper {max-width:1100px; margin:0 auto; padding:0 1.5em; display:block;} /* Header */ header {width:100%; position:relative; z-index:40; color:white; font-weight:700; font-size:14px;} @media screen and (min-width:769px) { header {background:#1b232e; height:100px; float:left;} header .wrapper {height:100px;} header .logo {float:left; color:white; z-index:2; width:150px; padding:22px; background:#b5b700; -webkit-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px;} header .logo img {width:150px;} header .logo .mobile {display:none;} } @media screen and (min-width:769px) and (max-width:1024px) { header {height:90px;} header .wrapper {padding:0 10px;} header .logo {width:100px; padding:15px;} header .logo img {width:100px;} } @media screen and (max-width:768px) { header {background:#b6b701; height:70px;} header .wrapper {padding:0; display:block;} header .logo {height:48px; padding:12px 0 0 15px; float:left;} header .logo img {height:45px;} header .logo .desktop {display:none;} } @media screen and (max-width:480px) { header .logo {height:4px;} header .logo img {height:38px;} } /* Top Links */ header .top-links {float:right; height:50px; text-transform:uppercase;} header .top-links li {display:inline-block;} header .top-links li a {display:block; height:50px; padding:0 1em; line-height:50px; text-decoration:none} @media screen and (max-width:768px) { header .top-links {display:none;} } /* Search (Desktop) */ @media screen and (min-width:769px) { .search-desktop {float:right; height:30px; padding:10px 1em;} .search-desktop input {height:30px; background:white; -webkit-appearance:none; border:0; margin:0; padding:0 5px; float:left;} .search-desktop input[type=submit] {background:#b6b701; color:white; border:0; margin:0; padding:0; width:32px; cursor:pointer; outline:none; font-family:FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;} } @media screen and (min-width:769px) and (max-width:1024px) { .search-desktop {padding-right:0;} } @media screen and (max-width:768px) { .search-desktop {display:none;} } /* Search (Mobile) */ @media screen and (max-width:768px) { .search-mobile {position:absolute; top:0px; right:70px; top:0px; margin:0; height:70px;} .search-mobile button {border:0; cursor:pointer; text-align:center; display:inline-block; outline:none; background:#b5b700; font-size:35px; height:70px; width:70px; line-height:60px; padding:0; color:white; font-weight:400; } .search-mobile-form {width:100%; padding:0; background:white; position:absolute; z-index:21; top:70px; left:0px; display:none; -webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.25); box-shadow:0 1px 2px 0 rgba(0,0,0,0.25);} .search-mobile-form.selected {display:block} .search-mobile.selected button {background:#1b232e;} .search-mobile-form input {height:50px; width:88%; background:transparent; -webkit-appearance:none; border:0; margin:0; padding:0; float:left; text-indent:10px; font-size:24px; -webkit-box-shadow:inset 0 3px 0 0 #eee; box-shadow:inset 0 3px 0 0 #eee; } .search-mobile-form input[type=submit] {background:transparent; color:#b6b701; border:0; margin:0; padding:0; width:12%; cursor:pointer; outline:none; text-indent:0px; font-size:24px; font-family:FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;} } @media screen and (min-width:769px) { .search-mobile, .search-mobile-form {display:none;} } /* Desktop Menu */ @media screen and (min-width:769px){ .desktopMenu {position:relative; z-index:40; float:right; clear:right;} .desktopMenu ul {list-style-type:none; margin:0; padding:0; position:static; float:right;} .desktopMenu li {display:inline-block; float:left; margin-right:1px; position:relative; text-transform:uppercase;} .desktopMenu li a {display:block; height:50px; padding:0 1em; line-height:50px; color:white; background:#1b232e; text-decoration:none} .desktopMenu li:hover a {background:#b5b700} .desktopMenu li:hover ul a {background:#1b232e; color:white; } .desktopMenu li:hover ul a:hover {background:#b5b700; color:#fff} .desktopMenu li ul {position:absolute; top:50px; left:0px; display:none;} .desktopMenu li ul li {display:block; float:none} .desktopMenu li ul li a {width:auto; min-width:175px; height:auto; padding:1em !important; line-height:115%;} .desktopMenu ul li a:hover + .sub-menu, .desktopMenu .sub-menu:hover {display:block} .mobileMenu {display:none;} } @media screen and (min-width:1025px) and (max-width:1240px) { .desktopMenu li a {padding:0 0.5em;} } @media screen and (min-width:769px) and (max-width:1024px) { .desktopMenu {clear:none;} .desktopMenu li {} .desktopMenu li a {padding:0 0.5em; height:40px; line-height:40px;} .desktopMenu li ul {top:40px;} } /* Mobile Menu */ @media screen and (max-width:768px){ header {float:left; width:100%;} .mobileMenu {-webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,0.25); box-shadow:0 1px 2px 0 rgba(0,0,0,0.25);} .mobileMenu ul {list-style-type:none; margin:0; padding:0; position:static; font-size:125%; } .desktopMenu, .mobileMenu ul {display:none} .mobileMenu li {margin:0; border-top:1px solid #ddd; display:inline-block; float:left; margin-right:1px; position:relative; text-transform:uppercase;} .mobileMenu li ul {display:none; font-size:100%;} .mobileMenu ul li, .mobileMenu li a {width:100%; } .mobileMenu li a {display:block; color:white; background:#1b232e; text-decoration:none; padding:1em 5%; width:90%; background:#f2f2f2; color:#333; line-height:125%;} .mobileMenu .show-menu {font-size:40px; cursor:pointer; text-decoration:none; color:white; padding:0; height:70px; width:70px; text-indent:0; display:inline-block; float:right; text-align:center; line-height:67px;} .mobileMenu .show-menu.open {background:#1b232e;} .mobileMenu li:hover a, .mobileMenu li:hover ul a {background:#b5b700; color:white;} .mobileMenu li li {display:block; float:none; border:0;} .mobileMenu li li a {padding:0.5em 2em 1em; font-weight:normal;} .mobileMenu ul li a:hover + .sub-menu, .mobileMenu .sub-menu:hover {display:block} .mobileMenu input[type=checkbox] {display:none;-webkit-appearance:none} .mobileMenu input[type=checkbox]:checked ~ #menu {display:block} } /* HOME PAGE ELEMENTS */ /* FlexSlider Necessary Styles */ .flexslider .slides > li {display:none; -webkit-backface-visibility:hidden} .flexslider .slides img {width:100%; display:block; } .flex-pauseplay span {text-transform:capitalize} .slides:after {content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0} html[xmlns] .slides {display:block} * html .slides {height:1%} .no-js .slides > li:first-child {display:block} /* FlexSlider Theme */ .flexslider {display:block; margin:0; clear:both; background:white; position:relative; z-index:1; zoom:1;} .flex-viewport {m-webkit-transition:all 1s ease; -moz-transition:all 1s ease; transition:all 1s ease} .flexslider .slides {zoom:1} /* Control Nav */ .flex-control-nav { position:absolute; z-index:30; bottom:1.5em; right:1.5em} .flex-control-nav li {margin:0 6px; display:inline-block; zoom:1; *display:inline} .flex-control-paging li a {width:15px; height:15px; display:block; background:white; cursor:pointer; opacity:0.5; text-indent:-9999px; -webkit-border-radius:20px; border-radius:20px;} .flex-control-paging li a:hover, .flex-control-paging li a.flex-active {opacity:1;} .flex-control-paging li a.flex-active { cursor:default; } /* Slide Elements */ .slides li {position:relative; z-index:10} .slides li img {position:relative; z-index:10} /* Slideshow Copy */ .slides li .copy {position:absolute; text-align:left; z-index:20; left:5%; top:25%; width:90%; display:block; text-align:center;} .slides li .copy { letter-spacing:-1px; color:white; text-transform:none; text-shadow:0px 1px 3px rgba(0, 0, 0, 0.75)} .slides li .copy strong {color:#b5b700} .slides li .copy .btn {border:1px solid white; color:white;} .slides li .copy .btn:hover {color:white; background:#b5b700; border-color:#b5b700;} .scroll-down {position:absolute; z-index:40; bottom:10%; left:47%; left:calc(50% - 30px); height:60px; width:60px; display:inline-block; color:white; opacity:0.5;} .scroll-down:hover {opacity:1;color:white;} @media all and (max-width:768px) { .scroll-down {display:none} } @media screen and (min-width:1025px) { .slides li .copy p {font-size:70px;} .flex-viewport {height:100vh; max-height:100vh; height:calc(100vh - 100px);} } @media screen and (min-width:769px) and (max-width:1024px) { .slides li .copy p {font-size:50px;} } @media screen and (max-width:768px){ .slides li .copy {top:15%;} .slides li .copy p {font-size:35px;} .slides li .copy .btn {padding:0.4em 0.6em !important;} .flex-control-nav {bottom:1em; right:0.5em} } @media screen and (max-width:580px){ .slides li .copy p {font-size:30px;} } @media screen and (max-width:480px){ .slides li .copy p {font-size:20px; line-height:125%;} } /* Intro */ .intro {display:block; clear:both; text-align:center; padding:4em 0; background:white;} .intro .wrapper {max-width:900px;} .intro .btn {margin-top:1em;} @media only screen and (max-width:1024px) { .intro {padding:3em 0;} } @media only screen and (max-width:768px) { .intro {padding:2em 0;} } /* Four Feature Blocks */ .fourFeatures {width:100%; height:325px; display:block; position:relative; overflow:hidden; clear:both;} .fourFeatures .block {float:left; width:25%; height:325px; background:#19212a; color:white; position:relative; z-index:2;} .fourFeatures .block.alt, .fourFeatures .overlay.alt {background:#609ed3;} .fourFeatures .block img {position:absolute; z-index:1; top:0px; left:0px; display:block; float:left; min-height:100%; max-height:140%; overflow:hidden; min-width:100%; max-width:140%; transition:0.5s; opacity:0.2;} .fourFeatures .block:hover img {opacity:0.4;} .fourFeatures .block h3 {color:white; padding:25px 25px 15px; position:relative; z-index:2;} .fourFeatures .block p {color:white; padding:0 60px 0 25px; position:relative; z-index:2;} .fourFeatures .block a {color:white; font-size:33px; display:inline-block; line-height:33px; text-align:center; border:1px solid white; width:40px; height:40px; right:25px; bottom:25px; position:absolute; z-index:5;} .fourFeatures .block a:hover, .overlay a:hover {color:white; background:#b5b700; border-color:#b5b700;} /* Overlay */ .overlay {height:100%; width:100%; position:absolute; z-index:3; background-color:#19212a; transition:0.5s; top:0px; right:-100%;} .overlay.open {right:0% !important; overflow:hidden;} .overlay a.close {color:white; font-size:33px; display:inline-block; line-height:33px; text-align:center; border:1px solid white; width:40px; height:40px; right:25px; bottom:25px; position:absolute; z-index:5;} .overlay-content {position:relative; z-index:2; width:90%; margin:0 5%; text-align:center; color:white; top:50%; transform:translateY(-50%); max-width:900px; margin:0 auto;} .overlay-content h3 {color:white;} @media screen and (min-width:769px) and (max-width:1024px) { .fourFeatures {height:auto;} .fourFeatures .block {width:50%; height:275px;} .overlay-content {width:80%; margin:0 10%;} } @media screen and (max-width:768px){ .fourFeatures {height:auto;} .fourFeatures .block {width:auto; float:none; height:auto; padding:2em 0;} .fourFeatures .block h3 {color:white; padding:15px 25px;} .fourFeatures .block p {color:white; padding:0 80px 0 25px;} } /* Latest News */ .latest-news {display:block; position:relative; clear:both; color:white; text-align:center; padding:4em 0; background-color:#9fa100; } .latest-news:before {display:block; content:""; position:absolute; z-index:1; top:0px; left:0px; width:100%; height:100%; background-image:url(img/warehouse.jpg); background-size:cover; opacity:0.2;} .latest-news .wrapper {max-width:600px; position:relative; z-index:2;} .latest-news h2, .latest-news h3, .latest-news a {color:white;} .latest-news h2 {border-bottom:3px solid white; display:inline-block; margin-bottom:0.75em;} .latest-news .btn {margin-top:1em; color:white; border-color:white;} .latest-news .btn:hover {background:#19212a; border-color:#19212a; color:white} @media only screen and (max-width:1024px) { .latest-news {padding:2em;} } /* Four Feature Blocks */ .blogFeed {width:100%; height:325px; display:block; position:relative; overflow:hidden;} .blogFeed .post {float:left; width:25%; height:325px; background:#19212a; overflow:hidden; color:white; position:relative; z-index:2;} .blogFeed .post img {position:absolute; z-index:1; top:0px; left:0px; display:block; float:left; min-height:100%; max-height:140%; overflow:hidden; min-width:100%; max-width:140%; transition:0.5s; opacity:0.2;} .blogFeed .post:hover img {opacity:0.4;} .blogFeed .post.alt {background:#609ed3;} .blogFeed .post h3, .blogFeed .post p, .blogFeed .post .btn { position:relative; z-index:2; color:white; text-transform:uppercase;} .blogFeed .post h3 {padding:40px 25px 15px} .blogFeed .post h3 strong {display:block;} .blogFeed .post h3 a {color:white;} .blogFeed .post p {padding:0 25px} .blogFeed .post .btn {margin:1em 25px 0; color:white; border-color:white} .blogFeed .post .btn:hover {background:#b5b700; color:white; border-color:#b5b700;} .more-news {display:block; clear:both; background:#1b232e; color:white; text-align:center; padding:2em;} .more-news a {color:white; font-size:125%;} .more-news a:hover {color:#b5b700;} @media screen and (min-width:481px) and (max-width:1024px) { .blogFeed {height:600px;} .blogFeed .post {width:50%; height:300px;} } @media screen and (max-width:768px){ .more-news a {font-size:100%;} } @media screen and (max-width:480px){ .blogFeed {height:auto;} .blogFeed .post {width:100%; height:auto;} .blogFeed .post img {min-height:100%; max-height:250%; min-width:100%; max-width:100%;} .blogFeed .post .btn {margin:1em 25px 40px;} } /* Video */ .homePageVideo {clear:both;} .homePageVideo .title {position:absolute; z-index:2; bottom:0px; left:0px; background:rgba(255,255,255,0.5); width:100%; display:block;} .homePageVideo .title a {padding:1em 1.5em; background:#b5b700; color:white; font-weight:bold; display:inline-block; font-size:125%;} @media screen and (max-width:768px){ .homePageVideo .title a {font-size:100%;} } /* Events */ .events {width:100%; height:325px; display:block; position:relative; overflow:hidden;} .events .event {float:left; width:50%; height:325px; background:#19212a; overflow:hidden; color:white; position:relative; z-index:2;} .events .event img {position:absolute; z-index:1; top:0px; left:0px; display:block; float:left; min-height:100%; max-height:125%; overflow:hidden; min-width:100%; max-width:200%; transition:0.5s; opacity:0.2;} .events .event:hover img {opacity:0.4;} .events .event.alt {background:#b5b700;} .events .event .copy {top:50%; width:80%; padding:0 10%; transform:translateY(-50%); position:absolute; z-index:2;} .events .event h3, .events .event p, .events .event .btn { color:white; text-transform:uppercase;} .events .event h3 {padding:0 0 15px} .events .event h3 a {color:white;} .events .event p {padding:0} .events .event .btn {margin:1em 0 0; color:white; border-color:white} .events .event .more-link {display:none;} .events .event .btn:hover {background:white; color:#19212a; border-color:white;} .events .event.alt .btn:hover {color:#b5b700;} @media screen and (max-width:768px){ .events {height:auto;} .events .event {width:100%; height:260px;} } /* Meet Members */ .meet-members {display:block; clear:both; text-align:center; padding:4em 0; background:white;} .meet-members .wrapper {max-width:950px;} .meet-members h2 {color:#b5b700;} .meet-members .btn {margin-top:1em; color:#b5b700; border-color:#b5b700;} .meet-members .btn:hover {color:white; background:#b5b700;} .members {display:block; clear:both; background:#f1f1f1; text-align:center;} .members .member {display:block; padding:2em 0;} .members .member .image {width:20%; max-width:200px; display:inline-block; vertical-align:middle;} .members .member .copy {width:60%; max-width:700px; margin-left:2.5%; padding-left:2.5%; border-left:2px solid #c1c1c1; display:inline-block; vertical-align:middle; text-align:left;} .members .member .copy h3 {font-weight:bold;} .members .member .copy .type {font-weight:bold; color:#b5b700; text-transform:uppercase;} @media screen and (max-width:1024px) { .meet-members {padding:3em 0;} .members .member .image {width:30%} } @media screen and (max-width:768px){ .meet-members {padding:2em 0;} .members .member .image {width:30%} .members .member .copy {width:58%; margin-left:5%; padding-left:5%;} } /* Become a Member */ .become-member {display:block; position:relative; clear:both; color:white; text-align:center; padding:4em 0; background:#609ed3; } .become-member:before {display:block; content:""; position:absolute; z-index:1; top:0px; left:0px; width:100%; height:100%; background-image:url(img/warehouse.jpg); background-size:cover; opacity:0.2;} .become-member .wrapper {position:relative; z-index:2;} .become-member h2 {color:white;} .become-member .btn {margin-top:1em; color:white; border-color:white;} .become-member .btn:hover {background:#19212a; border-color:#19212a; color:white} @media screen and (max-width:1024px) { .become-member {padding:3em 0;} } @media screen and (max-width:768px){ .become-member {padding:2em 0;} } /* Title block */ .title-block {display:block; clear:both; text-align:center; padding:0; background:white;} .title-block h1 {border-bottom:1px solid #ddd; padding:1.5em 0 1em;} /* Content block */ .content-block {display:block; clear:both; padding:4em 0; background:white; text-align:left; float:left; width:100%;} .content-block.start-a-recycling-business {display:none;} .content-block h3 {font-weight:bold;} .content-block p {text-align:justify;} .content-block img.noMarginTop {margin:-4em 0 2em;} @media screen and (min-width:769px){ .content-block .btn {float:right; margin:1em 0 0 1em;} } /* Green block */ .content-block.green {background:#b5b700; color:white;} .content-block.green h3, .content-block.green h4 {color:white;} .content-block.green .btn {color:white; border-color:white;} .content-block.green .btn:hover {border-color:#19212a;} /* Blue block */ .content-block.blue {background:#609ed3; color:white;} .content-block.blue h3, .content-block.blue h4 {color:white;} .content-block.blue .btn {color:white; border-color:white;} .content-block.blue .btn:hover {border-color:#609ed3;} /* List Styling */ .content-block ul, article ul {list-style-type:disc; margin:1em; line-height:150%;} .content-block ul li, article ul li {list-style-type:disc; margin:0.5em} .content-block ol, article ol {list-style-type:decimal; margin:1em; line-height:150%;} .content-block ol li, article ol li {list-style-type:decimal; margin:0.5em} .centered {text-align:center; display:block; padding:1em 0; line-height:140%;} .centered.grey {background:#f5f5f5;} .centered img {text-align:center; margin:0 auto;} .centered .btn {float:none;} .select-options {text-align:left; display:block; padding:1em 0;} .select-options select {display:inline-block; width:49%; font-size:17px; } .select-options select:last-of-type {float:right;} @media screen and (max-width:768px){ .content-block {padding:2em 0;} .content-block img.noMarginTop {margin:-2em 0 2em;} .centered .btn {margin-top:1em;} } .img-stretch, .content-block.stretch {display:block; clear:both; float:left; width:100%; padding:0;} .img-stretch img , .content-block.stretch img {width:100%;float:left;} .content-block.stretch.grey {text-align:center;background:#f5f5f5; padding:3em 0;} .content-block.stretch.grey .btn {float:none; margin-top:2em;} .content-block form {max-width:700px; margin:0 auto;} .content-block form input, .content-block form textarea {-webkit-appearance:none; font-size:100%; text-indent:1em; background:#f2f2f2; display:block; width:100%; padding:1em 0; margin:0; color:#333; border:0; -webkit-border-radius:0px; border-radius:0px;} .content-block form select {font-size:100%; display:block; width:100%; padding:1em 0; margin:0; text-indent:0.5em; background:#f2f2f2; color:#333; border:0; -webkit-border-radius:0px !important; border-radius:0px !important;} .content-block form select {height:45px; line-height:45px; padding:0;} .content-block form input:placeholder {color:#999;} .content-block form ::-webkit-input-placeholder {color:#999;} .content-block form :-moz-placeholder {color:#999;} .content-block form ::-moz-placeholder {color:#999;} .content-block form :-ms-input-placeholder {color:#999;} .content-block form input[type=submit] {cursor:pointer; outline:none; padding:0.75em 1.25em!important; text-align:center; width:auto; text-indent:0em; float:right; min-width:150px; text-transform:uppercase; background:none; border:1px solid #19212a; color:#19212a; display:inline-block; text-align:center; -webkit-border-radius:5px; border-radius:5px; } .content-block form input[type=submit]:hover {background:white !important; border-color:white !important; color:#619ed4 !important} .content-block.green form input, .content-block.green form textarea {background:rgba(255,255,255,0.2); color:white; } .content-block.green form select {} .content-block.green form input:placeholder {color:white;} .content-block.green form ::-webkit-input-placeholder {color:white;} .content-block.green form :-moz-placeholder {color:white;} .content-block.green form ::-moz-placeholder {color:white;} .content-block.green form :-ms-input-placeholder {color:white;} .content-block.green form input[type=submit] {background:none; border:1px solid white; color:white; } /* Search Form */ .content-block form.search-form {max-width:700px; margin:0;} .content-block form.search-form input[type=submit] {float:none; margin:1em 0;} select[option:selected]{ background-color:red !important; } select:focus::-ms-value {background-color:red !important; color:#000 !important; background-color: transparent !important;} /* Contact Form 7 output */ div.wpcf7-response-output {font-weight:bold; font-size:125%; line-height:140%; border:0 !important; padding:1em 0 !important; margin:0 !important; color:red;} div.wpcf7-mail-sent-ok {font-size:150%; color:white; font-weight:bold; text-align:center;} form.sent p {display:none;} /* Team Members */ .team {display:block; clear:both; vertical-align:middle; padding:1em 0;} .team-member {display:inline-block; overflow:hidden; vertical-align:top; width:23%; margin:0 1.9% 1.5em 0; background:white; color:#555; position:relative; z-index:1;} .team-member:nth-child(4n) {margin-right:0;} .team-member img {width:100%; position:relative; z-index:1; float:left;} .team-member .copy {position:absolute; z-index:2; bottom:0px; left:0px; width:90%; height:75px; padding:0 5%; background:rgba(96,158,211, 0.6);} .team-member .copy.rise, .team-member:hover .copy.rise {height:100%; background:rgba(96,158,211, 0.85);} .team-member .copy .open {position:absolute; right:10px; bottom:10px; border:1px solid white; width:24px; height:24px; font-size:18px; line-height:24px;} .team-member .copy .open {color:white; display:inline-block; text-align:center; border:1px solid white; width:24px; height:24px; font-size:18px; line-height:22px; position:absolute; z-index:5; right:6px; bottom:6px;} .team-member .copy .open:hover {color:white; background:#b5b700; border-color:#b5b700;} .team-member h6 {padding:0.5em 0; color:white;} .team-member p {padding:0 0 0.5em 0; color:white; text-align:left; font-style:italic; line-height:125%; font-size:90%;} .team-member p.title {min-height:2.5em; padding:0 25px 0.5em 0;} .team-member:hover {text-decoration:none; background:#0f5e48; color:white; cursor:pointer;} .team-member:hover .copy {background:rgba(96,158,211, 0.85);} .team-member:hover img {margin:0; -moz-transform:scale(1.05); -webkit-transform:scale(1.05); -o-transform:scale(1.05);-ms-transform:scale(1.05); transform:scale(1.05); } .team-member:hover h5 {color:white;} .team-member, .team-member img, .team-member .copy, .team-member .copy.rise {-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease} @media screen and (max-width:1024px) { .team-member, .team-member:nth-child(4n) {width:31%; margin:0 2% 1.5em 0;} .team-member:nth-child(3n) {margin-right:0;} } @media screen and (max-width:768px) { .team-member, .team-member:nth-child(3n), .team-member:nth-child(4n) {width:47%; margin:0 2.5% 1.5em 0;} .team-member:nth-child(2n) {margin-right:0;} } @media screen and (max-width:480px) { .team-member, .team-member:nth-child(2n), .team-member:nth-child(3n), .team-member:nth-child(4n) {width:auto; display:block; margin:0 0 1em 0;} } /* Our Members */ .ourmembers {display:block; clear:both; vertical-align:middle; padding:1em 0;} .member-logo {display:inline-block; overflow:hidden; vertical-align:top; width:23%; margin:0 1.9% 1.5em 0; position:relative; z-index:1; background:#b5b700;} .member-logo:nth-child(4n) {margin-right:0;} .member-logo, .member-logo .open:after, .member-logo img {-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; -ms-transition:all 0.5s ease; -o-transition:all 0.5s ease; transition:all 0.5s ease} .member-logo:hover {text-decoration:none; color:white; cursor:pointer;} .member-logo img {width:100%; position:relative; z-index:1; float:left;} .member-logo .open { width:100%; height:100%; position:absolute; z-index:5; left:0px; bottom:6px; opacity:0; } .member-logo:hover .open, .member-logo.rise .open {opacity:1;} .member-logo .open:after {color:white; content:"+"; display:inline-block; text-align:center; border:1px solid white; width:24px; height:24px; font-size:18px; line-height:22px; position:absolute; z-index:6; right:10px; bottom:5px; opacity:0;} .member-logo.rise .open:after {opacity:0 !important} .member-logo:hover .open:after {opacity:1;} .member-logo.rise {background:#b5b700;} .member-logo.rise img, .member-logo:hover img {opacity:0.5;} .member .open {color:white; display:inline-block; text-align:center; border:1px solid white; width:24px; height:24px; font-size:18px; line-height:22px; position:absolute; z-index:5; right:6px; bottom:6px;} .member .open:hover {color:#b5b700; background:white; border-color:white;} .ourmembers-detail .member {background:#b5b700; clear:both; display:block; padding:2em; position:relative; z-index:2;} .ourmembers-detail .member .copy h3 {color:white !important;} .ourmembers-detail .member .copy a {color:white; text-decoration:underline;} @media screen and (min-width:769px) { .ourmembers-detail .member .image {display:inline-block; width:25%; vertical-align:middle;} .ourmembers-detail .member .copy {display:inline-block; width:71.5%; padding:0 0 0 3%; vertical-align:middle;} .ourmembers-detail .member .copy p {font-size:90% !important; color:white !important;} } @media screen and (max-width:1024px) { .member-logo, .member-logo:nth-child(4n) {width:31%; margin:0 2% 1.5em 0;} .member-logo:nth-child(3n) {margin-right:0;} } @media screen and (max-width:768px) { .member-logo, .member-logo:nth-child(3n), .member-logo:nth-child(4n) {width:47%; margin:0 2.5% 1.5em 0;} .member-logo:nth-child(2n) {margin-right:0;} } @media screen and (max-width:480px) { .member-logo, .member-logo:nth-child(2n), .member-logo:nth-child(3n), .member-logo:nth-child(4n) {width:auto; display:block; margin:0 0 1em 0;} } /* Blog */ .content {display:block; clear:both; padding:2em 0; background:white; text-align:left; float:left; width:100%;} /* Blog Sidebar */ .content .sidebar {float:right; width:22.5%; padding:0 0 0 2.5%; text-align:right;} .content .sidebar h6 {color:#619ed4; letter-spacing:2px; padding:0 0 1em 0; display:block; position:relative; } .content .sidebar h6:after {display:inline-block; position:absolute; bottom:0px; right:0px; content:""; height:3px; width:100px; background:#619ed4;} .content .sidebar ul {padding:1em 0;} .content .sidebar li {color:#619ed4; letter-spacing:1px; padding:0.5em 0; line-height:125%; text-transform:uppercase;} .content .sidebar li a {color:#333;} .content .sidebar li a:hover {color:#619ed4;} /* Blog Articles */ .content .articles {float:left; width:72.5%; padding:0 2.5% 0 0;} .content article {display:block; clear:both; border-bottom:1px solid #ddd;} .content article:last-of-type {border:0;} .content article .date {color:#619ed4; font-weight:bold; text-transform:uppercase; padding:0 0 1em;} .content article .image {position:relative; float:left; width:100%; margin-bottom:1.5em;} .content article .image img {position:relative; z-index:1; float:left; width:100%;} .content .image .date, .content .image .share {position:absolute; z-index:2; top:0px; right:0px; width:160px; padding:0; height:100%; background:#619ed4; background:rgba(97, 158, 212, 0.7)} .content .image .copy {position:absolute; z-index:3; bottom:0px; right:0px; display:block; padding:1em; color:white; text-align:right;font-weight:bold; text-transform:uppercase;} .content .date .copy .day {font-size:4em; display:block;} .content .date .copy .month { font-size:1.25em; display:block;} .content article h3 {text-transform:none; font-weight:bold;} .content article .btn {border-color:#619ed4; color:#619ed4; margin-top:1em;} .content article .btn:hover {background:#19212a; border-color:#19212a; color:white;} .content .image .share .copy {bottom:auto; top:0px; padding:1em 0 0; display:block; text-align:center; width:100%;} .content .share .copy p {display:block; font-size:1.25em; line-height:1.25em;} .content .share .copy p strong {display:block; font-size:1.75em;} .content .share a.socialIcon {width:50px; height:50px; text-align:center; display:inline-block; border:1px solid white; color:white; font-size:30px; line-height:50px; margin:0 3px;} .content .share a.socialIcon:hover {background:white; color:#619ed4;} /* Pagination */ .pagination {padding:2em 0 0; display:block; clear:both;} .pagination a {display:inline-block; padding:0.3em 0.5em; margin:0 -3px 0 0;} .pagination a.active {color:#999;} .pagination a .fa {font-size:75%;} @media screen and (min-width:769px) { .content article {padding:2em 0; float:left; width:100%;} .content .articles article .btn {float:right; width:170px; padding:0.75em 0 !important;} } @media screen and (max-width:768px) { .content {padding:2em 0;} .content .sidebar {float:none; width:auto; padding:0; display:block; text-align:center;} .content .sidebar h6 {padding:0 0 0.25em;} .content .sidebar h6:after {display:none} .content .articles {float:none; width:auto; padding:0;} .content .articles article {padding:2em 0;} .content .image .date {width:120px;} .content .image .date .copy {padding:0.5em; text-transform:none;} .content .date .copy .day {font-size:2em;} .content .date .copy .month {font-size:0.9em;} .content article .image .date, .content .image .share {width:120px;} .content .share .copy p {font-size:0.9em;} .content .share .copy p strong {font-size:1.5em;} .content .share a.socialIcon {width:35px; height:35px; font-size:20px; line-height:35px; } } /* Events */ .upcoming-events .upcoming-event {padding:2em 0; position:relative; display:block; } .upcoming-event .details {color:#b6b701; font-weight:bold; text-transform:uppercase; padding:0 0 1em;} .upcoming-event .image {position:relative; float:left; width:100%; margin-bottom:1.5em;} .upcoming-event .image img {position:relative; z-index:1; float:left; width:100%;} .upcoming-event .image .date, .upcoming-event .image .share {background:#b6b701; background:rgba(182, 183, 1, 0.7)} .upcoming-event h3 {text-transform:none; font-weight:bold;} .upcoming-event .btn {border-color:#b6b701; color:#b6b701; margin-top:1em;} .upcoming-event .btn:hover {background:#19212a; border-color:#19212a; color:white;} .upcoming-events .upcoming-event .details em {margin:0 10px; color:#ccc;} @media screen and (min-width:769px) { .upcoming-events .upcoming-event {display:inline-block; vertical-align:top; width:47.5%; margin:0 2.5% 0 0;} .upcoming-events .upcoming-event:nth-of-type(odd) {margin-right:4.75%;} .upcoming-events .upcoming-event:nth-of-type(even) {margin-right:0%;} .upcoming-event {padding:2em 0; float:left; width:100%;} .upcoming-event .btn {float:right} } @media screen and (max-width:768px) { .upcoming-events .upcoming-event {padding:0 0 2em; position:relative; display:block; } } /* Sign Up Options */ .signup-option {display:inline-block; width:33%; padding:0.5em 0; margin:0.5em 0; vertical-align:top; text-transform:uppercase; font-size:125%; line-height:115%; position:relative;} .signup-option strong {display:block;} .signup-option:after {display:inline-block; position:absolute; bottom:0px; left:0px; content:""; height:3px; width:80px; background:#b6b701; display:none;} .signup-option:hover:after {display:inline-block; } .signup-option a:hover {color:#333} @media screen and (max-width:768px) { .signup-option {width:49.5%; font-size:100%;} } @media screen and (max-width:480px) { .signup-option {width:auto; display:block; font-size:100%;} } /* Sign Up Downloads */ .downloads {background:#b6b701; display:block; padding:2em; margin:1em 0 2em; color:white; font-weight:bold;} .downloads a {color:white; display:inline-block; width:28%; padding:0.6em 0 0.6em 5%; margin:0.5em 0; vertical-align:top; text-transform:uppercase; position:relative; line-height:115%;} .downloads a {padding-left:55px; width:calc(32.5% - 55px); background:url(img/link.png) left center no-repeat; background-size:40px;} .content-block.green .downloads, .content-block.blue .downloads {background-color:rgba(255,255,255,0.2); color:white;} .content-block.green .downloads a, .content-block.blue .downloads a {color:white; } .downloads a:after {display:inline-block; position:absolute; bottom:0px; left:55px; content:""; height:3px; width:80px; background:white; display:none;} .downloads a:hover:after {display:inline-block; } .downloads strong {display:block;} .downloads a {padding-left:55px; width:calc(32.5% - 55px); background:url(img/link.png) left center no-repeat; background-size:40px;} .downloads a[href$=".pdf"] {background:url(img/downloadbutton_2x.png) left center no-repeat; background-size:40px;} @media screen and (max-width:768px) { .downloads {padding:0.75em 1.5em;} .downloads a {padding-left:55px; width:calc(49.5% - 55px);} .downloads a, .downloads a[href$=".pdf"] {background-size:30px;} } @media screen and (max-width:480px) { .downloads {padding:0.5em 1.5em;} .downloads a {padding-left:55px; width:auto;} } /* Register with Petco */ .register-with-petco {display:block; position:relative; clear:both; color:white; text-align:center; padding:4em 0; margin:2em 0 0; background:#609ed3; } .register-with-petco:before {display:block; content:""; position:absolute; z-index:1; top:0px; left:0px; width:100%; height:100%; background-image:url(img/worker.jpg); background-size:cover; opacity:0.3;} .register-with-petco .wrapper {position:relative; z-index:2;} .register-with-petco h2 {color:white; font-weight:bold;} .register-with-petco .btn {margin-top:1em; color:white; border-color:white;} .register-with-petco .btn:hover {background:#19212a; border-color:#19212a; color:white} @media screen and (max-width:1024px) { .register-with-petco {padding:3em 0;} } @media screen and (max-width:768px){ .register-with-petco {padding:2em 0;} } /* Project Blocks */ .projects {width:100%; height:325px; display:block; position:relative; overflow:hidden; clear:both;} .projects .block {float:left; width:33.3%; height:325px; background:#19212a; color:white; position:relative; z-index:2; overflow:hidden;} .projects .block.alt, .projects .overlay.alt {background:#609ed3;} .projects .block img {position:absolute; z-index:1; top:0px; left:0px; display:block; float:left; min-height:100%; max-height:140%; overflow:hidden; min-width:100%; max-width:140%; transition:0.5s; opacity:0.2;} .projects .block:hover img {opacity:0.4;} .projects .block .copy {position:relative; z-index:2; display:block; padding:1.5em 3em 1em 1.5em;} .projects .block h4 {color:white; text-transform:uppercase; font-size:125%; font-weight:normal;} .projects .block p {color:white; text-align:left;} .projects .block a {color:white; font-size:33px; display:inline-block; line-height:33px; text-align:center; border:1px solid white; width:40px; height:40px; right:25px; bottom:25px; position:absolute; z-index:5;} .projects .block a:hover, .overlay a:hover {color:white; background:#b5b700; border-color:#b5b700;} /* Government Blocks */ .projects.government .block {width:50%; position:relative} .projects.government .block .copy {top:50%; transform:translateY(-50%); padding:0 3em;} .projects.government .block h4 {font-size:175%; max-width:400px; text-align:left; } .projects.government .block img {position:absolute; z-index:1; top:0px; left:0px; display:block; float:left; min-height:100%; max-height:200%; overflow:hidden; min-width:100%; max-width:140%; transition:0.5s; opacity:0.2;} /* Associate Blocks */ .projects.associates .block {width:100%;} .projects.associates .block .copy {top:50%; transform:translateY(-50%); padding:0 3em; text-align:center;} .projects.associates .block h4 { font-size:175%; text-align:center;} /* Industry Blocks */ .projects.industry .block {width:25%;} .projects.industry .block .copy {top:50%; transform:translateY(-50%); padding:0; text-align:center;} .projects.industry .block h4 { font-weight:bold; line-height:110%; text-align:center; padding:0 1em;} .projects.industry .block h4 b {font-size:175% !important; opacity:1; display:block; line-height:100%;} /* Overlay */ .overlay a.close {color:white; font-size:33px; display:inline-block; line-height:33px; text-align:center; border:1px solid white; width:40px; height:40px; right:25px; bottom:25px; position:absolute; z-index:5;} .overlay-content {position:relative; overflow:auto; z-index:2; max-height:100%; width:95%; padding:0 2.5%; overflow-y:auto; margin:0 auto; text-align:left; color:white; top:50%; transform:translateY(-50%); max-width:1100px;} .overlay-content h4 {color:white; text-transform:uppercase; font-size:150%;} .overlay-content ul {margin:0; -moz-column-count:3; -moz-column-gap:1em; -webkit-column-count:3; -webkit-column-gap:1em; column-count:3; column-gap:1em; } .overlay-content ul { max-width:1100px; position:relative;} .overlay-content ul li {margin:0.25em 2em;} @media screen and (min-width:580px) and (max-width:1024px) { .projects {height:auto;} .projects .block, .projects.industry .block {width:50%; height:250px;} .projects.industry .block h4 b {font-size:150% !important;} } @media screen and (max-width:768px){ .projects.government .block, .projects.industry .block {width:100%; position:relative; height:200px;} } @media screen and (max-width:580px){ .projects {height:auto;} .projects .block {width:auto; padding:1.5em 0;} } /* Responsive Video Embed */ .videoWrapper {position:relative; padding-bottom:56.25%; padding-top:0px; height:0; overflow:hidden;} .videoWrapper iframe, .videoWrapper object, .videoWrapper embed {position:absolute;top:0;left:0;width:100%; height:100%; z-index:1;} /* Form Elements */ input {font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:100%;} input[type=submit] {background:#b6b701; color:white; font-weight:bold; border:0; cursor:pointer; outline:none; -webkit-transition:all 0.25s ease; -moz-transition:all 0.25s ease; -ms-transition:all 0.25s ease; -o-transition:all 0.25s ease; transition:all 0.25s ease} input[type=submit]:hover {background:white; color} .page-template-page-partners details {display:inline-block; width:47%; vertical-align:top; margin:2em 0;} .page-template-page-partners details:first-of-type {margin-right:5%;} .page-template-page-partners details summary {display:block; position:relative; cursor:pointer; background:#b5b700; color:white; margin:0 0 15px; text-indent:15px; outline:none; height:50px; line-height:50px; text-transform:uppercase; font-size:150%; letter-spacing:1px;} .page-template-page-partners summary::-webkit-details-marker {display:none} .page-template-page-partners summary:after { background:white; text-indent:0px; border:1px solid #b5b700; content: "+"; color:#b5b700; position:absolute; top:0px; right:0px; text-align:center; width:48px; height:48px; line-height:42px; font-size:150%; cursor:pointer;} .page-template-page-partners details[open] summary:after {content: "-";} .page-template-page-partners details p {margin:10px 15px;} .page-template-page-partners details ul {margin:10px 30px;} .page-template-page-partners details ul li {margin:5px 0;} .page-template-page-partners .content-block:nth-of-type(9) {background:#1b232e; position:relative; color:white; z-index:1;} .page-template-page-partners .content-block:nth-of-type(9):after {content:''; width:100%; height:100%; position:absolute; z-index:1; top:0px; left:0px; opacity:0.2; background-image:url(http://petco.co.za/wp-content/uploads/2016/07/PelletsV.jpg); background-size:cover; background-position:center center; background-repeat:no-repeat;} .page-template-page-partners .content-block:nth-of-type(9) h3 {color:white; text-align:center; font-weight:normal; margin-bottom:1em; position:relative;z-index:2;} .page-template-page-partners .content-block:nth-of-type(9) ul {columns:4; -webkit-columns:4; -moz-columns:4; margin:0; position:relative; z-index:2;} .page-template-page-partners .content-block:nth-of-type(9) ul li {} @media screen and (max-width:1024px) { .page-template-page-partners .content-block:nth-of-type(9) ul {columns:2; -webkit-columns:2; -moz-columns:2;} .page-template-page-partners .content-block:nth-of-type(9):after {display:none;} } @media screen and (max-width:768px) { .page-template-page-partners details {display:inline-block; width:100%; vertical-align:top; margin:0;} } @media screen and (max-width:580px) { .page-template-page-partners .content-block:nth-of-type(9) ul {columns:1; -webkit-columns:1; -moz-columns:1;} } /* Tables */ table {width:100%; margin:2em 0;} table th {padding:1.5em;} table td {padding:1.5em;} .green table {background:rgba(255,255,255,0.2); color:white;} .green table th {background:#609ed3; color:white;} .green table td {border-bottom:1px solid rgba(255,255,255,0.2);} .green table th.company {text-indent:-9999px; background:#609ed3 url(img/home.png) 1.5em center no-repeat; background-size:40px;} .green table th.contact {text-indent:-9999px; background:#609ed3 url(img/user.png) 1.5em center no-repeat; background-size:40px;} .green table th.phone {text-indent:-9999px; background:#609ed3 url(img/call.png) 1.5em center no-repeat; background-size:40px;} .green table th.email {text-indent:-9999px; background:#609ed3 url(img/env.png) 1.5em center no-repeat; background-size:40px;} .green table td a {color:white !important;} @media screen and (max-width:768px) { table {margin:1.5em 0; font-size:90%;} table th {padding:0.75em;} table td {padding:0.75em;} .green table th.company, .green table th.contact, .green table th.phone, .green table th.email {background-position:0.75em center; background-size:22px;} } @media screen and (max-width:480px) { table {font-size:100%; background:rgba(255,255,255,0.1);} .green table th {display:none;} .green table td {display:block; width:92%; padding:0.25em 4%; font-size:100%; border:0;} .green table tr td:first-of-type {font-weight:bold; padding-top:1em;} .green table tr td:last-of-type {border-bottom:1px solid white; padding-bottom:1em;} } /* Tinynav */ .tinynav {display:none} @media screen and (max-width:768px) { .tinynav {display:inline-block; margin:0;} ul#subnav {display:none} } /* Contact Page */ .page-id-228 .content-block.green {background:#1b232e;} .page-id-228 .content-block.green .column {display:inline-block; width:33%; vertical-align:top;} .page-id-228 .content-block.green .column i {display:inline-block; width:60px;} .page-id-228 .content-block.green .social {display:block; clear:both; padding:3em 0; text-align:center;} .page-id-228 .content-block.green .social a.socialIcon {width:50px; height:50px; text-align:center; display:inline-block; background:white; color:#1b232e; font-size:30px; line-height:50px; margin:0 5px;} .page-id-228 .content-block.green .social a.socialIcon:hover {background:#b6b701; color:white;} .page-id-228 i.phone {text-indent:-9999px; background:url(img/call.png) 0 center no-repeat; display:inline-block; width:30px !important; height:20px; background-size:20px;} .page-id-228 i.email {text-indent:-9999px; background:url(img/env.png) 0 center no-repeat; display:inline-block; width:30px !important; height:20px; background-size:20px;} /* Tabs (Contact Page) */ ul#tabs {list-style-type:none; margin:0; padding: 1em 0; text-align:center; } ul#tabs li {display:inline-block; cursor:pointer; font-weight:bold; padding:0 20px; margin:0; line-height:110%; border-right:1px solid white; text-transform:uppercase;} ul#tabs li:last-of-type {border-right:0;} ul#tabs li:hover {color:#619ed4} ul#tabs li.active {color:#b5b700;} ul#tab {list-style-type:none;margin:0; padding:0; position:relative; z-index:5; height:400px;} ul#tab li {display:block; z-index:5; position:absolute; top:0px; left:0px; width:100%; height:400px; margin:0 !important;} ul#tab li.active {display:block; z-index:10;} @media screen and (max-width:768px) { .page-id-228 .content-block.green .column {display:block; width:auto; text-align:center;} .page-id-228 .content-block.green .column p {text-align:center;} .page-id-228 .content-block.green .column:first-of-type h4 {display:none;} } /* Footer */ footer {clear:both; display:block; background:#1b232e; color:white;} footer .column {float:left; width:25%; padding:4em 0; text-align:left; text-transform:uppercase;} footer h6 {padding:0 0 1.5em; color:#b5b700;} footer ul li {padding:0.25em 0;} footer ul li a {color:white;} footer ul li a:hover {color:#b5b700;} footer input {background:white; -webkit-appearance:none; border:0; margin:0 0 8px; padding:8px; display:block; } footer input[type=submit] {background:#b6b701; color:white; border:0; margin:0; padding:8px; cursor:pointer; outline:none; -webkit-border-radius:5px; border-radius:5px;} footer a.socialIcon {width:50px; height:50px; text-align:center; display:inline-block; background:white; color:#1b232e; font-size:30px; line-height:50px; margin:0 5px 8px 0;} footer a.socialIcon:hover {background:#b6b701; color:white;} .backtotop {float:right; background:#b5b700; color:white; width:50px; height:50px; line-height:50px; margin-right:-1.5em; text-align:center;} .backtotop:hover {background:white; color:#b5b700;} .copyright {display:block; clear:both; background:#1b1b1b; text-align:center; padding:2em; font-size:85%; line-height:125%;} @media screen and (max-width:1024px) { footer .column {width:50%; padding:2em 0;} footer .column:nth-of-type(3) {clear:both;} } @media screen and (max-width:540px){ footer {padding:1em 0 0;} footer .column:nth-of-type(3), footer .column:last-of-type {width:auto; float:none; padding:1em 0;} footer .column:last-of-type h6 {display:none;} footer .column:last-of-type {text-align:center; padding:2em 0 0;} footer .column:last-of-type br {display:none;} footer h6 {padding:0 0 1em;} footer input {width:100%; padding:10px 0; text-indent:10px;} footer input[type=submit] {padding:10px 0; -webkit-border-radius:0px; border-radius:0px;} } @media screen and (min-width:769px){ .backtotop {display:none;} } /* MailChimp Form Embed Code - Classic - 12/17/2015 v10.7 */ #mc_embed_signup form {display:block; position:relative; text-align:left;} #mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox; margin-right:10px;} #mc_embed_signup input[type=radio]{-webkit-appearance:radio; margin-right:10px;} #mc_embed_signup .small-meta {font-size: 11px;} #mc_embed_signup .nowrap {white-space:nowrap;} #mc_embed_signup .mc-field-group {clear:left; position:relative; width:96%; padding:0.5em 0;} #mc_embed_signup .size1of2 {clear:none; float:left; display:inline-block; width:46%; margin-right:4%;} * html #mc_embed_signup .size1of2 {margin-right:2%; /* Fix for IE6 double margins. */} #mc_embed_signup .mc-field-group label {display:block; margin-bottom:3px;} #mc_embed_signup .mc-field-group select {display:inline-block; width:100%; padding:5px 0; margin-bottom:2px; -webkit-border-radius: 3px; -moz-border-radius: 3px;} #mc_embed_signup select {margin:10px 0 0;} #mc_embed_signup .datefield, #mc_embed_signup .phonefield-us{padding:5px 0;} #mc_embed_signup .datefield input, #mc_embed_signup .phonefield-us input{display:inline; width:60px; margin:0 2px; letter-spacing:1px; text-align:center; padding:5px 0 2px 0;} #mc_embed_signup .phonefield-us .phonearea input, #mc_embed_signup .phonefield-us .phonedetail1 input{width:40px;} #mc_embed_signup .datefield .monthfield input, #mc_embed_signup .datefield .dayfield input{width:30px;} #mc_embed_signup .datefield label, #mc_embed_signup .phonefield-us label{display:none;} #mc_embed_signup .indicates-required {font-size:90%; display:block; padding-bottom:5px;} #mc_embed_signup .asterisk {color:red; font-size:150%; font-weight:normal; position:relative; top:5px;} div.required {position:relative;} div.required:after {position:absolute; display:inline-block; width:10px; content:'*'; color:red; top:5px; right:-20px; color:red; font-size:150%; font-weight:normal;} #mc_embed_signup .clear {clear:both;} #mc_embed_signup .mc-field-group.input-group ul {margin:0; padding:5px 0; list-style:none;} #mc_embed_signup .mc-field-group.input-group ul li {display:inline-block; padding:0 30px 0 0; margin:0;} #mc_embed_signup .mc-field-group.input-group label {display:inline;} #mc_embed_signup .mc-field-group.input-group input {display:inline; width:auto; border:none;} #mc_embed_signup div#mce-responses {float:left; top:-1.4em; overflow:hidden; clear: both;} #mc_embed_signup div.response {margin:1em 0; padding:1em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; line-height:140%;} #mc_embed_signup #mce-error-response {display:none;} #mc_embed_signup #mce-success-response {color:red; display:none;} #mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;} #mc-embedded-subscribe {clear:both; width:auto; display:block; margin:1em 0 1em 5%;} #mc_embed_signup #num-subscribers {font-size:1.1em;} #mc_embed_signup #num-subscribers span {padding:.5em; border:1px solid #ccc; margin-right:.5em; font-weight:bold;} #mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {display:inline-block; margin:2px 0 ; padding:5px 10px; background-color:rgba(255,255,255,0.85); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size:14px; font-weight:normal; z-index:1; color:red;} #mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {border:2px solid #e85c41;} #mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {border:2px solid #e85c41;} /* New Application form */ .petco-circle {text-align:center; padding:0 0 1em;} .petco-circle img {max-width:275px;} form.membership {max-width:1200px !important;} form.membership div {display:block; padding:0.4em 0;} form.membership h4, form.membership h5 {padding:1.5em 0 0.5em;} form.membership hr {margin:1.5em 0;} /* Table */ form.membership table {width:100%; text-align:left; color:#333; border-left:1px solid #ddd; margin:1em 0;} form.membership table th {padding:10px 15px; line-height:125%; text-transform:uppercase; background:#1b232e; color:white; font-weight:bold; font-size:90%;} form.membership table td {padding:10px 15px; line-height:150%; border-bottom:1px solid #ddd; border-right:1px solid #ddd; vertical-align:middle;} form.membership table td.moretables {padding:0;} form.membership table td.moretables table {border:0; margin:0;} form.membership table td.moretables table td {border:0; border-right:1px solid #ddd;} form.membership table td.moretables table tr td:last-of-type {border-right:0;} /* Form Fields */ form.membership input {width:96%; display:inline-block;} form.membership textarea {width:98%; display:inline-block; min-height:75px;} form.membership span.asterix {color:red; font-size:20px; vertical-align:top; line-height:20px;} form.membership input[type=checkbox]{-webkit-appearance:checkbox; margin:0 5px 0 0; padding:0; text-indent:0; width:auto; display:inline;} form.membership input[type=radio]{-webkit-appearance:radio; margin:0 5px 0 0; padding:0; text-indent:0; width:auto; display:inline;} form.membership small {display:block; padding:0.5em 0 0;} form.membership .radio-contain, form.membership .checkbox-contain {display:inline-block; padding:0.5em 2em 0.5em 0;} form.membership div.code input {max-width:120px;} form.membership input[type=submit] {padding:1em 1.5em !important; margin:1em 0; float:none; background:#19212a !important; color:white !important;} form.membership input[type=submit]:hover {color:white !important; background:#b5b700 !important;} /* Employee Profiles */ .employee-profile span {width:80px; display:inline-block;} .employee-profile input {width:80px !important;} /* Employee Profiles */ .quality span {width:220px; display:inline-block;} form.membership .quality .radio-contain, form.membership .quality .checkbox-contain {min-width:40px;} dl.radio, dl.checkbox {display:block; line-height:150%; padding:0.25em 0 0.75em 0;} dl dt {display:inline-block; vertical-align:top; width:30px;} dl dd {display:inline-block; vertical-align:top; width:calc(100% - 40px);} @media screen and (min-width:769px){ form.membership div.half {display:inline-block; width:49%; padding:0.4em 0; margin-right:-5px; vertical-align:top;} form.membership div.half.left {padding-right:1%;} form.membership div.half.right {padding-left:1%;} form.membership .radio-contain, form.membership .checkbox-contain {min-width:140px;} } @media screen and (max-width:768px){ .petco-circle img {max-width:200px;} form.membership table {} form.membership table th {padding:5px; line-height:125%; font-size:90%;} form.membership table td {padding:5px; line-height:125%; font-size:90%;} form.membership table td.moretables {padding:0;} form.membership table td.moretables table {border:0; margin:0;} form.membership table td.moretables table td {border:0; border-right:1px solid #ddd;} form.membership table td.moretables table tr td:last-of-type {border-right:0;} } /* start home page content block overrides */ body.page-template-page-home .content-block{ position: relative; color: white; text-align: center; padding: 4em 0; background: #000000; } body.page-template-page-home .content-block .wrapper{ max-width: 900px; position: relative; z-index: 5; } body.page-template-page-home .content-block::before { display: block; content: ""; position: absolute; z-index: 0; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url(https://petco.co.za/wp-content/uploads/2020/09/home-circular-economy.jpg); background-size: cover; background-position: center; opacity: 0.2; } body.page-template-page-home .content-block .btn{ margin: auto; float: none; display: inline-block; color: #fff; border-color: #fff; } body.page-template-page-home .content-block h1{ color: #fff; } /* end home page content block overrides */