@import url(//fonts.googleapis.com/css?family=Lato:400,700,300); /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* THIS IS THE STARTING FILE FOR RESPONSIVE SITE BUILDS */ input { &.form-control, button[type="submit"] { border-color: $input-border-color; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; } } form { margin-bottom: 0px !important; } .form-control { background-color: transparent; box-shadow: none; } //Body Text Styles input { &.form-control { height: 40px; &:hover, &:active, &:focus { background: #fff; border: 1px solid $input-border-color; box-shadow: 0px 0px 4px 0px rgba(112, 145, 50, 0.65); } &:focus, &:focus + span .btn { background: #fff; border: 1px solid $input-border-color; box-shadow: 0px 0px 4px 0px rgba(112, 145, 50, 0.65); } } } form { margin-bottom: 50px; .form-group { margin-bottom: 0px; button.dropdown-toggle { border-bottom-right-radius: 50px !important; border-top-right-radius: 50px !important; max-width: 70%; } } .form-control { font-size: 16px; font-family: 'Lato', sans-serif; padding: 20px 19px 5px; height: 60px; margin-bottom: 10px; border-color: $input-border-focus; } textarea { padding: 25px 20px 5px; } input { &.form-control { &:hover, &:active, &:focus { background: #fff; background: rgba(239, 233, 223, 0.2); border: 1px solid #71AFD4; //box-shadow: 0px 0px 5px 0px rgba(77,154,201,0.85); } &:focus, &:focus + span .btn { border: 1px solid $input-border-color; box-shadow: 0px 0px 4px 0px rgba(112,145,50,0.65); } } } select { height: 50px; appearance: none; -webkit-appearance: none; -moz-appearance: none; text-overflow: ''; position: relative; &:after { content: "\f078"; font-family: "FontAwesome"; font-size: 11px; color: #aaa; right: 8px; top: 4px; padding: 0 0 2px; position: absolute; pointer-events: none; } } h3 { font-size: 15px; font-weight: 700; color: $form-headers; margin: 20px 0px; &.description { margin-bottom: 5px; } } textarea { &.form-control { height: auto !important; padding: 25px 20px !important; resize: none; } } select::-ms-expand { display: none; } } // Desktop only sticky nav when scrolling #desktop-fixed.navbar-fixed-top { position: relative !important; } nav { font-family: 'Lato', sans-serif; &.navbar { z-index: 9999; border: none; margin: 0px; min-height: 0px; background-color: $utility-nav-bg; &.utility { background-color: $utility-nav-bg; ul.nav.navbar-nav { &> li { &.social { &> a { padding: 0px; padding-left: 10px; padding-top: 6px; i { font-size: 0.8em; width: 1.8em; text-align: center; line-height: 1.8em; border-radius: 1em; background-color: $link-color; color: #517123; margin-right: 0px; } &:hover { i { background-color: darken($link-color, 10%); } } } } &.phone { &> a { color: $phone-color; } } &:nth-child(4) { position: relative; &:after { content: ''; position: absolute; display: block; height: 20px; width: 1px; top: 9px; right: 0; background-color: #fff; background-color: rgba(255, 255, 255, 0.2); } } } } } &.content, &.landing { ul.nav.navbar-nav { & > li { & > a { color: $anchor-color; } } } } } } .navbar-collapse.nav.navbar-main-nav, .navbar-collapse.nav.navbar-sticky { //width: 100%; background-color: #F7F8ED; padding: 0px; overflow-y: hidden; margin-bottom: 0; } .nav { &> li { &> a { &:hover, &:focus, &:active { background-color: transparent; } } &.open { &> a { background-color: transparent; } } } .navbar-nav { &.desktop { &> li { &.dropdown { .dropdown-menu { background: #F7F8ED; box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.25); border-radius: 2px; //margin-top: 5px; &> li { border-bottom: 1px solid $dropdown-border; &> a { display: block; padding: 20px; font-weight: 700; font-size: 16px; color: $dropdown-link-color; line-height: 48px; &:hover { background-color: #fff; } } &:last-child { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } } .dropdown-menu { position: absolute; width: 100%; left: 217px; top: -2px; } .fa-chevron-down { -ms-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(-90deg); right: 10px; position: absolute; top: 30%; } } &.active { &> a { color: $dropdown-link-color; } .dropdown-menu { &> li { &> a { color: $dropdown-link-color !important; } } } } &:last-child, &:nth-child(4) { .dropdown-menu { right: 0px; left: auto; } } } } } &> li { &.dropdown { .dropdown-menu { border: none; padding: 0px 0px; &> li { &> a { padding: 16px 15px; font-size: 16px; line-height: 48px; } &.active { &> a { color: $link-color; &:hover { background-color: #fff; color: $link-hover-color; } } } } } } &.active { &> a { span { //border-bottom: 5px solid $brand-primary; } } } } &.mobile { margin: 0px; li { border-top: 1px solid $dropdown-border; &:first-child { border-top: none; } &> a { text-align: left; &:hover { background-color: #fff; } } &.dropdown { .dropdown-plus { position: absolute; display: block; width: 60px; height: 50px; right: 0px; top: 0px; z-index: 99; padding: 17px 0px; text-align: center; font-family: FontAwesome; font-size: 15px !important; font-weight: 300; &:before { opacity: 1; } &:hover { background-color: $dropdown-open; } } &.open { a.dropdown-plus { background-color: $dropdown-open !important; &:before { position: relative; z-index: 999; display: inline-block; -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg); } &:hover, &:active, &:focus { background-color: $dropdown-open !important; } } &> .parent-link { background-color: $dropdown-open !important; &:hover { background-color: $dropdown-open-hover !important; color: $dropdown-open-hover-text; } } &> a { &:hover { background-color: $dropdown-open-hover !important; color: $dropdown-open-hover-text; } } ul.dropdown-menu { background-color: $dropdown-open; border-top: 1px solid $dropdown-border; padding: 0px; &> li { &> a { font-size: 14px !important; line-height: 17px !important; text-transform: none; } } &>li.dropdown { ul.dropdown-menu { background-color: $dropdown-open; padding: 0px 15px; &> li { border-top: 1px solid $dropdown-border; &:first-child { border-top: none; } a { padding: 15px 0px; font-size: 14px; } &:first-child { border-top: none; } } } } } ul.dropdown-menu { &:before { content: none; } &> li.dropdown { .dropdown-plus { &:before { display: inline-block; -ms-transform: rotate(0deg); /* IE 9 */ -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */ transform: rotate(0deg); } } &.open { .dropdown-plus { &:before { display: inline-block; -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg); } } } } } } } &> a { color: #668826; padding-top: 17px; padding-bottom: 16px; text-transform: uppercase; font-weight: 600; font-size: 14px; line-height: 17px; &:hover { background-color: $dropdown-open-hover; color: $dropdown-open-hover-text; } } &.wholesale { a { color: $phone-color !important; &.phone-block { padding: 20px 40px; background-color: #668826; text-align: center; font-size: 13px; line-height: 16px; color: $phone-color !important; &:hover { color: $phone-color !important; background-color: darken(#668826, 10%); } } } &:hover { background-color: darken(#668826, 10%); } i { color: $phone-color; } } &.social-bottom { background-color: #F7F8ED; text-align: center; padding: 12px 0px; a { padding: 0px; &:hover { background-color: transparent; } &.social { display: inline-block; padding: 0px; margin: 0px; margin-right: 12px; &:first-child { padding-left: 0px; } i { color: #fff; font-size: 0.95em; } &:hover { i { background-color: $dropdown-open-hover-text; } } } .separator-text{ font-size:10px; text-transform:none; } } } &.title { font-weight: 700; font-size: 12px; color: $regular-text; letter-spacing: 0.42px; line-height: 15px; padding: 27px 15px 10px; text-transform: uppercase; } } } &.main { ul.dropdown-menu { border-radius: 2px 2px 0px 0px; background-color: #F7F8ED; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50); } } } } .dropdown-submenu{position:relative;} .dropdown-submenu>.dropdown-menu{top:0;left:-95%;margin-top:-6px;margin-right:-1px;} .dropdown-submenu:hover>.dropdown-menu{display:block;} .dropdown-submenu>a:after{display:block;content:" ";float:left;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 5px 5px 0;border-right-color:#999;margin-top:5px;margin-right:10px;} .dropdown-submenu:hover>a:after{border-left-color:#ffffff;} .dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;} .dropdown-menu-right {margin-left:0;} .navbar-brand { height: auto; padding: 8px 5px 7px 5px; img { max-height: 40px; } p { color: #FFFFFF; float: left; width: 15%; font-size: 10px; line-height: 12px; margin: 15px; } } .navbar-toggle { height: 55px; margin: 0px; padding: 17px 19px 16px 19px; .icon-bar { position: relative; background-color: $link-color; width: 28px; height: 4px; border-radius: 0px; -webkit-border-radius: 0px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } &.active { background-color: #F7F8ED; color: #668826; .icon-bar { background-color: #668826; height: 3px; width: 20px; &:nth-of-type(2) { top: 6px; transform: rotate(45deg); } &:nth-of-type(3) { background-color: transparent; } &:nth-of-type(4) { top: -8px; transform: rotate(-45deg); } } } } .overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(215,215,215,0.16); } //Homepage Plant Search Box .search-box { margin-top: 40px; h2,h3,h4 { text-transform: uppercase; color: $purple; margin-bottom: 15px; text-align: center; margin-top: 0; font-size: 20px; line-height: 24px; font-weight: 600; } .plant-search { a.a-search { display: block; text-align: center; font-weight: 700; font-size: 16px; line-height: 19px; } .btn { margin-right: 0px; display: block; width: 100%; margin-bottom: 15px; i { margin-right: 10px; } } .input-group { width: 100%; margin: 5px 0px 20px 0px; .input-group-btn { position: absolute; left: 4px; font-size: 0; white-space: nowrap; border: none; width: auto; z-index: 5; background: transparent; } button[type="submit"] { height: 45px; border-color: $input-border-color; box-shadow: none; border-right: none; padding-right: 2px; margin-right: 0; border: none; background: none; i { color: #7c9b40; } } input[type="text"] { font-size: 0.9em; height: 50px; border: 1px solid #B0BB7D; border-color: #B0BB7D; border-bottom-left-radius: 25px; border-top-left-radius: 25px; padding-left: 40px; padding-top: 5px; } } border-bottom: 4px solid $blue-border-bar; padding: 45px 15px; background-color: #FEFFF2; } .plant-stock { font-size: 16px; color: #575852; border-bottom: 4px solid $blue-border-bar; padding: 45px 15px; background-color: #F3F4D8; text-align: center; p { text-align: left; line-height: 27px; color: #4A5438; margin: 0px 0px 15px 0px; } } a.btn { font-size: 14px; line-height: 17px; margin-bottom: 20px; display: block; } } .navbar-border { position: relative; float: left; content: ''; width: 1px; height: 35px; top: 10px; background-color: rgba(233,255,190,0.2); left: 0; margin: 0 10px; } //Jumbotron backgrounds .jumbotron { padding-top: 0px; padding-bottom: 0px; background-repeat: no-repeat; background-size: cover; background-position: center center; color: #fff; position: relative; font-family: 'Lato', sans-serif; margin-bottom: 0px; min-height: 250px; .container { position: relative; z-index: 9; } p { font-weight: 400; } &.homepage { .mobile-home-bg { position: absolute; width: 100%; height: 285px; left: 0; background-repeat: no-repeat; background-size: cover; background-position: center center; .overlay { background-color: transparent; background: -moz-linear-gradient(top, rgba(0,63,112,1) 45%, rgba(0,63,112,0) 75%); /* FF3.6+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.00) 51%, rgba(0,0,0,0.65) 97%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0.00) 51%, rgba(0,0,0,0.65) 97%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0.00) 51%, rgba(0,0,0,0.65) 97%); /* IE10+ */ background: linear-gradient(to top, rgba(0,0,0,0.00) 51%, rgba(0,0,0,0.65) 97%); /* W3C */ background-image: linear-gradient(0deg, rgba(0,0,0,0.00) 51%, rgba(0,0,0,0.65) 97%); } } .content-wrapper { position: relative; } .overlay { background-color: transparent; background: -moz-linear-gradient(top, rgba(0,63,112,1) 45%, rgba(0,63,112,0) 75%); /* FF3.6+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.00) 51%, rgba(0,0,0,0.65) 97%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0.00) 51%, rgba(0,0,0,0.65) 97%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0.00) 51%, rgba(0,0,0,0.65) 97%); /* IE10+ */ background: linear-gradient(to top, rgba(0,0,0,0.00) 51%, rgba(0,0,0,0.65) 97%); /* W3C */ background-image: linear-gradient(0deg, rgba(0,0,0,0.00) 51%, rgba(0,0,0,0.65) 97%); } } &.landing { &:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: -moz-linear-gradient(top, rgba(241,248,252,0) 30%, rgba(241,248,252,1) 80%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,rgba(241,248,252,0)), color-stop(80%,rgba(241,248,252,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(241,248,252,0) 30%,rgba(241,248,252,1) 80%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(241,248,252,0) 30%,rgba(241,248,252,1) 80%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(241,248,252,0) 30%,rgba(241,248,252,1) 80%); /* IE10+ */ background: linear-gradient(to bottom, rgba(241,248,252,0) 30%,rgba(241,248,252,1) 80%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f1f8fc', endColorstr='#f1f8fc',GradientType=0 ); /* IE6-9 */ background-image: linear-gradient(to bottom, rgba(241, 248, 252, 0.0) 30%, rgba(241, 248, 252, 1) 80%); z-index: 1; } .overlay { background-color: transparent; background: -moz-linear-gradient(top, rgba(0,63,112,1) 45%, rgba(0,63,112,0) 75%); /* FF3.6+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.00) 51%, rgba(0,0,0,0.65) 97%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0.00) 51%, rgba(0,0,0,0.65) 97%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0.00) 51%, rgba(0,0,0,0.65) 97%); /* IE10+ */ background: linear-gradient(to top, rgba(0,0,0,0.00) 51%, rgba(0,0,0,0.65) 97%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80003f70', endColorstr='#4d003f70',GradientType=0 ); background-image: linear-gradient(0deg, rgba(0,0,0,0.00) 51%, rgba(0,0,0,0.65) 97%); } h1, p { color: $btn-primary-color; } } p { font-size: 16px; line-height: 24px; } &.content { min-height: 0px; &:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(62,93,2,0.65); background-image: linear-gradient(-180deg, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.00) 70%); } .overlay { display: none; } .content-wrapper { &.bottom { margin-top: 100px; } } p { font-size: 16px; line-height: 20px; } h1 { font-weight: 700; font-size: 28px; color: #FFFFFF; letter-spacing: 0.25px; line-height: 54px; text-shadow: 0px 2px 6px rgba(0,0,0,0.50); margin-top: 0px; } a.btn { margin: 15px 0px 0px; } &.blog { .content-wrapper { padding: 60px 0px 100px; p.article-meta { font-weight: 700; margin-top: 15px; font-size: 14px; color: #FFFFFF; line-height: 27px; text-shadow: 0px 2px 6px rgba(0,0,0,0.50); a { text-decoration: none; color: #E9FFBE; margin-left: 5px; &:hover { text-decoration: underline; } } } } h1 { font-size: 28px; line-height: 36px; margin: 0px; } p.subheader { margin: 0px; } } &.plant-index { padding-top: 260px; &:before { background: none; background-image: none; background-color: transparent; } } } h1 { font-family: 'Lato', sans-serif; display: block; font-size: 28px; font-weight: 600; color: #FFFFFF; line-height: 36px; text-shadow: 0px 2px 6px rgba(0,0,0,0.50); text-align: center; margin: 0px; a, a:hover{ color:#fff; } span { color: $brand-primary; } } .content-wrapper { padding: 55px 0px; &.bottom { margin-top: 100px; } } p.subheader { margin-top: 0px; } } p.subheader { font-family: 'Lato', sans-serif; text-shadow: 0px 2px 6px rgba(0,0,0,0.50); text-transform: uppercase; color: $phone-color; text-align: center; font-size: 13px; line-height: 24px; margin-top: 160px; margin-bottom: 0px; } #footer { text-align: center; color: $green-link; padding: 40px 0px 75px 0px; a { color: $green-link; &:hover { color: #fff; } &.btn { display: inline-block; padding: 10px 25px; margin: 0px 0px 20px 0px; &.btn-inverse { &:hover, &:active, &:focus { background-color: #fff !important; border-color: #fff !important; } } } } h4 { margin: 0px; padding-bottom: 0px; font-weight: 700; text-transform: uppercase; font-size: 15px; line-height: 32px; } a.social { margin-right: 14px; i { font-size: 0.8em; background-color: $green-link; color: #739641; } &:hover { i { background-color: #fff; } } } ul { li { margin-bottom: 10px; a { font-size: 13px; text-transform: uppercase; font-weight: 500; line-height: 28px; } &.title { a { font-size: 13px; line-height: 32px; font-weight: 800; } } } } .copyright { text-align: center; padding-top: 30px; margin-bottom: 15px; .logo { margin: 15px 0px 15px; max-width: 200px; } p { display: none; font-size: 13px; margin-bottom: 0px; margin-top: -10px; line-height: 20px; &.slogan { margin-bottom: 30px; } &.rights { margin-top: 0px; } } } p.copy { font-size: 15px; line-height: 24px; } .copyright-line { text-align: center; } .connect { margin-top: 20px; font-size: 18px; .map-info, .phone-info, .mail-info, .fax-info { margin: 0px; i { float: none; width: 10%; position: relative; top: 2px; font-size: 1.1em; } a { float: none; width: 88%; font-size: 13px; line-height: 32px; } span { display: inline-block; float: left; margin: 0px 5px; position: relative; top: 5px; } } .map-info { margin: 0px; } } .connect { border-bottom: 1px solid #96b369; border-bottom: 1px solid rgba(233,255,190,0.2); } .link-lists { border-bottom: 1px solid #96b369; border-bottom: 1px solid rgba(233,255,190,0.2); padding-bottom: 20px; ul { margin-bottom: 0; } } .connect { padding-bottom: 40px; } .social-content { padding: 30px 15px 40px 15px; border-bottom: 1px solid #96b369; border-bottom: 1px solid rgba(233,255,190,0.2); h4 { margin-bottom: 0px; } } .social-content { text-align: center; } } .badge-container { width: 100%; display: inline-block; .circle-badge { text-align: center; position: relative; height: 100px; width: 100px; display: inline-block; margin-right: 0px; margin-top: 15px; svg { width: 100%; height: 100%; } .content { position: absolute; width: 100px; height: 100px; top: 0; padding: 15%; p { font-size: 9px; line-height: 10px; color: #fff; margin: 0px; &.number { font-size: 22px; line-height: 28px; font-weight: 700; padding-bottom: 2px; border-bottom: 2px solid $brand-primary; margin-bottom: 8px; } } } &:last-child { margin-right: 0px; } } } // Intro Block below billboard .intro-block { padding: 20px 15px 0px; background-color: $off-white-bg; .recognition-block { padding: 20px 0px; border-bottom: 1px solid $blue-border; img { max-width: 50px; } } .awards-container { padding: 30px 15px; p.title { width: 100%; } img { margin-top: 0; vertical-align: top; } } p.title { font-size: 14px; line-height: 21px; font-weight: 600; color: #000; display: inline-block; } img { display: inline-block; float: none !important; margin-top: -5px; margin-right: 0px; margin-left: 10px; } } //Full width CTA blocks .cta-blocks { @include align-items(stretch); @include display(flex); @include flex-direction(row); @include justify-content(center); padding: 0px; h4 { font-size: 24px; line-height: 29px; color: #fff; } .billboard-cta { @include flex(1); padding: 40px 15px 50px; &:first-child { background-color: $blue-border; } &:nth-child(2) { background-color: $dark-blue-border; } a { white-space: normal; // Primary Button (Yellow) &.btn.btn-primary { background-color: #FBDA4E !important; border-color: #FFF2BA !important; &:hover { background-color: #FBDA4E !important; border-color: #FBDA4E !important; } &:active { background-color: #FBDA4E !important; border-color: #FFF2BA !important; box-shadow: 0px 0px 5px 0px #FFCE00 !important; } } } } } .center-billboard { display: table; margin: 0 auto; text-align: center; .badge-container { .circle-badge { svg { g { fill: #003F70; fill: rgba(0,63,112,0.65); } } } } } // Global Listing Styles .media { margin: 15px 0px; text-align: left; overflow: visible; .media-middle { margin: 0 auto; height: 80px; width: 80px; position: relative; padding: 0px; text-align: center; a { display: block; width: 100%; height: 100%; svg { width: 100%; height: 100%; max-height: 80px; } img { position: absolute; top: 15px; left: 0; max-width: 80%; max-height: 80%; margin: 0 auto; right: 0; } } } .media-body { color: #fff; text-align: center; padding-left: 0px; h4.media-heading { margin-top: 15px; position: relative; color: #fff; font-size: 18px; line-height: 20px; font-weight: 600; &:after { content: ''; position: relative; bottom: -15px; display: block; width: 130px; height: 3px; margin: 0px auto; margin-bottom: 30px; background-color: $blue-border-bar; } } p { color: #fff; font-size: 18px; line-height: 28px; margin: 0px 0px 15px; } a.btn { display: block; } } } // Listing Block .listing-block { background-color: #fff; padding: 35px 0px; .media { margin-bottom: 40px; } div[class*=' col-'] { &:last-child { .media { margin-bottom: 0px; } } } h3 { font-size: 26px; line-height: 31px; margin: 0px 0px 30px; font-weight: 300; color: $btn-primary-color; } &.listing-row { .media-left { display: table-cell; margin: 0 auto; } .media-body { text-align: left; h4 { margin-bottom: 10px; font-size: 22px; line-height: 26px; } p { font-size: 16px; line-height: 20px; } } } } .recognition-section { background-color: $blue-border; padding: 40px 0px 40px; &.home { padding: 40px 0px 30px; } h3 { font-weight: 300; color: #fff; font-size: 40px; line-height: 48px; margin: 0px; img { display: inline-block; margin: 0 10px; } } .badge-container { margin-bottom: 20px; .circle-badge { width: 220px; height: 220px; margin-right: 0px; margin-top: 10px; display: block; margin: 20px auto; .content { width: 220px; height: 220px; p { font-size: 16px; line-height: 22px; &.number { font-size: 62px; line-height: 78px; } } } } } span { padding: 0px 15px; font-size: 16px; line-height: 24px; color: #fff; } &.home { span { font-size: 16px; line-height: 22px; } } } .content-row { position: relative; z-index: 3; padding: 45px 0px 65px; background-size: cover; color: $regular-text; &.left-align { h3, p.subheader { text-align: left; } p.subheader { margin: 0px; } p { margin: 20px 0px 20px 0px; } padding: 45px 0px 130px; } a.btn { display: block; margin: 20px 0px 20px 0px; padding: 10px 25px; white-space: normal; } .container { position: relative; z-index: 11; } h3 { font-family: 'Lato', sans-serif; display: block; margin-top: 0px; font-size: 28px; font-weight: 600; color: #FFFFFF; line-height: 36px; text-shadow: 0px 2px 6px rgba(0,0,0,0.50); text-align: center; } &.logos-section { a.btn.btn-primary { margin-top: 40px; } } &.blog { background-color: $btn-primary-color; h3 { color: #fff; margin: 0px 0px 40px; } .blog-post { max-width: 480px; margin: 0 auto 40px; margin-bottom: 30px; img { width: 100%; } } } &.text { padding: 40px 0px; background-color: #fff; color: $blue-text-content-row; h3,h3 { font-size: 22px; line-height: 30px; margin: 0px; } } &.team-block { background-color: #fff; h3 { margin: 0px; } } &.content-block { position: relative; padding: 0px; padding-top: 350px; &.left{ background-position:right; background-repeat:no-repeat; } &.right{ background-position:left; background-repeat:no-repeat; } } h4 { font-weight: 700; font-size: 18px; line-height: 22px; color: $black-text; } p.subheader { text-transform: uppercase; font-size: 16px; line-height: 24px; margin-top: 0px; } .overlay { content: ''; position: absolute; top: 0px; right: 0px; height: 100%; width: 100%; z-index: 10; } .text-content { position: relative; z-index: 11; } &.content-page { padding-bottom: 0px; background-color: #fff; &.plant-search { padding: 0; } } &.plant-detail-page { background-color: #fff; padding: 0px 0px 60px 0px; .plant-slider-container { padding: 0; margin: 0; } } &.image { .overlay { background: rgba(0,0,0,0.3); background-image: linear-gradient(0deg, rgba(4,15,25,0.00) 39%, rgba(4,15,25,0.70) 70%); } p { color: #fff; &.subheader { color: $phone-color; } } } &.tan { background-color: $tan-bg; color: #575852; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.05), inset 0px 1px 3px 0px rgba(0,0,0,0.20); h2,h3 { font-family: 'Lato', sans-serif; color: #513949; font-size: 28px; line-height: 36px; text-shadow: none; } } &.community { background-color: #fff; } // CTA Footer Row &.cta-row-footer { position: relative; padding: 25px 15px 40px 15px; text-align: center; color: #fff; z-index: 2; background-size: cover; background-position: center center; &:before { content: ''; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: rgba(28,48,0,0.9); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, transparent 62%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, transparent 62%); background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.6) 0%, transparent 62%); } .overlay { display: none; } h3 { position: relative; display: inline-block; text-shadow: none; font-weight_: bold; font-size: 22px; line-height: 54px; margin: 0px; &:after { position: relative; display: block; content: ''; margin: 0 auto; bottom: 0px; left: auto; height: 2px; width: 200px; background-color: $blue-border-bar; } } a { &.btn { display: inline-block; margin: 0 auto; border: 1px solid #5AB6D2; } } p { margin: 15px 0px 10px 0px; font-size: 16px; line-height: 24px; &.phone { margin: 0px; a { display: block; color: $phone-color; font-weight: 700; text-decoration: none; font-size: 18px; line-height: 26px; margin-bottom: 20px; &:hover { color: darken($phone-color, 10%); } i { margin-right: 5px; } } } } &.alternate { h3 { display: block; } a.btn { margin-top: 30px; } } } // Page Listing Blocks .page-listing-row { padding-bottom: 2em; .page-listing { position: relative; background-repeat: no-repeat; background-size: cover; background-position: center center; margin-bottom: 40px; .content { position: relative; width: 100%; bottom: 0; padding: 20px; padding-top: 55%; padding-bottom: 90px; text-align: center; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0e6d3+30,e0e6d4+65&0+30,1+80 */ background: -moz-linear-gradient(top, rgba(224,230,211,0) 30%, rgba(224,230,212,0.7) 55%, rgba(224,230,212,1) 80%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(224,230,211,0) 30%,rgba(224,230,212,0.7) 55%,rgba(224,230,212,1) 80%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(224,230,211,0) 30%,rgba(224,230,212,0.7) 55%,rgba(224,230,212,1) 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e0e6d3', endColorstr='#e0e6d4',GradientType=0 ); /* IE6-9 */ &:before { //content: ''; //position: absolute; //width: 100%; //height: 100%; //display: block; //top: 0; //left: 0; //filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E0E6D4', endColorstr='#E0E6D4',GradientType=1 ); //z-index: 4; } h3 { font-weight: 700; font-size: 20px; line-height: 26px; color: $purple; text-shadow: none; } p { font-size: 14px; color: #6A6A6A; line-height: 21px; } a.btn { width: 90%; margin: 0px; padding: 15px 25px; font-weight: 700; font-size: 14px; color: #FFFFFF; letter-spacing: 0.5px; line-height: 17px; position: absolute; left: 5%; bottom: 24px; } } } } .btn-group { .btn { padding: 4px 20px; text-transform: none; font-size: 16px; line-height: 32px; margin-right: 0; margin-left: 0; &.btn-default { background: #FFFFFF; color: $anchor-color; border: 1px solid $input-border-color; } &:first-of-type { margin-left: 0; border-radius: 0; border-bottom-left-radius: 50px !important; border-top-left-radius: 50px !important; } &.btn-primary { &.active { color: #fff; background-color: #7D9B44; background-color: rgba(125,155,68,1); border-color: #6C843F; box-shadow: none !important; &:focus, &:active, &:hover { color: #fff; background-color: #7D9B44; background-color: rgba(125,155,68,1); border-color: #6C843F; box-shadow: none !important; outline: none; } } } } label { text-transform: uppercase; font-weight: 700; font-size: 12px; color: $black-text; letter-spacing: 0.5px; line-height: 15px; margin-right: 10px; padding-top: 15px; } } } .content-row-wrapper { .content-row { padding: 45px 0px; color: #575852; &:nth-child(even) { background-color: #fff; } &:nth-child(odd) { background-color: $dropdown-open-hover; } .row-eq-height { .text-content, .image-content { figcaption { text-align: center; font-size: 14px; margin-top: 10px; } } } h3 { text-transform: uppercase; text-align: left; color: $black-text; text-shadow: none; font--weight: bold; font-size: 18px; line-height: 22px; margin: 25px 0px 5px 0px; } p { margin: 20px 0px 0px 0px; color: #575852; line-height: 27px; } .text-content { ul { margin: 20px 0px; padding-left: 40px; &> li { list-style: disc; font-size: 16px; line-height: 27px; } } ol { margin: 20px 0px; padding-left: 40px; &> li { list-style: decimal; font-size: 16px; line-height: 27px; } } h3:first-of-type { margin:0px 0px 5px 0px; } } } } .link-list { margin: 30px 0px; h4 { position: relative; text-transform: uppercase; margin: 0px; font-weight: 700; font-size: 18px; line-height: 22px; padding-bottom: 15px; &:after { position: relative; display: block; content: ''; bottom: -15px; left: 0px; height: 2px; width: 150px; background-color: $blue-border-bar; } } a { margin: 0px; color: $anchor-color; font-size: 16px; line-height: 24px; font-weight: 700; &:hover { color: darken($anchor-color, 10%); } &.btn { float: left; margin: 20px 0px 0px 0px; color: #fff; } } ul { margin: 0px; &> li { position: relative; padding: 30px 0px 40px; &:after { position: relative; display: block; content: ''; bottom: -30px; left: 0px; height: 2px; width: 150px; background-color: #D8EAEF; } p { text-transform: uppercase; margin: 0px 0px 0px 0px; font-weight: 700; color: #B0BA9F; font-size: 13px; line-height: 24px; } } } &:last-child { a { &.btn { margin-bottom: 0px; } } } &:last-of-type { margin-bottom: 0px; } } .plant-box { margin-top: 35px; text-align: left; h4 { //font-style: italic; font-weight: 400; color: #513949; line-height: 22px; font-size: 18px; margin: 10px 0px 5px 0px; &:hover { color: darken(#513949, 10%); } } a { display: block; margin: 10px 0px 0px; } p { font-weight: 700; color: #709132; font-size: 14px; line-height: 17px; &:hover { color: #45610F; } } } .cta-row { background-color: #513949; color: #fff; padding: 35px 15px 40px 15px; h4 { color: #FFFFFF; font-weight: 300; font-size: 22px; line-height: 27px; margin: 0; margin-bottom: 15px; } a.btn { display: block; } } .logo-row { padding: 25px 0px; background-color: #fff; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.05); .logo-listing { display: inline-block; max-width: 18%; vertical-align: middle; margin-right: 2%; } h3 { display: block; margin: 0px; margin-bottom: 20px; text-align: center; color: #575852; font-size: 14px; line-height: 17px; font-weight: 700; } } svg:not(:root) { overflow: visible; } // Logo Boxes as seen in Logos Section .logo-box { @include align-items(center); @include display(flex); @include flex-direction(row); @include justify-content(center); background: #FFFFFF; width: 100%; max-width: 162px; height: 64px; margin: 0 auto; margin-top: 15px; svg, img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-height: 40%; max-width: 90%; line-height: 100%; } } //Blog Post Thumbnails .blog-listing-wrapper { background-color: #fff; padding-top: 40px; .blog-post { max-width: 480px; margin: 0 auto 40px; margin-bottom: 30px; img { width: 100%; } &.featured { img { max-height: none; } } .caption { position: relative; overflow: hidden; background-color: $link-color; &:hover { background-color: $blog-post-bg; .read-more, p.description { opacity: 1; -webkit-transition-delay: 0.05s; transition-delay: 0.05s; -webkit-transition-duration: 0.35s; transition-duration: 0.35s; } h4 { opacity: 0; -webkit-transform: translate3d(-75px,0,0); transform: translate3d(-75px,0,0); } } h4 { position: absolute; max-width: 100%; -webkit-transition: opacity 0.2s, -webkit-transform 0.35s; transition: opacity 0.2s, transform 0.35s; } p.description, .read-more { opacity: 0; -webkit-transition: opacity 0.2s, -webkit-transform 0.35s; transition: opacity 0.2s, transform 0.35s; } p.description, .read-more { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } } } .social-nav { &> li { display: inline-block; &> a { padding: 0px 10px 15px 0px; } &:last-child { &> a { padding-right: 0px; } } } } h4 { opacity: 1; color: $orange-heading; font-size: 22px; line-height: 28px; margin: 0px 0px 5px; } .blog-navigation { background-color: $footer-bg; padding: 20px; .nav-group { margin-top: 20px; h4 { margin: 0px 0px 10px; } ul { &> li { &> a { font-size: 16px; line-height: 32px; color: $text-color; &:hover { text-decoration: underline; } } &.active { &> a { position: relative; font-weight: 700; &:after { position : absolute; content:""; width: 0; height: 0; top: 6px; right: -15px; border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent $text-color; } } } } } } } .form-control.filter { margin: 0px 0px 20px 0px; height: auto; .dropdown-toggle { margin: 0px; padding: 5px 19px 5px; .filter-option { color: $text-color; } .caret { right: 40px; } } .dropdown-menu { &> li { &> a { font-size: 14px; line-height: 35px; } } } } .filter-menu { margin-top: 5px; margin-bottom: 20px; border-bottom: 1px solid $blue-border; } } .blog-post { padding: 0px; border: none; margin-bottom: 40px; figure { margin: 0px 20px; } ul { padding-left: 40px; li { list-style: disc; margin: 20px 0px; } } .caption { background-color: $blog-post-bg; color: #fff; padding: 20px; border-top: 5px solid $brand-primary; height: 175px; p { font-size: 16px; line-height: 20px; color: #fff; } h4 { font-size: 20px; line-height: 24px; color: #fff; } &:hover { background-color: $text-color; } } &:hover { } .read-more { position: relative; font-size: 16px; line-height: 24px; text-transform: uppercase; font-weight: 700; color: #fff; &:after { position : absolute; content:""; width: 0; height: 0; top: 6px; right: -15px; border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent #fff; } } // Single Blog Post View &.article { img { max-width: 100%; height: auto; } } } // Related Posts .related-posts { padding: 50px 0px 0px; border-top: 2px solid #D8EAEF; h2 { font-weight: 700; font-size: 28px; color: #513949; letter-spacing: 0.25px; line-height: 36px; margin: 0px 0px 30px 0px; } .related-box { position: relative; text-align: left; z-index: 1; background-size: cover; background-color: rgba(247,248,237,0.93); margin-bottom: 40px; //padding-bottom: 20%; .content { position: relative; z-index: 2; padding: 25px 20px 20px 20px; } h4 { margin: 0px; font-weight: 700; font-size: 20px; color: $purple; line-height: 24px; } p { &.meta { margin: 8px 0px 15px 0px; font-size: 12px; color: #979797; line-height: 18px; a { color: $anchor-color; text-decoration: none; margin-left: 5px; } } &.summary { font-size: 16px; color: #575852; line-height: 24px; } } &:before { content: ''; display: block; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: rgba(247, 248, 237, 0.93); } a.btn { display: block !important; visibility: hidden; opacity: 0; margin-top: 15px; @include transition(all 0.2s ease-in-out); padding: 9px 25px; font-size: 14px; } &:hover { a.btn { visibility: visible; opacity: 1; } } } } .social-nav.list-inline { & > li { display: inline-block !important; padding: 0; margin-right: 8px; & > a { padding: 0; } h4 { font-weight: 700; font-size: 12px; letter-spacing: 0.27px; line-height: 24px; text-transform: uppercase; } } } .blog-post { padding-bottom: 30px; border-bottom: 2px solid #D8EAEF; h3.post-title { text-align: left; text-shadow: none; font-weight: 700; font-size: 20px; color: $anchor-color; line-height: 24px; } .thumbnail { background-color: transparent; border: none; padding: 0px; img { border: none; padding: 0px; } } .post-meta { p { font-size: 12px; color: #979797; line-height: 27px; a { text-decoration: none; text-transform: uppercase; } } } p.post-summary { font-size: 16px; line-height: 24px; a { text-transform: uppercase; &:hover { text-decoration: underline; } } } .continue { font-size: 14px; line-height: 30px; font-weight: 700; text-transform: uppercase; } &.article { border-bottom: none; } } //Sticky Breadcrumb / CTA Bar #cta-bar-wrapper { transition: all 0.4s ease; background-color: #fff; color: $anchor-color; h4 { font-size: 14px; line-height: 21px; } a.btn { font-size: 14px; margin-left: 15px; padding: 3px 10px; } nav.navbar { margin: 0px 15px; } } .breadcrumb-row { background-color: #E0E6D4; .breadcrumb { background-color: transparent; padding: 4px 15px; margin: 0px; &> li { &> a { font-size: 12px; line-height: 15px; font-weight: 600; text-transform: uppercase; i { font-size: 15px; margin-right: 5px; } } &:before { color: $anchor-color !important; } } } } #stickyheader { position: relative; top: 0px; width: 100%; z-index: 9998; transition: all 0.4s ease; background-color: #E0E6D4; #cta-bar-wrapper { display: none; height: 0px; transition: all 0.4s ease; text-align: center; padding: 0; a.btn { font-size: 14px; margin: 5px; margin-left: 15px; padding: 3px 10px; } h4, a.btn { display: inline-block; } h4 { font-size: 14px; line-height: 21px; margin: 0px; top: 3px; position: relative; } a.btn.btn-primary { padding: 7px 18px; border-color: #FDE26F; font-family: 'Lato', sans-serif; background-color: #FBDA4E !important; background-color: rgba(251,218,78,0.95) !important; &:hover { background-color: darken(#FBDA4E, 10%) !important; background-color: darken(rgba(251,218,78,0.95), 10%) !important; border-color: darken(#FDE26F, 10%); } } } &.sticky { position: fixed; #cta-bar-wrapper { display: block; height: auto; } } } #stickyalias { display: none; } // Map block, blue BG .map-block { position: relative; background-color: $dark-blue-bg; color: #fff; padding: 45px 0px; &:before { content: ' '; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.1; background-image: url('/assets/images/map-bg.jpg'); background-repeat: no-repeat; background-position: center center; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-size: cover; } .map-container { max-width:450px; margin:0 auto; img { display: block; max-width: 100%; height: auto; } } .overlay { background: -moz-linear-gradient(top, rgba(0,57,107,0.8) 5%, rgba(0,63,112,0.2) 81%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,rgba(0,57,107,0.8)), color-stop(81%,rgba(0,63,112,0.2))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,57,107,0.8) 5%,rgba(0,63,112,0.2) 81%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,57,107,0.8) 5%,rgba(0,63,112,0.2) 81%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,57,107,0.8) 5%,rgba(0,63,112,0.2) 81%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,57,107,0.8) 5%,rgba(0,63,112,0.2) 81%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc00396b', endColorstr='#33003f70',GradientType=0 ); /* IE6-9 */ } svg { width: 100%; height: auto; margin-bottom: 35px; } .text-block { margin-bottom: 45px; } h3 { color: $orange-header; font-size: 22px; line-height: 26px; margin: 0px 0px 10px; } p { font-size: 16px; line-height: 24px; } .container { position: relative; z-index: 5; } } .thumbnail { img { opacity: 1.0; -webkit-transition: opacity .1s ease-in-out; -moz-transition: opacity .1s ease-in-out; -o-transition: opacity .1s ease-in-out; transition: opacity .1s ease-in-out; } } // Team Member Listing Block .thumbnail { background-color: transparent; } .team-member { margin-top: 40px; text-align: center; min-height: 290px; h5 { font-size: 20px; line-height: 26px; margin: 0px; } .thumbnail { margin-bottom: 10px; background: transparent; border: none; -box-shadow: none; img { max-height: none; width: auto; margin: 0 auto; padding: 3px; //border: 3px solid $brand-primary; border-radius: 4px; } } p { font-size: 16px; line-height: 20px; margin: 0px; &.title { color: $green-link; } &.dept { color: $light-gray; font-style: italic; } } } // Pagination ul.pagination { margin: 20px 0px 48px; &> li { &> a { color: #709132; margin: 0px 3px; padding: 5px 10px; background-color: transparent; border: none; font-family: 'Lato', sans-serif; font-size: 16px; line-height: 19px; border-radius: 2px; background-color: transparent; &:hover, &:active, &:focus { background-color: transparent; color: darken(#709132, 10%); } } &.active { &> a { background-color: #709132; color: #fff; font-weight: 700; &:hover, &:active, &:focus { background-color: darken(#709132, 10%); color: #fff; } } } &:first-child, &:last-child { &> a { &:hover, &:active, &:focus { background-color: transparent; color: darken(#709132,10%); } } } } } .twitter-share-button { display: inline-block; position: relative !important; top: 4px; } //Blog Article Single .blog-article-wrapper { background-color: #fff; padding-bottom: 40px; a { color: #fff; } .blog-article { margin-top: -100px; .back-link { position: relative; padding-left: 15px; a { display: inline-block; text-transform: uppercase; font-size: 16px; line-height: 20px; margin-bottom: 40px; &:before { position : absolute; content:""; width: 0; height: 0; top: 6px; left: 0px; border-style: solid; border-width: 5.5px 9px 5.5px 0px; border-color: transparent #fff transparent transparent; } &:hover { text-decoration: underline; } } } .caption { padding: 20px 30px; padding: 15px 20px; background-color: $blue-border; color: #fff; h2 { margin: 0px; font-size: 20px; line-height: 27px; } p { color: #fff; font-size: 16px; line-height: 20px; font-weight: 400; margin: 0px; } } p { font-size: 16px; line-height: 24px; color: $green-link; margin-bottom: 30px; &.img-caption { margin: 15px 0px 30px; font-size: 16px; line-height: 24px; } } .share-icons { margin: 0px 0px 30px; width: 100%; float: left; } } } // Content Page styles / WYSIWYG .page-intro { font-size: 22px; line-height: 30px; color: $btn-primary-color; margin-bottom: 35px; margin-top: 0px; } .content-section { margin-bottom: 40px; h4 { font-size: 22px; line-height: 26px; } img { margin: 0px; } p { font-size: 16px; line-height: 24px; } .block-cta { position: relative; text-transform: uppercase; font-size: 16px; line-height: 20px; font-weight: 700; color: $form-labels-color; &:hover { color: darken($form-labels-color, 10%); &:after { border-color: transparent transparent transparent darken($form-labels-color, 10%); } } &:after { visibility: visible; position : absolute; content:""; width: 0; height: 0; top: 6px; right: -12px; border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent $form-labels-color; } } } // Service Listing / Content Page / Service Listing 2 .service-listing { h3 { border-bottom: 2px solid $blue-border; padding-bottom: 20px; margin-bottom: 45px; color:$btn-primary-color; font-size: 22px; line-height: 26px; } p { line-height: 24px; } .media { margin-bottom: 30px; } .button-cta { text-align: center; padding-top: 40px; border-top: 2px solid $blue-border; a { &.btn { margin: 0px; padding: 13px 30px; } } } } // Contact Page styles / Form / Sidebar .contact-wrapper { margin-top: 40px; padding-top: 40px; border-top: 2px solid $blue-border; h4 { &.required { font-size: 16px; line-height: 27px; margin-bottom: 20px; color: $purple; } } .contact-sidebar { background-color: #F7F8ED; padding: 20px; margin: 50px 0px; a.btn { white-space: normal; margin-top: 10px; } p { margin-bottom: 0px; font-size: 14px; line-height: 21px; &.grey { color: $regular-text; a { color: $regular-text; } } } h4 { font-weight: 700; font-size: 14px; line-height: 17px; } h5 { font-weight: 700; font-size: 12px; line-height: 21px; color: $black-text; text-transform: uppercase; &:first-child { margin-top: 0px; } } p a { font-size: 14px; line-height: 21px; color: #709132; text-decoration: none; &:hover { text-decoration: underline; } } ul { &.social-nav { &> li { display: inline-block; &> a { padding: 10px 5px; } &:first-child { &> a { padding-left: 0px; } } &:last-child { padding-right: 0px; } } } } } form { .form-control { padding: 8px 20px; background: #FFFFFF; border: 1px solid $input-border-color; border-radius: 50px; height: auto; } label { color: $black-text; margin-left: 20px; text-transform: uppercase; font-weight: 700; font-size: 12px; letter-spacing: 0.5px; line-height: 15px; span { color: $purple; padding-left: 2px; } } textarea { border-radius: 25px !important; } } } // Accordion / Panel Styles .panel-group { &.filters { margin-bottom: 0px; padding-bottom: 0px; background-color: #F7F8ED; .panel-heading { padding: 10px 28px 10px 15px; .fa { margin-right: 5px; } } a.remove-filter { line-height: 21px; } } .panel { box-shadow: none; &.panel-default { background-color: $text-color; background-color: rgba(1,110,178,0.08); border-color: $light-blue-border; .panel-heading { padding: 0px; background-color: $text-color; background-color: rgba(1,110,178,0.08); border-color: $light-blue-border; h3 { font-size: 14px; line-height: 18px; font-weight: 700; margin: 0; color: $text-color; text-transform: uppercase; a { display: block; padding: 20px 25px; position: relative; &:after { position: absolute; display: inline-block; content: ''; right: 25px; width: 3px; height: 18px; background-color: $text-color; } &:before { position: absolute; display: inline-block; content: ''; right: 25px; width: 3px; height: 18px; background-color: $text-color; transform: rotate(90deg) ; -webkit-transform: rotate(90deg) ; -moz-transform: rotate(90deg) ; -o-transform: rotate(90deg) ; -ms-transform: rotate(90deg) ; } &[aria-expanded='true'] { &:after { display: none; } } } } &.filters { border-top: none; } } .panel-body { border-top-color: $light-blue-border; padding: 20px 25px; } } &.panel-primary { border: none; background: $tan-bg; .panel-heading { position: relative; border: none; background-color: transparent; border-top: 1px solid $dropdown-border; &.filter { background-color: #513949; padding: 10px; text-transform: uppercase; border-top: none; h4 { a { color: #fff; font-family: Lato; font-size: 13px; letter-spacing: 0.5px; line-height: 16px; &.remove-filter { font-weight: 700; font-size: 12px; color: $green-link; letter-spacing: 0.5px; line-height: 15px; padding-top: 5px; i { border-radius: 50px; background: $green-link; color: #513949; margin-right: 5px; padding: 2px 3px; } &:hover { color: #fff; i { background: #fff; } } } } } } h3 { color: #fff; font-size: 22px; line-height: 30px; margin: 0px; } .arrow-down { position: absolute; bottom: -14px; left: 20px; width: 0; height: 0; border-left: 17px solid transparent; border-right: 17px solid transparent; border-top: 17px solid #513949; } } .panel-body { padding: 0px !important; border: none; .collapse-all-link { padding: 15px 10px 10px; text-align: right; a.nav-toggle { text-transform: uppercase; font-weight: 700; font-size: 12px; color: $anchor-color; letter-spacing: 0.5px; line-height: 15px; background: transparent; i { display: inline !important; padding: 3px; background: #E0E6D4; border-radius: 2px; color: $anchor-color; margin-right: 8px; &.fa-minus, &:hover, &:active, &:focus { color: $dropdown-open-hover-text; } } } } } &.filters { border-bottom: 1px solid $dropdown-border; .panel-body { padding: 0px 10px 30px 10px !important; } } } } } ul.checkbox { & > li { & > a { display: block; margin: 0px; padding: 3px 0px; text-transform: none; padding-left: 30px; position: relative; &:before { content: ""; position: absolute; width: 22px; height: 21px; left: 0px; top: 5px; background: url("/assets/images/checkbox.png") no-repeat; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } &.active { &:before { content: ""; position: absolute; width: 22px; height: 21px; left: 0px; top: 5px; background: url("/assets/images/checkbox-checked.png") no-repeat; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } } } } } .panel-title > a, .panel-title > small, .panel-title > .small, .panel-title > small > a, .panel-title > .small > a { text-transform: uppercase; font-weight: 700; font-size: 12px; color: $black-text; letter-spacing: 0.5px; line-height: 16px; } // Compare Table / Offer Table / Services Table ul.compare-table { &> li { width: 100%; float: left; margin-bottom: 30px; &:last-child { margin-bottom: 0px; } img { width: 26px; position: relative; top: -8px; margin-right: 15px; } p { font-size: 16px; } } } // Team Modal .modal { .modal-content { border-radius: 2px; -webkit-border-radius: 2px; background-color: #fff; .modal-header { background-color: #F7F8ED; padding: 20px; border: none; button.close { border-radius: 50%; padding: 1px 7px; color: #709132; opacity: 1; margin-top: -10px; &:hover, &:active, &:focus { color: $dropdown-open-hover-text; } } h4 { color: $form-headers; margin: 0px; font-size: 16px; line-height: 19px; } i.fa { font-size: 22px; margin-right: 30px; color: $form-labels-color; &:hover { color: darken($form-labels-color, 10%); } } &.filters { background-color: #513949; padding: 0px; .panel-title { a { font-size: 13px; color: #FFFFFF; letter-spacing: 0.5px; line-height: 16px; } } button.close { margin-top: -5px; color: #E9FFBE; &:hover { color: #fff; } } .panel-heading { border-top: none; i.fa-plus { margin-right: 5px; } } } } .modal-body { padding: 0px; .team-member { margin: 0px; min-height: 0px; img { width: auto; margin: 0 auto; padding: 3px; border: 3px solid $brand-primary; border-radius: 4px; } } h3 { margin: 15px 0px 0px; font-size: 22px; line-height: 26px; color: $orange-heading; } p { margin-bottom: 25px; font-size: 14px; line-height: 21px; color: $green-link; &.title { font-size: 16px; line-height: 20px; padding-bottom: 15px; border-bottom: 4px solid $brand-primary; margin-top: 20px; margin-bottom: 15px; } a { text-decoration: none; } &:last-child { margin-bottom: 0px; } } } &.filters { border: none; box-shadow: none; } } } // CTA Row / Stock / PDF Downloads .stock-cta { padding: 30px 0px; background-color: #2E4D04; text-align: center; p { margin: 0px; font-size: 15px; line-height: 24px; color: $green-link; a { position: relative; color: $green-link; text-decoration: none; &:hover { text-decoration: underline; } } span { display: block; font-weight: 700; &.border { display: inline-block; font-weight: 300; margin: 0 10px; } } } } a { &.thumbnail { &:focus, &:hover, &:active { border-color: transparent !important; outline: none !important; } } } // Plant Detail Page .plant-statistics { padding: 30px 20px; background: $tan-bg; text-align: center; margin-bottom: 50px; h4 { margin: 0px 0px 8px; text-transform: uppercase; font-weight: 700; font-size: 12px; line-height: 24px; } span { display: block; font-size: 14px; word-wrap: break-word; } .season-scale { position: relative; margin: 25px 0px 45px; .scale { img { position: relative; float: none; width: 100%; height: 12px; z-index: 5; top: 0; border-radius: 50px; } span { width: 100%; float: none; text-align: center; font-weight: 700; text-transform: uppercase; font-size: 12px; color: $black-text; line-height: 24px; } } .arrow { position: absolute; bottom: auto; margin-top: -6px; left: 2%; svg { @include transform(rotate(180deg)); } #arrow { polygon { fill: #8BC3C8; } } &.early-spring { left: 11%; #arrow { polygon { fill: #77C598; } } } &.late-spring { left: 21%; #arrow { polygon { fill: #5BC069; } } } &.early-summer { left: 36%; #arrow { polygon { fill: #62BD36; } } } &.midsummer { left: 49%; #arrow { polygon { fill: #ABC13A; } } } &.late-summer { left: 57%; #arrow { polygon { fill: #D5C03C; } } } &.early-fall { left: 66%; #arrow { polygon { fill: #CFAB49; } } } &.late-fall { left: 79%; #arrow { polygon { fill: #BE9F73; } } } } } .temp-arrow { position: relative; bottom: -5px; right: -5px; } .zone-wrap { position: relative; span { position: absolute; top: 20%; left: -5px; right: 0; font-weight: 700; font-size: 14px; color: #FFFFFF; line-height: 36px; } img { max-height: 60px; } } .growth-cycle { img { max-height: 40px; &.temp-arrow { max-height: 25px; } } } table { tr { th { text-transform: uppercase; text-align: left; font-weight: 700; font-size: 12px; line-height: 24px; color: $black-text; } td { padding-left: 10px; text-align: left; font-size: 14px; color: $regular-text; line-height: 24px; } } &.table-responsive { margin: 0 auto; } } .foliage-bloom { padding: 25px 0px; border-top: 2px solid $dropdown-border; border-bottom: 2px solid $dropdown-border; margin: 30px 0px; } } .list-group-row { .list-group-item { border: none !important; padding: 0px; background-color: transparent; } } .plant-detail { margin-bottom: 65px; h1 { margin: 35px 0px 5px; font-weight: 700; font-size: 26px; color: $purple; line-height: 32px; } p { margin: 0px 0 20px; &.name { font-weight: 700; font-size: 18px; color: $anchor-color; line-height: 22px; margin: 0px; } &.grow-tips { a { display: block; text-decoration: none; } } } } .inline-cta { background: $tan-bg; border-top: 4px solid $blue-border-bar; padding: 30px; margin: 45px 0px; width: 100%; h3 { margin: 0px; font-weight: 700; font-size: 16px; color: $black-text; line-height: 22px; text-shadow: none; text-transform: uppercase; } p { font-size: 14px; color: $black-text; line-height: 21px; margin: 10px 0px 0px 0px; &.phone { margin: 30px 0px 0px 0px; font-weight: 700; font-size: 14px; color: $purple; line-height: 17px; a { text-decoration: none; } i { margin-right: 5px; } } } a.btn { display: inline-block !important; margin: 25px 15px 0px 0px !important; } } .foliage-leaf { #leaf { stroke-width: 0; } &.green { #leaf { fill: #809951; } } &.golden-yellow { #leaf { fill: #DCCD66; } } &.blue { #leaf { fill: #74A3AA; } } &.blue-green { #leaf { fill: #60A794; } } &.bronze-copper { #leaf { fill: #9C5B30; } } &.multicolored { #leaf { //fill: url('#Multi1') #ccc; } } &.orange { #leaf { fill: #D77E4A; } } &.variegated { #leaf { fill: #57781A; stroke-width: 2; stroke: #CBB727; } } &.white { #leaf { fill: #fff; stroke-width: 1; stroke: #BFBFBF; } } &.red-purple { #leaf { fill: #A73131; } } &.yellow-green { #leaf { fill: #B2BC54; } } } //BX Slider Styles .content-row { .bx-wrapper { margin: 0px; img { margin: 0 auto; } .bx-viewport { border: none !important; left: 0px !important; box-shadow: none !important; } .bx-controls-direction { position: relative !important; a { top: -39px; margin-top: 0px; width: 32px; height: 39px; text-align: center; } .bx-prev { background: url(images/controls-prev.png) no-repeat center center; &:hover { background-position: center center !important; } } .bx-next { background: url(images/controls-next.png) no-repeat center center; &:hover { background-position: center center !important; } } } .bx-pager { height: 40px; bottom: 0 !important; background: rgba(27, 47, 1, 0.9); padding: 15px 0px; &.bx-default-pager { .bx-pager-item { a { background: transparent; width: 12px; height: 12px; margin: 0 8px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 2px solid $light-green; &:hover, &.active, &:focus, &:active { background: $light-green; } } } } } } .panel-title { line-height: 18px; } } // Info Row / Green Leaf Icon Lists .info-row { border-top: 2px solid #D8EAEF; padding: 25px 0px; ul { li { display: block; background: url("/assets/images/list-leaf.png") no-repeat left 12px; padding: 5px 0px 5px 16px !important; } } h4 { text-transform: uppercase; margin: 0px 0px 10px; font-weight: 700; font-size: 18px; color: $black-text; line-height: 22px; } &.last { border-bottom: 2px solid #D8EAEF; } img { margin: 30px 0px; } } .table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td { border: none; } .back-link { font-weight: 700; font-size: 12px; color: $green-link; letter-spacing: 0.5px; line-height: 21px; text-transform: uppercase; margin: 30px 15px; i { margin-right: 5px; } &:hover, &:active, &:focus { color: $green-link; text-decoration: underline; } } // Search Bar & CTA on Plant Search Templates .search-bar-wrapper { background: #513949; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25); .input-group-wrapper { padding: 15px 0px; .browse-link { margin-top: 15px; a { font-weight: 700; font-size: 14px; color: $green-link; letter-spacing: 0.53px; line-height: 18px; text-decoration: none; &:hover, &:active, &:focus { text-decoration: underline; } } } } #search-autocomplete { padding-top: 4px; .input-group-btn { vertical-align: top; } } .browse-button { padding: 7px 0px 8px; text-align: left; a.btn.btn-primary { font-weight: 700; font-size: 14px; color: #FFFFFF; letter-spacing: 0.5px; line-height: 17px; } } .search-bar-cta { background: #36192C; padding: 13px 0px; p { font-weight: 700; font-size: 12px; color: #fff; letter-spacing: 0.46px; line-height: 17px; margin: 0; text-transform: uppercase; a { position: relative; color: $green-link; text-decoration: none; &:hover, &:active, &:focus { text-decoration: underline; } &:first-of-type { &:after { content: '|'; position: relative; left: 0; display: inline-block; margin: 0px 5px; } } } } } } // Plant Listing / Plant Search Page .plant-listing { .plant-box { padding: 40px 0px; border-bottom: 2px solid #D8EAEF; h3 { //font-style: italic; text-shadow: none; text-align: center; font-size: 20px; color: $purple; line-height: 24px; margin-bottom: 5px; } p.name { margin: 0px 0px 30px 0px; font-weight: 700; font-size: 16px; color: $anchor-color; line-height: 19px; text-align: center; } .plant-image { a { margin: 0px; } img { margin: 0px auto; margin-bottom: 15px; } } .plant-stats { background: $tan-bg; border: 1px solid $dropdown-border; padding: 20px; .btn { margin: 0; } table { & > tbody { & > tr { & > th { font-size: 12px; line-height: 14px; padding: 0; padding-right: 10px; padding-top: 14px; vertical-align: middle; text-transform: uppercase; } & > td { font-size: 14px; line-height: 14px; padding-top: 14px; vertical-align: middle; } } } } } // New Tag / New Plant - signified with "new" class &.new { .plant-stats { position: relative; &:before { content: 'NEW!'; display: block; width: 75px; position: absolute; top: -14px; left: 0; right: 0; margin: 0 auto; padding: 5px 10px; background: #7DB7C9; border-radius: 4px; font-weight: 700; font-size: 14px; line-height: 17px; color: #FFFFFF; letter-spacing: 0.25px; text-align: center; } } } &:first-of-type { margin-top: 0px; padding-top: 0px; } } } .filter-row { padding-bottom: 30px; margin-bottom: 50px; border-bottom: 2px solid $blue-border-bar; .sort-filter-modals { background-color: #E0E6D4; padding: 7px 0px; .bootstrap-select.btn-group:not(.input-group-btn), .bootstrap-select.btn-group[class*="col-"] { display: inline-block; width: auto; height: auto; button.dropdown-toggle { height: 26px; margin: 0px; padding: 3px 40px 3px 20px; background-color: #7D9B44; border-color: #6C843F; font-size: 13px; line-height: 16px; color: #fff; letter-spacing: 0.46px; .caret { top: 5px; right: 23px; color: #fff; } .filter-option { font-size: 13px; line-height: 16px; color: #fff; font-weight: 700; } } } .btn.btn-primary { display: inline-block; height: 26px; padding: 3px 30px 3px 20px; margin: 0px; background-color: #7D9B44; border-color: #6C843F; font-size: 13px; line-height: 16px; color: #fff; letter-spacing: 0.46px; max-width: 100%; &:hover, &:active, &:focus { color: #fff; border-color: #768d45 !important; background-color: #768d45!important; outline: none !important; box-shadow: 0px 0px 6px 0px #709132; } i { margin-right: 10px; font-size: 16px; } @media (max-width: 420px) { font-size: 12px; padding: 2px 16px 3px 12px; i { margin-right: 4px; position: relative; top: 1px; } } } .btn-group { .btn { &:first-of-type { border-top-right-radius: 50px !important; border-bottom-right-radius: 50px !important; } } } } } .active_filters { &.reefine_active_filters { h3 { margin-top: 35px; font-weight: normal; font-size: 18px; color: $purple; line-height: 22px; text-shadow: none; text-align: center; } ul { & > li { & > a { background: #E0E6D4; border-radius: 40px; padding: 7px 12px; font-weight: 700; font-size: 14px; color: #668826; line-height: 17px; &:hover { background: #e9ede1; } i { margin-left: 10px; font-weight: normal; } } } &.list-inline { & > li { display: inline; & > a { display: inline-block; margin-top: 10px; &.remove-filter { display: block; text-align: center; } } } } } } } a { &.remove-filter { text-transform: uppercase; background: transparent; font-weight: 700; font-size: 12px; color: $anchor-color; line-height: 15px; padding-left: 0; &:hover { color: $dropdown-open-hover-text; } i { background: #709132; border-radius: 50px; color: #fff; padding: 2px 4px; margin-right: 5px; &:before { color: #fff; } } &:hover i { background: $dropdown-open-hover-text; } } &.nav-toggle { text-transform: uppercase; background: transparent; font-weight: 700; font-size: 12px; color: $anchor-color; line-height: 15px; padding-left: 0; } } .plant-types { background: #E0E6D4; padding: 20px; margin-bottom: 20px; a { display: block; text-transform: uppercase; font-size: 14px; color: #668826; line-height: 28px; font-weight: 700; &:hover { color: $dropdown-open-hover-text; i { color: #fff; } } &.all-plants { i { font-size: 12px; margin-left: 10px; } &:hover { i { color: $dropdown-open-hover-text; } } } &.disabled { color: #8A907F; } } ul { & > li { & > a { padding: 0px 10px; text-transform: none; } &.dropdown { & > a { display: inline-block; } & > ul { padding-left: 10px; } } } } } a.nav-toggle { display: inline !important; margin-left: 8px; i.fa { background: $anchor-color; border-radius: 2px; padding: 2px 3px !important; color: #fff; font-size: 14px; &.fa-minus { color: #fff; background: $dropdown-open-hover-text; } } &:hover { cursor: pointer; i.fa { color: #fff; background: $dropdown-open-hover-text; } } &.panel-toggle { position: absolute; right: 10px; top: 12px; i { background: #E0E6D4; color: $anchor-color; &.fa-minus, &:hover, &:active, &:focus, { background: #E0E6D4; color: $dropdown-open-hover-text; } } } } .plant-type-mobile { padding: 30px 0px; .btn-group { .btn:first-of-type { border-top-right-radius: 50px !important; border-bottom-right-radius: 50px !important; } } } .modal-title { display: block; padding-left: 15px; font-weight: 700; font-size: 14px; line-height: 51px; border-bottom: 1px solid $dropdown-border; } // TypeAhead Styles / Wrap input field with id of #search-autocomplete to enable autocomplete with styles #search-autocomplete { input.typeahead { background: #FFFFFF; border: 1px solid #EBC2DE; border-radius: 50px 0px 0px 50px; font-size: 16px; color: #202615; line-height: 19px; height: auto; padding: 10px 20px; text-indent: 20px; -webkit-transition: all 0.2s; -moz-transition: all 2s; transition: all 0.2s; &:last-of-type { background-image: url('/assets/images/search-icn.png'); background-repeat: no-repeat; background-position: 15px center; &:focus, &:active { background-image: none; } } &:first-child { background-image: none !important; } } button[type="submit"] { padding: 8px 10px 11px 10px; border: 1px solid #5AB6D2; border-left: none; font-weight: 700; font-size: 14px; color: #FFFFFF; letter-spacing: 0.75px; line-height: 17px; i { font-size: 20px; margin-right: 5px; } } } .tt-menu { width: 100%; background-color: #fff; margin-top: 5px; border: 1px solid $input-border-color; border-radius: 2px; color: $black-text; } .tt-suggestion { display: block; padding: 9px 20px; text-align: left; &.tt-cursor, &:hover { background: rgba(112,145,50,0.10); border-radius: 2px; } } .tt-suggestion.tt-is-under-cursor { background: rgba(112,145,50,0.10); border-radius: 2px; } .tt-suggestion.tt-is-under-cursor a { color: $black-text; } .tt-suggestion p { margin: 0; } .twitter-typeahead { width: 87%; } // Blog Social Share Buttons .twitter-share-button { top: 0px !important; } .fb_iframe_widget iframe { top: -5px !important; } #liwrapper, #twitwrapper, #fbwrapper { margin-right: 5px; } .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; } // Blog Filter Row Styles / Dropdowns .blog-filters { background-color: #1B2F01; padding: 10px 15px; div.bootstrap-select.btn-group .dropdown-menu { margin-top: 35px; &.inner { margin-top: 0px !important; } } .pull-left { max-width: 200px; .bootstrap-select.primary { max-width: 100%; } } .pull-right { &.social-wrapper { div.bootstrap-select .dropdown-menu { margin-top: 0px; } } } .form-control { height: auto !important; } } .blog-article-social { position: relative; background-color: rgba(27,47,1,0.8); padding: 15px 0px; } .bootstrap-select { &.primary { .dropdown-toggle { padding: 5px 45px 4px 20px; height: 26px; font-size: 13px; line-height: 16px; margin: 0px; background: #7D9B44; border: 1px solid #A5C46B; border-radius: 50px; font-weight: 700; color: #FFFFFF; letter-spacing: 0.5px; .filter-option, .caret { font-size: 13px; font-weight: 700; color: #fff; } .caret { top: 5px; } } } } // button hover, active override .btn-default:active:hover, .btn-default:active:focus, .btn-default:active.focus, .btn-default.active:hover, .btn-default.active:focus, .btn-default.active.focus, .open > .btn-default.dropdown-toggle:hover, .open > .btn-default.dropdown-toggle:focus, .open > .btn-default.dropdown-toggle.focus { color: #fff; background-color: #7D9B44; border-color: #7D9B44; .filter-option, .caret { color: #fff; } } .btn-primary:hover { color: #fff; background-color: #7D9B44; border-color: #A5C46B; } // 5 Wide Bootstrap Class .col-xs-15 { width: 20%; float: left; } .table-responsive { border: none !important; } .navbar-fixed-top { z-index: 1050; .navbar-collapse { max-height: none !important; } } .navbar-fixed-bottom .navbar-collapse { max-height: none !important; } .flex-row { @include align-items(stretch); @include display(flex); @include flex-direction(row); @include justify-content(flex-start); .flex-start { @include flex(1); @include align-self(flex-start); } .flex-end { @include flex(1); @include align-self(flex-end); } } .popover.bottom { position: relative; top: 75px !important; left: 0 !important; font-family: 'Lato', sans-serif; border-radius: 0px; padding: 20px; max-width: none; background: #FCFCFC; box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.15); border: none; & > .arrow { border-bottom-color: #fff !important; &:after { border-bottom-color: #fff !important; } } ul li { margin-bottom: 10px; & > a { font-size: 14px; line-height: 32px; } } h3 { font-family: 'Lato', sans-serif; text-transform: uppercase; margin: 0px 0px 12px; font-weight: 700; font-size: 14px; color: $black-text; letter-spacing: 0.5px; line-height: 17px; } a { display: block; font-size: 18px; line-height: 22px; img { margin-bottom: 10px; } } .other-column { border-left: 1px solid $blue-border-bar; } .function-column { padding-top: 20px; margin-top: 20px; border-top: 1px solid $blue-border-bar; } } // Range Filter Slider Styles .slider { &.slider-horizontal { width: 100% !important; .slider-track { border-radius: 4px; .slider-handle { position: absolute; width: 5px; height: 27px; margin-left: 0px; margin-top: -8px; background-color: #709132; background-image: none; border: 0px solid transparent; border-radius: 2px; &.round { border-radius: 25%; } } .slider-selection { background-color: #D4DEC2; background-image: none; } } } } // Wordpress Alignment Styles for imported blog posts .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float: right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } a img, figure { &.alignright { float: right; margin: 5px 0 20px 20px; } &.alignnone { margin: 5px 20px 20px 0; } &.alignleft { float: left; margin: 5px 20px 20px 0; } &.aligncenter { display: block; margin-left: auto; margin-right: auto; } } .wp-caption { max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; &.alignnone, &.alignleft { margin: 5px 20px 20px 0; } &.alignright { margin: 5px 0 20px 20px; } img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; } } /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; &:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } } figcaption { margin: 10px 0px 20px; } #filterChoices { .btn.btn-primary { padding: 5px 15px; margin-top: 10px; } } .favorites-row { .plant-box-container { &:nth-child(3) { clear: left; } } } .dropdown-menu.inner { -ms-overflow-style: none; overflow: -moz-scrollbars-none; &::-webkit-scrollbar { width: 0 !important; } } .modal-backdrop { top: -10%; height: 120%; } #popover-container { position: absolute; width: 100%; top: 30px; margin-left: auto; margin-right: auto; display: block; left: 0; right: 0; } // GRAYBOX Copyright Styles @media (max-width: 420px) { .gbox { padding-top: 10px; } } .breadcrum-container{margin-bottom: 0px;} .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden;} .search-bar-wrapper { background: #513949; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25); } .input-group input{ width: 100%; margin-top: 22px;} #search-autocomplete{display:none} .search-bar-wrapper form{ width: 100%; margin-bottom: 24px!important; display: inline-block; margin-top: 17px;} #search-autocomplete .typeahead { background-color: #fff!important; } #search-autocomplete input{ width:100%} .search-bar-wrapper .input-group input{ background-color: #fff!important; padding: 17px 14px!important;} .filter_section .borderbtm { border-bottom: 2px solid #6cb6c685; margin-bottom: 25px; padding-bottom: 25px; } .filter_section{ border-top: 2px solid #6cb6c6e6; padding-top: 30px;} .filter_section .borderbtm a { background-color: #1b4c1a!important; border: 1px solid #1b4c1a!important; border-radius: 25px;} .loaderspin{ position: absolute; top: 0; left: 0; right: 0; text-align: center; width: 100%; background-color: #ffffff91; min-height: 450px; } .loaderspin img{ padding: 53% 0%; } .panel-default>.panel-heading { color: #333; background-color: #fff; border-color: #e4e5e7; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .panel-default>.panel-heading a { display: block; padding: 10px 15px; } .panel-default>.panel-heading a:after { content: ""; position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; float: right; transition: transform .25s linear; -webkit-transition: -webkit-transform .25s linear; } .panel-default>.panel-heading a[aria-expanded="true"] { background-color: #eee; } .panel-default>.panel-heading a[aria-expanded="true"]:after { content: "\2212"; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .panel-default>.panel-heading a[aria-expanded="false"]:after { content: "\002b"; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .accordion-option { width: 100%; float: left; clear: both; margin: 15px 0; } .accordion-option .title { font-size: 20px; font-weight: bold; float: left; padding: 0; margin: 0; } .accordion-option .toggle-accordion { float: right; font-size: 16px; color: #6a6c6f; } .accordion-option .toggle-accordion:before { content: "Expand All"; } .accordion-option .toggle-accordion.active:before { content: "Collapse All"; } .sortingarea ul.sort {margin:0; display: inline-block; border: 1px solid #7D9B44;} .sortingarea ul.sort li{display:inline-block;float:left} .sortingarea .col-sm-12 > div{ float: right; margin-top: 14px; margin-bottom: 15px;} .sortingarea .col-sm-12 > div p{ display: inline-block; vertical-align: bottom; text-transform: uppercase; font-size: 13px; margin-right: 5px; font-style: italic;} .sortingarea{ margin-top: 36px;} .sortingarea .col-sm-12 > div a{ color: #7D9B44; font-weight: 600; padding: 8px 7px; display: inline-block; text-transform: uppercase; font-size: 13px;} .sortingarea .col-sm-12 > div a:hover{text-decoration:none} .sortingarea .col-sm-12 > div li:nth-child(1) a{ border-right: 1px solid #7D9B44;} .sortingarea .col-sm-12 > div li a.active{ background-color: #a2b816 ; color: #fff;} .filter_section_area{ background-color: #E0E6D4; margin: 0; padding: 8px 14px; margin-bottom: 23px;} .filter_section_area ul{margin-bottom:0} .filter_section_area a{ color: #668826; text-decoration: none; text-transform: uppercase; font-family: "lato";} .filter_section_area a:hover{text-decoration:none} .search-bar-wrapper .input-group-btn{ margin-top: 20px;} /*gurpreet-css*/ .input-group.plants-form .form-control{ background: #FFFFFF; border: 1px solid #EBC2DE; border-radius: 50px 0px 0px 50px; font-size: 16px; color: #202615; line-height: 19px; height: auto; padding:14px 20px !important; } .input-group.plants-form .btn.btn-primary.cta{ padding: 13px 22px 16px 22px; border: 1px solid #6d7d1b; border-left: none; font-weight: 700; font-size: 14px; color: #FFFFFF; letter-spacing: 0.75px; line-height: 17px; border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-bottom-left-radius: 0; border-top-left-radius: 0; font-size: 16px; background-color:#a2b816; } .input-group.plants-form .twitter-typeahead{ width: 80%; } .search-bar-wrapper .plants-form .input-group-btn{ margin-top: 22px; } .search-bar-wrapper.plants-search-bar-wrapper{ background: #004c25; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{ background-color:#a2b816 !important; border: 1px solid #6d7d1b !important; } .info-row ul br{display:none}