/* ========================================================================== Theme Name: Wellocks Theme URI: Author: The Fabl Description: Wellocks WordPress theme. Version: 1.0 */ /* ========================================================================== Index ========================================================================== 1. Base styles: opinionated defaults 2. Browse Happy prompt 3. Helper classes 4. Custom styles 5. Responsive */ /* ========================================================================== 1. Base styles: opinionated defaults ========================================================================== */ html { color: #222; font-size: 1em; line-height: 1.4; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } audio, canvas, img, svg, video { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } /* ========================================================================== 2. Browse Happy prompt ========================================================================== */ .browsehappy { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== 3. Helper classes ========================================================================== */ .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } .clearfix { *zoom: 1 } /* ========================================================================== 4. Custom styles ========================================================================== */ body {margin:0; padding:0; font-family:foco,Arial, Helvetica, sans-serif; padding-top:49px} a {o-transition: .2s;-ms-transition: .2s;-moz-transition: .2s;-webkit-transition: .2s;transition: .2s} .container {width:1000px; margin:0 auto} .rel {position:relative} .button {} /* common */ #social, #top nav ul, #login ul, #mastnav ul, #latest-news ul, #mastfoot .head ul, #mastfoot .content ul, #mastfoot .foot ul, #filter ul, #share ul, #info div article ul, #join ul, #methods ul, .ingredients ul, .inner article .method ol, .product-cta, #stats {padding:0; margin:0; list-style:none} article ul {color:#575656;} /* header */ #masthead {position:relative; z-index:999} #top {height:28px; background:#19223d; width:100%; margin:0 0 25px; position:fixed; top:0px; z-index:999999} #top nav ul {float:right} #top nav ul li {display:block; float:left; margin-left:10px;o-transition: .2s;-ms-transition: .2s;-moz-transition: .2s;-webkit-transition: .2s;transition: .2s} #top nav ul li:hover {margin-top:-3px} #top nav ul li a {display:block; width:55px; min-height:45px;background:#76bd1d; color:#fff;-webkit-border-bottom-right-radius: 7px;-webkit-border-bottom-left-radius: 7px;-moz-border-radius-bottomright: 7px;-moz-border-radius-bottomleft: 7px;border-bottom-right-radius: 7px;border-bottom-left-radius: 7px;padding:0 4px 4px; text-transform:uppercase; text-decoration:none; font-size:12px; text-align:center;-webkit-box-shadow: 1px 2px 5px 0px rgba(50, 50, 50, 0.4); -moz-box-shadow:1px 2px 5px 0px rgba(50, 50, 50, 0.4);box-shadow:1px 2px 5px 0px rgba(50, 50, 50, 0.4)} #top nav ul li.fresh a {background:#5ab3e8} #top nav ul li.sbtab a {background:#000} #top nav ul li span {border:1px dotted #fff; border-top:none;-webkit-border-bottom-right-radius: 7px;-webkit-border-bottom-left-radius: 7px;-moz-border-radius-bottomright: 7px;-moz-border-radius-bottomleft: 7px;border-bottom-right-radius: 7px;border-bottom-left-radius: 7px; padding:6px 0; display:block} #top nav ul li.fresh span {padding:6px 6px} #tel {color:#fff; font-size:13px; line-height:28px; float:right; margin-left:23px} #social {float:right; margin:0 15px 0 40px} #social li {width:16px; height:28px; display:block; float:left; margin-left:6px} #social li a {width:16px; height:28px; display:block; text-align:left; text-transform:capitalize; text-indent:-99999px; opacity:1;o-transition: .2s;-ms-transition: .2s;-moz-transition: .2s;-webkit-transition: .2s;transition: .2s} #social li.instagram a {background:url(img/instagram.png) no-repeat center center} #social li.email a {background:url(img/mail.jpg) no-repeat center center} #social li.twitter a {background:url(img/twitter.jpg) no-repeat center center} #social li.youtube a {background:url(img/youtube.png) no-repeat center center} #social li a:hover {opacity:0.7} /*.tabs .offers{ display:none!important; }*/ #logo {float:left; position:relative; z-index:9999; margin-top:10px;} #login {float:right;position:relative; z-index:9999} #login h4 {font-size:14px; text-transform:uppercase; font-weight:700; color:#19223d; margin:0 0 10px; text-align:right /* foco bold */} #login ul {padding-left:20px; background:url(img/person.jpg) no-repeat left -1px; text-align:right} #login li {display:block; float:left; margin-left:10px} #login li a {border:1px solid #19223d;color:#19223d; font-size:9px; width:48px; height:16px; line-height:16px; display:block; text-decoration:none; text-transform:uppercase; text-align:center} #login li a:hover {background:#19223d; color:#fff} a.mp {color:#5ab3e8; text-decoration:none; font-weight:700; text-transform:uppercase; display:block; position: absolute;right: 0;bottom: -25px;width: 200px;text-align: right; font-size:12px; line-height:13px} /* nav */ #mastnav {width: 100%;margin-top: -40px;float: left; position:relative} #mastnav ul {text-align:center} #mastnav ul li {display:inline-block; *display:inline; zoom:1; margin:0 10px; font-size:12px; text-transform:uppercase; font-weight:700; vertical-align:bottom; position:relative /* foco bold */} #mastnav ul li a {color:#19223d; text-decoration:none; padding:5px; display:block; position:relative} #mastnav ul li:hover, #mastnav ul li:hover>a, #mastnav ul li a:hover, #mastnav ul li.current-menu-item a, #mastnav ul li.current-page-ancestor a, #mastnav ul li.current_page_parent a, .single-supplier #mastnav ul li#menu-item-130>a, .single-customer #mastnav ul li#menu-item-115>a, .single-recipe #mastnav ul li#menu-item-26>a, .single-product #mastnav ul li#menu-item-24>a {color:#fff; background:#76bd1d} #mastnav ul li a:after {content: url(img/arrow.png); position:absolute; top:20px; left:50%; margin-left:-7px; opacity:0;o-transition: .2s;-ms-transition: .2s;-moz-transition: .2s;-webkit-transition: .2s;transition: .2s} #mastnav ul li:hover a:after, #mastnav ul li.current-menu-item a:after, #mastnav ul li.current-page-ancestor a:after, #mastnav ul li.current_page_parent a:after, .single-supplier #mastnav ul li#menu-item-130 a:after, .single-customer #mastnav ul li#menu-item-115 a:after, .single-recipe #mastnav ul li#menu-item-26 a:after, .single-product #mastnav ul li#menu-item-24 a:after {opacity:1} #mastnav ul li.icon {background: url(img/motiv.jpg) no-repeat center top; height: 110px; width:66px; text-align:left; text-transform:capitalize; text-indent:-99999px} #mastnav ul li.icon a {display:none} #mastnav ul li.icon:hover {background:url(img/motiv.jpg) no-repeat center top} #mastnav ul li.icon:hover a {background:none} #mastnav ul li.icon:hover a:after {opacity:0; display:none} .hashchange.no-canvas #mastnav ul li a:after, .no-hashchange #mastnav ul li a:after {display:none !important} #mastnav ul li:hover li, #mastnav ul li li.current-menu-item a, #mastnav ul li.current-page-ancestor li a, #mastnav ul li.current-menu-item li a {background:none; color:#19223d} #mastnav ul li li.current-menu-item a, #mastnav ul li.current-page-ancestor li a, #mastnav ul li.current-menu-item li a {background:url(img/line.jpg) center bottom no-repeat} #mastnav ul li ul {display:none; position:absolute; top:100%; left:50%; margin-left:-110px; width:220px;background: url(img/menu.png) repeat} #mastnav ul li:hover ul {display:block} #mastnav ul li ul li {display:block; text-align:center; margin:0; padding:0} #mastnav ul li ul li a:after {content:normal} #mastnav ul li ul li a {display:block;background:url(img/line.jpg) center bottom no-repeat;padding:10px 0;} #mastnav ul li ul li a:hover, #mastnav ul li li.current-menu-item a {background:url(img/line.jpg) center bottom no-repeat; color:#76bd1d} #mastnav ul li ul li:last-child a, #mastnav ul li ul li:last-child a:hover {background:none} .postid-4523 .hero h1 {display:none;} .postid-5481 .hero h1 {display:none;} .postid-5529 .hero h1 {display:none;} .postid-5545 .hero h1 {display:none;} .postid-5553 .hero h1 {display:none;} .postid-5560 .hero h1 {display:none;} .postid-5172 .hero h1 {display:none;} .postid-4986 .hero h1 {display:none;} .postid-5074 .hero h1 {display:none;font-size: 40px;top: 25%;position: absolute;} .postid-5735 .hero h1 {display:none;} .postid-5753 .hero h1 {display:none;} .postid-5569 .hero h1 {color: #19223d; margin-top: -135px;} .postid-5569 h3 {display:none;} .postid-5772 h3 {display:none;} .postid-5772 .hero h1 {margin-top: -135px;} .postid-5822 .hero h1 {display:none;} .postid-5888 .hero h1 {display:none;} .postid-5934 .hero h1 {color: #19223d;} .postid-6015 .hero h1 {font-size: 36px;position: relative;top: -52px;text-shadow: 2px 2px rgba(0, 0, 0, 0.25);} .postid-6099 h3 {display:none;} /************* Single Post Stuff *************/ .postid-5772 .method p { font-size: 14px !important; } .postid-5569 .method p { font-size: 14px !important; } .postid-5569 .ingredients p { font-size: 14px !important; } .inner article .method { font-size: 14px; color: #575656 !important; } .postid-5772 .ingredients p { font-size: 14px !important; } .inner article .ingredients { font-size: 14px; color: #575656 !important; } .postid-5772 .inner article p { color: #575656 !important; } .post-type-archive-customer #mastnav ul li#menu-item-20 a, .post-type-archive-supplier #mastnav ul li#menu-item-20 a, .single-supplier #mastnav ul li#menu-item-20 a, .single-customer #mastnav ul li#menu-item-20 a, .post-type-archive-recipe #mastnav ul li#menu-item-20 a, .single-recipe #mastnav ul li#menu-item-20 a, .single-product #mastnav ul li#menu-item-20 a, .post-type-archive-product #mastnav ul li#menu-item-20 a {background:none; color:#19223d} .post-type-archive-customer #mastnav ul li#menu-item-20 a:after, .post-type-archive-supplier #mastnav ul li#menu-item-20 a:after, .single-supplier #mastnav ul li#menu-item-20 a:after, .single-customer #mastnav ul li#menu-item-20 a:after, .post-type-archive-recipe #mastnav ul li#menu-item-20 a:after, .single-recipe #mastnav ul li#menu-item-20 a:after, .single-product #mastnav ul li#menu-item-20 a:after, .post-type-archive-product #mastnav ul li#menu-item-20 a:after {opacity:0} .post-type-archive-customer #mastnav ul li#menu-item-20:hover a, .post-type-archive-supplier #mastnav ul li#menu-item-20:hover a, .single-supplier #mastnav ul li#menu-item-20:hover a, .single-customer #mastnav ul li#menu-item-20:hover a, .post-type-archive-recipe #mastnav ul li#menu-item-20:hover a, .single-recipe #mastnav ul li#menu-item-20:hover a, .single-recipe #mastnav ul li#menu-item-20:hover a, .post-type-archive-product #mastnav ul li#menu-item-20:hover a {color:#fff} .post-type-archive-customer #mastnav ul li#menu-item-20:hover a:after, .post-type-archive-supplier #mastnav ul li#menu-item-20:hover a:after, .single-supplier #mastnav ul li#menu-item-20:hover a:after, .single-customer #mastnav ul li#menu-item-20:hover a:after, .post-type-archive-recipe #mastnav ul li#menu-item-20:hover a:after, .single-recipe #mastnav ul li#menu-item-20:hover a:after, .single-product #mastnav ul li#menu-item-20:hover a:after, .post-type-archive-product #mastnav ul li#menu-item-20:hover a:after {opacity:1} /* supplier nav */ #mastnav ul li#menu-item-130 {position:static} #mastnav ul li#menu-item-130 ul {position:absolute; width:100%; left:0; right:0; top:100%; background: url(img/sub-bg.png) repeat; margin-left:0; color:#fff} #supplier-nav {display:none} #mastnav ul li#menu-item-130 ul li {padding:0; margin:0; text-transform:none; font-weight:400} #mastnav ul li#menu-item-130 ul li.title {display:block; text-align:center; color:#fff; font-size:22px; margin:25px 0 30px; position:relative; z-index:99999;} #mastnav ul li#menu-item-130 ul li .promos {} #mastnav ul li#menu-item-130 ul li .promos ul {padding:0 35px; position:static; width:auto; height:auto; background:none} #mastnav ul li#menu-item-130 ul li .promos ul li {display:block; float:left; width:280px; margin:0 45px 0 0; text-align:center} #mastnav ul li#menu-item-130 ul li .promos ul li.last {margin-right:0} #mastnav ul li#menu-item-130 ul li .promos figure {padding:0; margin:0 0 10px} #mastnav ul li#menu-item-130 ul li .promos h2 {margin:0 0 10px; text-transform:uppercase; font-size:17px; font-weight:400; color:#fff; line-height:20px} #mastnav ul li#menu-item-130 ul li .promos p {font-size:11px; line-height::13px; margin:0; color:#fff} #mastnav ul li#menu-item-130 ul li .cta {margin:10px 35px 20px; border-top:1px solid #fff; padding:20px 0 0} #mastnav ul li#menu-item-130 ul li .cta .button {width:200px; margin:0 auto; display:block; float:none; text-decoration:none;background: #76bd1d; color:#fff; padding:0} /*Category Filters Nav*/ nav#filter .category-nav { display: flex; justify-content: center; } .categories-nav .menu-news-filters-container { display: flex; justify-content: center; width: 100%; position: relative; left: 5px; } /* homepage */ .panel {} .panel .bg {margin:0 auto; display:block} .panel article {background:url(img/ul.jpg) no-repeat center bottom; text-align:center; padding:15px 0 0; margin:0 0 20px} .panel article h2 {color:#575656; font-size:20px; line-height:25px; margin:0 0 15px; font-weight:400 /* foco light */} .panel article p {color:#575656; font-size:16px; line-height:19px; margin:0 0 15px /* foco light */} #latest-news {margin:50px 0 0} #latest-news.sm, #video-archive.sm {margin:20px 0 0} #latest-news.related {margin:80px 0 0} #latest-news h3 { margin:0 0 25px; padding:0 0 15px; border-bottom:1px solid #acb0be; font-size:24px; line-height:28px; color:#19223d; text-align:center; display:block; font-weight:400} #latest-news a {text-decoration: none;color: #19223d;} #latest-news li {display:block; float:left; width:300px; margin-right:50px; text-align:center} #latest-news.four li {width:226px; margin-right:32px} #latest-news #iso li {margin-right:0;-moz-box-sizing: border-box;box-sizing: border-box} .inner.news #latest-news li {margin-bottom:20px} #latest-news li.last, #latest-news #iso li.last, #latest-news.four li.last {margin-right:0} #latest-news li figure, #latest-news li .hide {margin:0; padding:0; position:relative} #latest-news li figure:after, #latest-news li .hide:after {content: url(img/arrow-up.png); position:absolute; bottom:-6px; left:50%; margin-left:-12px;} #latest-news.four li .hide:after {bottom:-6px} #latest-news li .hide:after {bottom:44px;transition: all 0.2s ease} #latest-news.four li .hide:after {bottom:34px} #latest-news li article {padding:0 30px} #latest-news li h2 {font-weight:400; color:#19223d; font-size:16px; line-height:20px; text-transform:uppercase; margin:10px 0 15px /* foco light */} #latest-news li h2 a {text-decoration:none;color:#19223d} #latest-news li p {font-size:13px; line-height:16px; margin:0; font-weight:400; font-style:italic /* foco light italic */} #latest-news li .hide {height: 280px;overflow: hidden;position: relative} #latest-news.four li .hide {height: 200px} #latest-news li .hide article {background-color: rgba(255,255,255,0.5);position: absolute; top:230px;transition: all 0.2s ease; width:100%; text-align:center; padding:0; height:180px} #latest-news li .hide.recipe article {height:130px} #latest-news.four li .hide article {top:160px} #latest-news li:hover .hide article {background-color: rgba(255,255,255,0.9);top: 50px} .hashchange.no-canvas #latest-news li:hover .hide article, .no-hashchange #latest-news li:hover .hide article {background:#fff} .no-hashchange h3.mtitle {display:block !important;margin: 15px 0 0 !important;font-size: 13px !important;color: #575656 !important;font-weight: 700 !important;text-transform: uppercase; border-bottom:none !important; padding:0 !important; line-height:18px !important /* foco bold */} .no-hashchange h3.mtitle a {color: #575656; text-decoration:none} #latest-news li:hover .hide.recipe article {top:100px} #latest-news.four li:hover .hide article {top:20px} #latest-news li:hover .hide:after {bottom:224px; opacity:0.9} #latest-news li:hover .hide.recipe:after, #latest-news.four li:hover .hide:after {bottom:174px} #latest-news div.padded {padding:15px} #latest-news div.padded h2 {margin:0 0 25px; font-size:13px; color:#575656; font-weight:700; text-transform:uppercase /* foco bold */} #latest-news.four div.padded h2 {margin-bottom:5px} #latest-news .hide.recipe div.padded h2 {margin-bottom:15px} #latest-news div.padded p {text-align:left; font-style:normal; margin-bottom:12px} #latest-news.four div.padded p {margin-bottom:5px} .more { background:url(img/more.png) no-repeat center top; padding:30px 0 0} .more a {font-size:10px; color:#575656; text-decoration:none; font-weight:700; text-transform:uppercase /* foco bold */} .more a:hover {text-decoration:underline} /*Video Archive*/ #video-archive ul{list-style:none;padding:0;} #video-archive li{display: block;float: left;width: 300px;text-align: center;margin-right:50px;} #video-archive li:nth-child(3n+0){margin-right:0;} #video-archive li img {width:300px;height:230px;} #video-archive h2{margin: 0 0 25px;font-size: 13px;color: #19223d;font-weight: 700;text-transform: uppercase /* foco bold */;padding: 15px 0 0;} .video-archive-thumb{max-height: 235px;} /* inner page */ #breadcrumbs {margin:15px 0 30px; font-size:12px; color:#575656} #breadcrumbs.sm {margin:15px 0 10px} #breadcrumbs a {color:#76bd1d; text-decoration:none} #breadcrumbs a:hover {text-decoration:underline} header {margin-bottom: 10px;} header.home{margin-bottom:0;} .hero {min-height:430px;width:100%; display:table; height:430px} .hero header, .hero .middle {display:table-cell; vertical-align:middle} /*.single-monthly-offers .hero {display: none;}*/ .no-hashchange .hero header, .no-hashchange .hero middle {margin-top:100px} .hero h1, .hero h2 {color:#fff; margin:0 0 0 40px; font-weight:400; line-height:38px; margin-left:40px; display:block; width:300px;} .page-id-56 .hero h1 {margin-top: -40px;} .hero h1 {font-size:36px} .hero h2 {font-size:28px} .blog .hero h2, .single-post .hero h2, .post-type-archive-customer .hero h2, .post-type-archive-supplier .hero h2, .single-recipe .hero h2 {color:#d2bca4} .single-supplier .hero h1 {color:#fff} .single-supplier .hero h2 {color:#d2bca4} .hero h1 span {color:#a3d1ea} .hero.half {margin:50px 0} .vid {position:relative; width:430px; float:right} .vid figure {padding:0; margin:0} .play {position:absolute; top:50%; margin-top:-56px; left:50%; margin-left:-56px; display:block; opacity:0.7;o-transition: .2s;-ms-transition: .2s;-moz-transition: .2s;-webkit-transition: .2s;transition: .2s} .vid:hover .play {opacity:1} #video-archive .play {width:112px; height:111px; display:block; opacity:0.7;o-transition: .2s;-ms-transition: .2s;-moz-transition: .2s;-webkit-transition: .2s;transition: .2s;position: relative;bottom: 100px;} .inner {border-top: 1px solid #acb0be; border-bottom: 1px solid #acb0be; padding:30px 0 10px; position:relative} .inner.no-border {border-top: none; padding:10px 0} .inner.no-border-bt {border-bottom:none} .inner.mb {margin-bottom:50px;/*padding-bottom:20px*/} .post-type-archive-sbproduct .inner {margin: 0 auto 25px;} .sbintro {max-width:1000px;margin:0 auto;} .two-col {} .two-col article {float:left; width:460px} .container.line {border-top: 1px solid #acb0be; margin-top:20px} .inner article h1, .inner article h2, .inner article h3, .inner article h4, .inner article h5, .inner article h6 {font-size:30px; font-weight:700; color:#19223d; margin:0 0 30px; line-height:35px /* foco bold */} .inner article p {font-size:16px; line-height:22px; margin:0 0 25px; color:#575656} .inner article p a {color:#76bd1d; text-decoration:underline} .inner article p a:hover {text-decoration:none} .inner.product-single article h1 {font-size:22px; line-height:28px; margin-bottom:25px} .pb {margin-bottom:20px} /* isotope */ .isotope-item {z-index: 2} .isotope-hidden.isotope-item {pointer-events: none;z-index: 1} .isotope, .isotope .isotope-item {-webkit-transition-duration: 0.8s;-moz-transition-duration: 0.8s;transition-duration: 0.8s} .isotope {-webkit-transition-property: height, width;-moz-transition-property: height, width;transition-property: height, width} .isotope .isotope-item {-webkit-transition-property: -webkit-transform, opacity;-moz-transition-property:-moz-transform, opacity;transition-property:transform, opacity} .container.big {width:1050px} #latest-news #iso { margin-left:25px} #filter {} #filter ul {} #filter ul li {display:block; float:left; margin:0 10px 10px 0} #filter ul li a {display:block; padding:8px 40px 8px 8px; font-size:13px; line-height:15px; color:#19223d; text-decoration:none; text-transform:uppercase; font-weight:700; background:#e6e5ea url(img/off.jpg) no-repeat right center /* foco bold */} #filter ul li a:hover, #filter ul li a.active {background:#d9ecbf url(img/on.jpg) no-repeat right center } /* news */ .load-more {position:absolute; bottom:-50px; left:50%; margin-left:-41px; background:url(img/load.jpg) no-repeat; width:82px; height:77px; text-align:left; text-transform:capitalize; text-indent:-99999px;animation-delay: 2s;-webkit-animation-delay: 2s;animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;-webkit-animation-fill-mode: both; z-index:999} #share {position:absolute; bottom:-25px; padding:0 5px; width:85px; background:#fff;left: 50%;margin-left: -47px;} #share ul {text-align:center} #share li {display:inline-block; *display:inline; zoom:1} #share li a {display:block; text-align:left; text-transform:capitalize; text-indent:-99999px; width:23px; height:23px; opacity:1;o-transition: .2s;-ms-transition: .2s;-moz-transition: .2s;-webkit-transition: .2s;transition: .2s} #share li.print a {background:url(img/share-print.jpg) no-repeat} #share li.twitter a {background:url(img/share-tweet.jpg) no-repeat} #share li.facebook a {background:url(img/share-facebook.jpg) no-repeat} #share li a:hover {opacity:0.7} #share h5 {font-size:9px; line-height:10px; color:#19223d; display:block; text-align:center; margin:5px 0 0} .up, .down {position:absolute; display:block; left:50%; margin-left:-21px} .up {top:0} .down {bottom:0} /* customers */ .img-center {margin:0 auto; display:block; opacity:0.7;o-transition: .2s;-ms-transition: .2s;-moz-transition: .2s;-webkit-transition: .2s;transition: .2s} .img-center:hover {opacity:1} #single-table {margin-bottom:30px} #single-table td {} #single-table td article {padding:25px 35px} #single-table td article h1, .contact .left h1 {color:#19223d; margin:0 0 25px; font-size:22px; line-height:26px; font-weight:700 /* foco bold */} #single-table td article p { font-size:16px; line-height:20px; color:#575656; margin:0 0 25px} .testimonial {border-bottom:1px solid #575656;border-top:1px solid #575656; padding:10px 0} .testimonial img {float:left; margin:0 5px 0 0} #single-table td article .testimonial p {/* savoy font 23px*/ font-size:14px; color:#575656; line-height:18px; font-style:italic; margin:0} #single-table td article .testimonial p span {font-size:25px} .cta-visit {display:block; right:20px; bottom:20px; position:absolute; font-size:16px; line-height:17px; color:#fff; font-weight:700; text-transform:uppercase; text-decoration:none; padding:4px 7px; background:#76bd1d;o-transition: .2s;-ms-transition: .2s;-moz-transition: .2s;-webkit-transition: .2s;transition: .2s; /* foco bold */} .cta-visit:hover {background:#575656} #info {margin:50px 0; border-top: 1px solid #acb0be; padding-top:40px} #info div {float:left; width:450px} #info div.wpcf7 {width:100%} #info div.wpcf7-response-output {width:auto} #info div.right {float:right} #info div h2, #info div article h3 {color:#19223d; font-size:20px; line-height:25px; margin:0 0 20px; font-weight:400} #info div article {background:#e6e5ea; padding:15px 20px; min-height:80px; width:410px} #info div article ul {} #info div article li {color:#19223d; font-size:16px; float:left; width:50%; margin:10px 0; line-height:18px} #info div article h3 {margin-bottom:10px; padding:8px 0 5px 45px; background:url(img/customer.jpg) no-repeat left top} #info div input.wpcf7-text {height:30px; line-height:30px; background:#fff; border:none; font-size:11px; color:#575656; float:left; width:70%; padding:0 10px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box} #info div input.wpcf7-submit, .contact form input.wpcf7-submit, .button {height:30px; width:25%; float:right; color:#fff; background:#76bd1d; text-transform:uppercase; text-align:center; line-height:30px; font-size:16px; font-weight:700;o-transition: .2s;-ms-transition: .2s;-moz-transition: .2s;-webkit-transition: .2s;transition: .2s; border:none; cursor:pointer; text-decoration:none /* foco bold */} #info div input.wpcf7-submit:hover, .contact form input.wpcf7-submit:hover, .button:hover {background:#575656} #info div.wpcf7 p {margin:0} /* become a customer */ #join {margin-bottom:40px} #join h3 {display:block; margin:0; padding:15px; font-size:28px; line-height:30px; color:#e6e5ea; font-weight:700 /* foco bold */} #join article {position:absolute; bottom:0; left:0; right:0;background:url(img/white-ov.png) repeat;min-height:140px; padding:20px 0 0} #join ul {padding:0 25px} #join li {display:block; background:url(img/bullet.png) no-repeat left top; padding:0 0 0 28px; font-size:16px; line-height:20px; color:#19223d; margin:0 0 15px;} .cta-visit.login-register {right:0; bottom:-50px; padding:6px 0; width:166px; text-align:center} /* contact */ .contact {} .contact .left {width:483px; float:left} .contact .right {width:483px; float:right} .contact .right .promos {margin:8px 0 0} .contact .right .promos address, .contact .right .promos img {float:left; width:235px} .contact .right .promos address {background:#e6e5ea; height:170px; font-size:14px; line-height:22px; color:#19223d; font-style:normal; padding:15px 20px 0 30px; width:185px} .contact .right .promos address p {margin:0} .contact .right .promos img {float:right} .contact .left p {font-size:16px; line-height:22px; color:#575656; margin:0 0 15px} #methods {border-top:1px solid #19223d;border-bottom:1px solid #19223d; width:280px; margin:20px auto; padding:20px 0 5px} #methods ul {padding:0 20px} #methods ul li {display:block; margin:0 0 15px; padding:0 0 0 45px; font-size:29px; line-height:34px; color:#19223d; background:url(img/contact-us.jpg) no-repeat 0 3px} #methods ul li.email {background-position:0 -37px} #methods ul li a {color:#19223d; text-decoration:none; font-size:22px} .contact form p {margin:0 !important} .contact form .left, .contact form .right {width:225px; float:left} .contact form .left {} .contact form .right {float:right} .contact form .left input, .contact form .left select, .contact form .right textarea {border:1px solid #b0b3c0; width:211px; font-size:11px; color:#575656; height:27px; padding:0 6px; line-height:27px; margin-bottom:12px} .contact form .left select {width:225px} .contact form .right textarea {margin-bottom:0; height:189px} .contact form input.wpcf7-submit {float:left} .no-hashchange .contact form input.wpcf7-submit {width:100%} /* suppliers */ .centered {text-align:center} #stats {margin-bottom:40px} #stats li {display:inline-block; *display:inline; zoom:1; width:160px; height:140px; background:url(img/stats.png) repeat; margin:0 25px 0 0; vertical-align:top; color:#fff; font-size:17px; padding:20px 0 0 0} #stats li.last {margin-right:0} #stats li span {font-size:75px; font-weight:700; display:block; line-height:75px /* foco bold */} .post-type-archive-supplier .hero h2 {color:#fff; font-size:23px; font-weight:700; margin:0; line-height:28px; width:100% /* foco bold */} /* recipes */ #latest-news ul.third { float:left; display:block; width:300px; margin-right:50px} #latest-news ul.third.last {margin-right:0} #latest-news ul.third li {margin-right:0} #latest-news ul.third li.title {border-bottom:1px solid #979cae; text-align:center; padding:0 0 10px} #latest-news ul.third li.title h2 {margin:0;color:#19223d; font-size:24px; line-height:26px; font-weight:400; text-transform:none} .two-col article {width: 484px} .single-supplier .two-col article {/*max-height: 450px;overflow-y: auto;padding-right: 2.5%*/; padding-right:10px; width:474px} .stickit {margin-left: 570px;position: fixed;top: 35px} .stickit-end {bottom: 40px;position: absolute;right: 0} .ingredients {padding:30px 0;border-top: 1px solid #acb0be;border-bottom: 1px solid #acb0be; position:relative; margin-bottom:35px} .inner article .ingredients h3 {margin:0 0 20px; font-size:18px; color:#19223d;font-weight:700; line-height:20px /* foco bold */} .inner article .ingredients h3 span {font-size:12px; font-weight:400} .inner article .ingredients h4, .inner article .method h5 {font-size:14px; font-weight:700; color:#19223d; margin:0 0 15px; line-height:16px /* foco bold */} .inner article .inner article .ingredients ul {margin:0} .inner article .ingredients li {font-size:13px; line-height:19px; display:block; color:#19223d; margin:0; font-style:italic /* foco italic */} .inner article .method {padding:0 0 30px;border-bottom: 1px solid #acb0be;} .inner article .method ol {list-style:decimal; margin:0; padding:0 0 0 20px} .inner article .method li {font-size:13px; line-height:19px; color:#19223d; margin:0 0 15px} .vid.recipe-gallery, .vid.single-product {width:484px} .vid.recipe-gallery .small {margin:15px 0 0; float:left} .vid.recipe-gallery .small.right {float:right} /* product */ .size, .inner article .login-single p, .inner article .buy p {font-size:12px; color:#575656; display:block; margin-bottom:20px} .inner article .login-single p a, .inner article .buy p a {color:#575656;text-decoration: underline} .inner article .login-single p a:hover, .inner article .buy p a:hover {text-decoration:none} .buy {margin-bottom:25px} .buy .button {width:85px; float:left; height:auto; line-height:17px; padding:5px 0} .inner article .buy p {float:left; margin:25px 0 0 15px} .product-cta {display:block; margin:50px 0 0; width:100%} .product-cta li {display:block; float:left; width:151px; background:url(img/journey.jpg) no-repeat left top; height:45px; padding:5px 0 0 54px} .product-cta li.recipe {float:right; background:url(img/plate.jpg) no-repeat left top} .product-cta li .button {font-size:16px; text-align:left; padding:0 10px; width:131px} .product-cta li .button span {float:right} /* sticky supplier */ .stickem {width: 430px; float: right} .hidden {width:100%; height:auto} .fixed-wrap {position: static; top: 69px} .fixed-wrap.fixed {position: fixed} .fixed-wrap.bottom {position: absolute; bottom: 0; top: auto} .fixed-wrap .fancybox-media {display: block;position: relative} .fixed-wrap .fancybox-media figure {margin: 0} /* contact form 7 */ span.wpcf7-not-valid-tip {display:none !important} input.wpcf7-not-valid {border-bottom:2px solid #F00 !important} body div.wpcf7-response-output {margin: 10px 0 0; font-size:13px; float:left} /* footer */ #mastfoot {background:#e6e5ea; padding-bottom:20px; margin:40px 0 0} #mastfoot .head {background:#b0b3c0; width:100%; margin:0 0 25px} #mastfoot .head ul {} #mastfoot .head ul li, #mastfoot .content li {display:block; border-left: 1px solid #fff; min-height:30px; line-height:30px; width:33.3333%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; float:left; text-align:center} .no-hashchange #mastfoot .head ul li, .no-hashchange #mastfoot .content li.signup {width:30%} .no-hashchange #mastfoot .content li.signup {margin-left:-70px} #mastfoot .head ul li.last {border-right: 1px solid #fff} #mastfoot .head ul li h4, #mastfoot .head ul li h5, #mastfoot .head ul li h6 {font-size:12px; color:#fff; text-transform:uppercase; margin:0; font-weight:400; line-height:30px} #mastfoot .content li {border-left:none; min-height:0; line-height:normal} #mastfoot .inav ul {padding:0 40px} #mastfoot .inav li {display:block; float:left; width:50%; font-size:12px; line-height:14px; margin:0 0 5px; text-align:left} #mastfoot .inav li a {color:#979cae; text-decoration:none} #mastfoot .content ul.cta {padding:0 30px} #mastfoot .cta li {display:block; width:50%; font-size:12px; color:#979cae; margin:0 0 20px; padding:6px 0 0 35px; background:url(img/footer-icons_1.jpg) no-repeat; min-height:28px; text-align:left} #mastfoot .cta li.email {background-position:0 -95px} #mastfoot .cta li.fax {background-position:0 -46px} #mastfoot .cta li.youtube {background-position:0 -46px} #mastfoot .cta li.twitter {background-position:0 -140px} #mastfoot .cta li a {color:#979cae; text-decoration:none} ul.accreditations {width: 80%;float: right;} .accreditations li {float:left; margin: 0 2px;} li.red {width: 40px !important; height:40px; background-position: 0 0px; background: url(img/accreditations.png) no-repeat;} li.food {width: 30px !important; height:40px; background-position: -45px 0px !important; background: url(img/accreditations.png) no-repeat;} li.pack {width: 30px !important; height:40px; background-position: -77px 0px !important; background: url(img/accreditations.png) no-repeat;} li.glob {width: 30px !important; height:40px; background-position: -111px 0px !important; background: url(img/accreditations.png) no-repeat;} li.ukpe {width: 55px !important; height:40px; background-position: -148px 0px !important; background: url(img/accreditations.png) no-repeat;} a.acc-link {display:block; height:40px;} #mastfoot .content p {color:#b0b3c0; font-size:11px; line-height:12px; margin:0 0 10px; text-align:center; display:block; padding:0 30px} #mastfoot .content form p {padding:0} #mastfoot .content form {position:relative; width:85%; margin:0 auto} #mastfoot .content form input.wpcf7-text {width:100%; padding:10px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; color:#b0b3c0; text-transform:uppercase; font-size:12px; border:none} #mastfoot .content form input.wpcf7-submit {position:absolute; background:url(img/search.jpg) no-repeat; width:20px; height:20px; text-align:left; text-transform:capitalize; text-indent:-99999px; right:10px; top:7px; cursor:pointer; border:none} #mastfoot .foot {color:#979cae; text-align:center; margin-top:40px} #mastfoot .foot nav, #mastfoot .foot ul {display:inline-block; *display:inline; zoom:1;} #mastfoot .foot li, #mastfoot .foot span.copyright {display:inline-block; *display:inline; zoom:1; font-size:10px} #mastfoot .foot li {border-right:1px solid #979cae; padding-right:5px} #mastfoot .foot li a {color:#979cae; text-decoration:none} #mastfoot .foot li a:hover, #mastfoot .inav li a:hover, #mastfoot .cta li a:hover {text-decoration: underline} h6.m-hide {display:none} /*Countdown Clock*/ #clockwrapper { width:100%; text-align: center; height:0; } /********************************** Changes to CLOCK for BANNER: **********************************/ /* Change/add the lines below to #clockdiv height: 30px; padding: 10px; Add styling below to increase title size: div#clockdiv h2 { font-size: 30px; } */ #clockdiv{ color: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 30px; background: #76bd1d; font-family: foco,Arial, Helvetica, sans-serif; height: 75px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; overflow: hidden; z-index: 99999; max-width: 485px; } #clockdiv .left { float:left; width: 49%; padding: 0 10px 0px 10px; max-height: 70px; } #clockdiv .right { float:right; width:43% } .clock-fig { display: inline-block; font-size: 40px; line-height: 45px; float: left; padding: 0px 10px 0px 10px; } #clockdiv > div{ display: inline-block; } #clockdiv h2 { font-size:19px; padding-top:5px; margin:0; font-weight:400; line-height: 18px; padding: 10px; } #clockdiv a { font-size: 13px; position: relative; top: 5px; color: #fff; z-index: 100; text-decoration: none; height: 50px; display: block; background: #76bd1d; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; } #clockdiv p{ font-size:15px; margin: 0; } #clockdiv div > span{ display: inline-block; } .smalltext{ font-size: 13px; line-height:13px; } /* hompepage animation */ #animation-area { /*background: #19223d;*/ } #animation-area .wrap { /*max-width: 1020px;*/ margin: 0 auto; background: url('img/map.jpg') repeat-y center center; background-attachment: fixed; overflow: hidden; } #animation-area .area { min-height: 719px; position: relative; z-index: 10; margin: -110px 0 -16px 0; } #animation-area .area .on-top { z-index: 1000; } #animation-area .area .higher { z-index: 2000; } #animation-area .area .triangles { height: 719px; width: 1520px; position: absolute; top: 50%; left: 50%; z-index: 100; margin-left: -760px; margin-top: -359.5px; background: url('img/blue-triangles.png') center center; } #animation-area .area .triangles .extend { height: 719px; width: 2000px; background: #19223d; position: absolute; top: 0; } #animation-area .area .triangles .left { right: 100%; } #animation-area .area .triangles .right { left: 100%; } #animation-area .area .text, #animation-area .area .video { position: absolute; width: 229px; height: 169px; background: url('img/textframe-bg.png'); top: 50%; margin-top: -96.5px; left: 50%; margin-left: -490px; } #animation-area .area .video { background: none; margin-right: -490px; left: auto; right: 50%; } #animation-area .area .frame { border: solid 12px #161c26; border-right-color: #f5f6f8; border-bottom-color: #f5f6f8; } #animation-area .area .frame .right-tag { margin-left: 12px; } #animation-area .area .right-tag { position: absolute; top: 50%; left: 100%; margin-top: -30.5px; height: 61px; width: 184px; background: url('img/textframe-tag.png'); } /*#area-onea{display:none;}*/ #area-onea .main-image { position:absolute; top: 50%; left: 50%; margin: -250px 0 0 -700px; } #area-onea .triangles {margin-left:-747px;} #animation-area #area-1 .main-image { position: absolute; top: 50%; left: 50%; /* margin: -229.5px 0 0 -257px; width: 514px; height: 459px; */ width: 514px; height: 360px; margin: -155px 0 0 -257px; } #animation-area #area-1 .main-image img { position: relative; z-index: 1200; } #animation-area #area-1 .main-image .scroll { /* width: 60px; height: 101px; margin-left: -30px; background: url('img/scroll-indicator.png'); margin-top: -20px; */ width: 54px; height: 66px; background: url('img/illustration-one-tag_shorter.png'); margin-left: -27px; margin-top: -35px; position: absolute; top: 100%; left: 50%; z-index: 1100; -webkit-animation: scroll 2s; animation: scroll 2s; /*-webkit-animation: scroll 4s; animation: scroll 4s;*/ } @-webkit-keyframes scroll { 0% { margin-top: -35px; } 50% { margin-top: -45px; } 100% { margin-top: -35px; } } @keyframes scroll { 0% { margin-top: -35px; } 50% { margin-top: -45px; } 100% { margin-top: -35px; } } .no-cssanimations #animation-area #area-1 .main-image .scroll { margin-top: -20px; } #animation-area #area-2 .main-image { width: 350px; height: 410px; position: absolute; top: 50%; left: 50%; margin: -205px 0 0 -175px; } #animation-area #area-2 { min-height: 830px; } #animation-area #area-2 .area-wrap { max-width: 532px; position: absolute; left: 50%; top: 50%; width: 100%; margin-left: -266px; /*margin-top: -195px;*/ margin-top: -400px; } #animation-area #area-2 .area-wrap .tab { width: 517px; height: 84px; margin: 0 auto -1px auto; background: url('img/animation-area-header-tab.png') center center no-repeat; position: relative; } #animation-area #area-2 .area-wrap .tab .video-title { position: absolute; bottom: 4px; right: 16px; } #animation-area #area-2 .area-wrap .n-video-title { text-align: center; margin-bottom: -45px; } @media only screen and (max-width: 380px) { #animation-area #area-2 .area-wrap .n-video-title { margin-bottom: -30px; } } #animation-area #area-2 .area-wrap .frame { width: 100%; height: auto; background: url('img/video-frame.jpg'); background-size: cover; border: none; position: relative; z-index: 300; } #animation-area #area-2 .area-wrap .frame .inner { padding: 10px; border: none; } #animation-area #area-2 .area-wrap .frame .tyres.left { width: 162px; height: 113px; background: url('img/tyres-left.png'); position: absolute; right: 100%; top: 10px; } #animation-area #area-2 .area-wrap .frame .tyres.right { width: 129px; height: 41px; background: url('img/tyres-right.png'); position: absolute; left: 100%; top: 106px; } #animation-area #area-2 .area-wrap .frame .tyres.right .landrover { width: 91px; height: 49px; background: url('img/landrover.png'); position: absolute; left: 60px; top: 2px; } #animation-area #area-2 .area-wrap .scroll { width: 50px; height: 167px; background: url('img/video-scroll-down.png'); position: absolute; right: -40px; bottom: -55px; z-index: 100; } @media only screen and (max-width: 620px) { #animation-area #area-2 .area-wrap .frame .tyres { display: none; } #animation-area #area-2 .area-wrap { max-width: 90%; margin: -110px 0 0 0 !important; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #animation-area #area-2 .area-wrap .tab { width: 395px; height: 65px; background-size: 100% auto !important; } #animation-area #area-2 .area-wrap .tab .video-title { width: 120px; } #animation-area #area-2 .area-wrap .frame .inner { padding: 5px; } #animation-area #area-2 .area-wrap .scroll { right: 50%; margin-right: -25px; bottom: -45px; } } @media only screen and (max-width: 476px) { #animation-area #area-2 .area-wrap .tab { width: 260px; height: 44px; } #animation-area #area-2 .area-wrap .tab .video-title { width: 75px; bottom: 2px; } } @media only screen and (max-width: 380px) { #animation-area #area-2 .area-wrap { margin: -78px 0 0 0 !important; } } #animation-area #area-3 .main-image { width: 1004px; height: 600px; position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -502px; } #animation-area #area-3 .main-image .leaves { position: absolute; top: 0; left: 0; } #animation-area #area-3 .main-image .leaf { width: 9px; height: 18px; position: absolute; bottom: 100%; left: 0; z-index: 9999; -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -ms-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; transition: all 3s ease-in-out; } #animation-area #area-3 .main-image .leaf.left { left: 300px; } #animation-area #area-3 .main-image .leaf.middle { left: 50%; margin-left: -9px; } #animation-area #area-3 .main-image .leaf.right { left: auto; right: 300px; } #animation-area #area-3 .main-image .leaf.high { bottom: 60%; } #animation-area #area-3 .main-image .leaf.higher { bottom: 70%; } #animation-area #area-3 .main-image .leaf.highest { bottom: 90%; } #animation-area #area-3 .main-image .leaf span { display: block; width: 9px; height: 18px; background: url('img/leaf.png'); opacity: 0; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } #animation-area #area-3 .main-image .leaf.fall span { opacity: 1; } #animation-area #area-3 .main-image .leaf.fall.destroy span { opacity: 0; } #animation-area #area-3 .main-image .leaf.fall { bottom: 0; } #animation-area #area-3 .main-image .leaf div { -webkit-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out; } #animation-area #area-3 .main-image .leaf.fall.harsh div { -webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg); } #animation-area #area-3 .main-image .leaf.fall.soft div { -webkit-transform: rotate(-100deg); -moz-transform: rotate(-100deg); -ms-transform: rotate(-100deg); -o-transform: rotate(-100deg); transform: rotate(-100deg); } #animation-area #area-3 .main-image .leaf.fall.moderate div { -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -ms-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); } #animation-area #area-4 .main-image { width: 967px; height: 535px; position: absolute; top: 50%; left: 50%; margin: -267.5px 0 0 -478px; } #animation-area #area-4 .main-image .plane { position: absolute; top: 36px; left: 50%; margin-left: -271px; } #animation-area #area-5 .main-image { width: 690px; height: 451px; position: absolute; top: 50%; left: 50%; margin: -225.5px 0 0 -345px; } #animation-area #area-5 .main-image .tag { position: absolute; bottom: -20px; right: -40px; } #text-wrap { margin: 0 0 40px 0; height: 130px; } #text-wrap article.static { position: static; } #text-wrap article { position: fixed; background: #FFF; background: rgba( 255, 255, 255, 0.9 ); left: 0; right: 0; bottom: 0; width: 100%; z-index: 9999; padding: 20px 0; text-align: center; min-height: 102px; opacity: 0; visibility: hidden; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } #text-wrap article.show { opacity: 1; visibility: visible; } #text-wrap article .wrap, .update-text article { padding: 0 0 20px 0; background: url('img/ul.jpg') bottom center no-repeat; max-width: 720px; margin: 0 auto; } #text-wrap article h2, .update-text article h2 { margin: 0 0 14px 0; font-size: 40px; font-weight: 100; color: #19223d; font-family: 'Foco', sans-serif; } #text-wrap article p, .update-text article p { font-size: 17px; font-weight: 400; line-height: 22px; color: #19223d; margin: 0; font-family: 'Foco', sans-serif; } .update-text { display: none; position: relative; z-index: 9999; padding: 20px; text-align: center; background: #FFF; } @media only screen and ( max-width: 1024px ) { #animation-area .area { min-height: 600px; margin-top: 0; } #area-onea main-image { margin-top:-50px; } #animation-area #area-1 .main-image { width: 400px; /*margin: -178.5px 0 0 -200px;*/ margin: -140px 0 0 -200px; height: auto; } #animation-area #area-1 .main-image img, #animation-area #area-2 .main-image img { width: 100%; height: auto; } #animation-area #area-1 .main-image .scroll { /*margin-top: -16px;*/ margin-top: -27px; } @-webkit-keyframes scroll { 0% { margin-top: -27px; } 50% { margin-top: -40px; } 100% { margin-top: -27px; } } @keyframes scroll { 0% { margin-top: -27px; } 50% { margin-top: -40px; } 100% { margin-top: -27px; } } /*@-webkit-keyframes scroll { 0% { margin-top: -16px; } 25% { margin-top: -35px; } 50% { margin-top: -16px; } 75% { margin-top: -35px; } 100% { margin-top: -16px; } } @keyframes scroll { 0% { margin-top: -16px; } 25% { margin-top: -35px; } 50% { margin-top: -16px; } 75% { margin-top: -35px; } 100% { margin-top: -16px; } }*/ #animation-area #area-2 { padding: 50px 0; } #animation-area #area-2 .frame, #animation-area #area-2 .main-image { position: relative; top: auto; left: auto; right: auto; margin: 0 auto 20px auto; } #animation-area #area-2 .main-image { height: auto; width: 200px; } #animation-area .area .right-tag { display: none; } } @media only screen and ( max-width: 999px ) { } @media only screen and ( max-width: 800px ) { #animation-area #area-5 .main-image { width: 320px; height: auto; margin: -105px 0 0 -160px; } #animation-area #area-5 .main-image .tag { right: -30px; width: 60px; } } @media only screen and ( max-width: 620px ) { #animation-area #area-3 .main-image { width: 620px; height: auto; margin: -185px 0 0 -310px; } #animation-area #area-3 .main-image .leaf, #animation-area #area-3 .main-image .leaf span { width: 5px; height: 10px; background-size: 100% auto; } #animation-area #area-3 .main-image .leaf.left { left: 100px; } #animation-area #area-3 .main-image .leaf.right { right: 150px; } #animation-area #area-4 .main-image { width: 620px; height: auto; margin: -173px 0 0 -310px; } #animation-area #area-4 .main-image .plane { margin-left: -164px; width: 330px; } #text-wrap { display: none; } .update-text { display: block; } #animation-area #area-1 { min-height: 500px; } /*#animation-area #area-1 .main-image { margin-top: 0; top: 20px; }*/ #animation-area #area-3 { min-height: 400px; } #animation-area #area-4, #animation-area #area-5 { min-height: 308px; } .hero {min-height: 330px; height:auto} } @media only screen and ( max-width: 430px ) { #animation-area #area-1, #animation-area #area-5 { min-height: 0; padding: 25px 0; } #animation-area #area-1 .main-image { top: auto; left: auto; width: 262px; margin: 0 auto; position: relative; padding: 0 0 46px 0; } #animation-area #area-2 { padding: 25px 0; } #animation-area #area-5 .main-image { width: 262px; left: auto; margin: 0 auto; top: auto; position: relative; } #animation-area #area-5 .main-image .tag { right: 15px; width: 40px; bottom: 0; } #animation-area #area-1 .main-image .scroll { margin-top: -10px; top: auto; bottom: -1px; } /*@-webkit-keyframes scroll { 0% { margin-top: -10px; } 25% { margin-top: -35px; } 50% { margin-top: -10px; } 75% { margin-top: -35px; } 100% { margin-top: -10px; } } @keyframes scroll { 0% { margin-top: -10px; } 25% { margin-top: -35px; } 50% { margin-top: -10px; } 75% { margin-top: -35px; } 100% { margin-top: -10px; } }*/ } /* ========================================================================== 5. Responsive ========================================================================== */ @media only screen and (min-width: 1000px) { #mastnav {display:block !important} } @media only screen and (max-width: 999px) { img {max-width:100%; height:auto} .container, .container.big {width:95%} .container.big .container {width:100%} #area-onea .main-image img {max-width:none;} .stickit {margin-left:52%} /*.stickit, .stickit-end {margin-left:0; position: relative !important}*/ .stickem {width: 43%} /* nav */ #mastnav {display:none;margin-top:0} #mastnav ul {text-align:left} #mastnav ul li {display:block; width:100%;border-bottom:1px solid #acb0be;border-right:none;margin: 0} #mastnav ul li a {width:100%; padding:10px 0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; display:block; font-size:14px} #mastnav ul li:hover, #mastnav ul li:hover>a, #mastnav ul li a:hover, #mastnav ul li.current-menu-item a, #mastnav ul li.current-page-ancestor a, #mastnav ul li.current_page_parent a, .single-supplier #mastnav ul li#menu-item-130>a, .single-customer #mastnav ul li#menu-item-115>a, .single-recipe #mastnav ul li#menu-item-26>a, .single-product #mastnav ul li#menu-item-24>a {background:none !important; color:#19223d !important} #mastnav ul li a:after {opacity:0 !important} #mastnav ul li.icon {display:none !important} #mastnav ul li ul {display:block; position:static; width:100%; left:0; margin-left:0; text-align:left;background:none; padding:0 20px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; padding-bottom:10px} #mastnav ul li ul li {text-align:left; border-bottom:none} #mastnav ul li ul li a {padding:5px 0; background:none !important} .toggle-bar {display: block !important; margin:20px 0 0; width:100%; border-top: 1px solid #acb0be;border-bottom: 1px solid #acb0be; padding:10px 0} .mtoggle .text {float:left;font-size: 14px;text-transform: uppercase;font-weight: 700;color: #19223d} .mtoggle .navicon {height: 4px;width: 34px;border-top: 12px double #19223d;border-bottom: 4px solid #19223d;font-size: 0;display: block;padding: 0; float:right} #mastnav ul li#menu-item-130 ul {display:none !important} /* home */ #latest-news.no-iso li {width: 30%;margin-right:5%} #latest-news.no-iso li.last {margin-right:0} #latest-news li article {padding: 0 5px} /* inner page */ .hero {min-height: 330px;background-size: cover !important;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box} .two-col article, .vid.recipe-gallery, .vid.single-product, .single-supplier .two-col article {width: 48.4%; padding-right:0} .vid {width: 43%} .product-cta li {width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; margin-bottom:10px} .product-cta li .button {padding: 0 10px;width: 100%;display: block;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} #latest-news.four li {width: 22.6%;margin-right: 3.2%} #latest-news li .hide article, #latest-news li figure:after, #latest-news li .hide:after {display:none} #latest-news li .hide {height:auto !important} h3.mtitle {display:block !important;margin: 15px 0 0 !important;font-size: 13px !important;color: #575656 !important;font-weight: 700 !important;text-transform: uppercase; border-bottom:none !important; padding:0 !important; line-height:18px !important /* foco bold */} h3.mtitle a {color: #575656; text-decoration:none} #info div {width: 45%} #info div article {width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;min-height: 150px} #info div article h3 {font-size: 16px} #info div input.wpcf7-submit {font-size: 12px} #join h3 {font-size: 16px;line-height: 22px;} #join li {font-size: 15px} #join .half {} .cta-visit {right: 0;left: 5px} /* recipes */ #latest-news ul.third {width:30%; margin-right:5%} #latest-news ul.third.last {margin-right:auto} #latest-news ul.third>li {max-width:100%; margin-right:0} #latest-news ul.third>li.last {margin-right:auto} .vid.recipe-gallery .small {width: 48%} /* news */ #latest-news #iso {margin-left:0} /* contact &*/ .contact .left, .contact .right {width: 48.3%; overflow:hidden} .contact .right .promos address {width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; height:auto; padding-bottom:15px} .contact .right .promos img {display:none} .contact form .left, .contact form .right {width: 100%;float: none} .contact form .left input, .contact form .left select, .contact form .right textarea {width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} /* footer */ #mastfoot .inav ul {padding: 0 20px} #mastfoot .cta li {width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box} } @media only screen and (max-width: 850px) { #stats li {width: 100px;height: 105px;font-size: 11px} #stats li span {font-size: 50px;line-height: 50px} } @media only screen and (max-width: 767px) { /* home */ #latest-news li h2 {font-size: 14px} /* inner page */ .play {margin-top: -25px;margin-left: -25px;width: 50px;height: auto} #info div {width: 48%} #join {width:100%} .full {display:block; width:100%; margin-bottom:20px} .stretch {width:100%} .hide-td {display:none} .mar-80 {margin-bottom:80px} /* table */ #single-table td {display: block;width: 100%; height:auto !important} #single-table td.vid-height {height:200px !important; padding-top:50px} /* contact */ .contact .left, .contact .right {width: 100%} .contact .right {margin-top:20px} .contact .right iframe {width:100%} /* footer */ #mastfoot .head ul li h4, #mastfoot .head ul li h5, #mastfoot .head ul li h6 {font-size: 10px} #mastfoot .content form input.wpcf7-text {font-size: 8px;line-height: 14px} #mastfoot .content ul.cta {padding: 0 10px} #mastfoot .inav li {width: 100%} } @media only screen and (max-width: 700px) { /* inner page */ #info {margin: 30px 0 0;padding-top: 30px} #info div {width: 100%; margin-bottom:20px;} #info div.screen-reader-response {width:auto} #info div.right {margin-bottom:0} #info div article {min-height: 0} #info div.wpcf7 {margin-bottom: 0} #latest-news.related {margin: 30px 0 0} } @media only screen and (max-width: 550px) { #area-onea .main-image { position: absolute; top: -3%; left: -50%; margin: 18px 35px; } #area-onea .main-image img { max-width: unset; width: 100%; position: relative; top: 0; left: 18%; } .stickit, .stickit-end {margin-left:0; position: relative !important} .stickem {width:100%; position:static} .fixed-wrap {position:static !important} .stickem .active {display:block !important} .stickem .hidden {display:none !important} /* inner page */ .hero {min-height: 230px; height:auto} .hero h1, .hero h2 {margin-left: 20px;width: auto} .inner {padding: 30px 0} .two-col article, .vid, .vid.recipe-gallery, .vid.single-product, .single-supplier .two-col article {width:100%; float:none} .two-col article {margin-bottom:20px} .play {margin-top: -56px;margin-left: -56px;width:auto;height: auto} .up, .down {display:none} #stats {margin-bottom:20px} #stats li {display: block;width: 70%;height: auto;padding: 10px 0;margin: 5px auto} #stats li.last {margin-right:auto} .post-type-archive-supplier .hero h2 {margin-bottom:20px} /* footer */ #mastfoot .head ul li {display:none} h6.m-hide {display:block;background: #b0b3c0;width: 100%;margin: 0 0 15px;font-size: 12px;color: #fff;text-transform: uppercase;font-weight: 400;line-height: 18px; padding:5px 10px; text-align:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box} #mastfoot .content li {width: 100%; margin-bottom:20px} #mastfoot .content p {font-size: 12px;line-height: 18px; padding:0; text-align:left} #mastfoot .content form {width: 300px;margin: 0; max-width:100%} #mastfoot .content ul.cta, #mastfoot .inav ul {padding: 0} #mastfoot .content li {margin-bottom: 10px} #mastfoot .foot {text-align: left;margin: 0} } @media only screen and (max-width: 500px) { .hero {min-height:180px; height:auto} .hero h1, .hero h2 {width: 60%;line-height: 30px;} .hero h1 {font-size: 25px;} .hero h2 {font-size: 20px;} #tel, #social {margin-left:20px} #clockdiv{ width:100%; height: 70px; } } @media only screen and (max-width: 479px) { /* home */ #latest-news.no-iso li {width: 300px; margin:0 auto 20px; float:none; max-width:100%} #latest-news.no-iso li.last {margin-right:auto} #latest-news li article {padding: 0 10px} /* inner */ .hero h1 {font-size: 20px} .postid-5569 .hero h1 { font-size: 18px; margin-top: -80px; margin-left: 5px; } #latest-news.four li {width:auto;margin:0 auto 10px; max-width:100%; float:none} #latest-news h3 {font-size: 18px;line-height: 22px} .inner.no-border {padding: 10px 0 30px} .load-more {bottom: -40px} /* recipes */ #latest-news ul.third {width:300px; margin:0 auto 20px; float:none; max-width:100%} #top nav ul {float: right;} #login {margin-top: 30px;} #clockdiv{border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;} } @media only screen and (max-width: 420px) { #social {display:none} #animation-area {margin-top: 50px;} .clock-fig{font-size: 30px;} #area-onea .main-image {margin: 18px 35px;} } @media only screen and (max-width: 400px) { /*Countdown Clock*/ #clockdiv h2 { font-size: 18px; padding: 3px; } .clock-fig { font-size: 23px; padding: 0px 5px 0px 5px; } #login h4 {font-size: 12px} #login ul {float: right} #login li {margin-left: 5px} #login li a {width: 40px} #social {display:none} #area-onea .main-image {margin: 18px 35px;} } @media only screen and (max-width: 360px) { #area-onea .main-image img {left: 15%;} } @media only screen and (max-width: 320px) { #logo{margin-top:30px} #login {margin-top: 45px;} #area-onea .main-image img { left: 14%; } } @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation : portrait) { #area-onea .main-image {margin: 18px -50px;} @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation : portrait) {#area-onea .main-image {margin: 18px 5px;} } @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation : portrait) { #area-onea .main-image {margin: 18px 35px;} } @media print { #masthead, #mastfoot, #two, #breadcrumbs, #share, .related, .up, .down, .vid, .hero {display:none} .two-col article {width:100%} .inner {border:none !important; padding:0 !important} .inner:after {content: " (http://www.wellocks.co.uk" attr(href) ")";} }