/*==================================================== * Template: Farmite * Version: 1.0 * Author: QuickDev * Create : ====================================================*/ /*==================================================*/ /* [Table of contents] */ /*==================================================*/ /* 1. RESET 2. TYPOGRAPHY 3. BUTTONS 4. SPACE AND ALIGMENT 5. HEADER 6. PRELOADER 7. FOOTER 8. REVOLUTION SLIDER CUSTOM CSS 9. TEMPLATE PAGES 10. ABOUT US ONE 11. ABOUT US TWO 12. PROJECTS 13. LAND PRESERVATION 14. FARM PLANS 15. FARM TRUCK 16. FARM INSPECTION 17. SOIL ANALYSIS 18. BLOG GRID 19. BLOG SIDEBAR 20. BLOG LEFTSIDEBAR 21. BLOG RIGHTSIDEBAR 22. BLOG SINGLE 23. CONTACT US ONE 24. CONTACT US TWO 25. PROJECTS 26. PROJECTS DETAILS 27. 404 ERROR PAGE 28. FAQ 29. TESTIMONIALS 30. GALLERY FILTER 31. MAGNIFIC POPUP 32. YOUTUBE POPUP 33. MODAL POPUP 34. PULSE BUTTON EFFECTS 35. SCROLLING TOP 36. 36. HOME DEFAULT 37. HOME TWO. 38. HOME THREE. 39. TEAM. /* ===================================== 1. RESET. ===================================== */ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe,blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body{ overflow-x: hidden; text-rendering: optimizeSpeed; } html { font-size: 24px; font-weight: 100; line-height: 1.5; } /* ===================================== 2. TYPOGRAPHY. ===================================== */ h1, h2, h3, h4, h5, h6, p, ul,ol{ margin-top: 0; margin-bottom: 1rem; color: #323B3C; } h1, h2, h3, h4, h5, h6 { margin-bottom: 0.5rem; line-height: 1.1; font-family: 'Poppins', sans-serif; } h1, .h1 { font-size: 1.602rem; font-weight: 600; } h2, .h2 { font-size: 1.3rem; font-weight: 600; color: #333; } h3, .h3 { font-size: 0.90rem; color: #333; text-rendering: auto; } h4, .h4 { font-size: 0.85rem; } h5, .h5 { font-size: 0.70rem; color: #808080; } h6, .h6 { font-size: 0.65rem; text-transform: uppercase; font-weight: 500; color: #0A178F; } p { font-size: 15px; font-family: 'Poppins', sans-serif; color: #797979; font-weight: 400; line-height: 2; margin-bottom: 0rem; } a { color: #fff; text-decoration: none; transition: 0.3s; } a:hover { color: #e4943f; text-decoration: none; } .link-text a { color: #000; text-decoration: none; transition: 0.3s; } .link-text a:hover { color: #e4943f; text-decoration: none; } .text-b{ color: #797979; } /*==================================================== 3. BUTTONS. ====================================================*/ .link a { color: #eee; text-decoration: none; transition: 0.3s; } .link a:hover { color: #e4943f; text-decoration: none; } .btn { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; font-family: 'Poppins', sans-serif; font-weight: 500; border: none; border-radius: 5px; letter-spacing: 1px; text-transform: uppercase; } .btn-custom { color: #FFF; transition: 0.9s; padding: 0.15rem 1rem; font-size: 0.60rem; background: #eb662d; border: solid 2px #eb662d; } .btn-custom:hover { color: #FFF; background: #3AB3DF; border: solid 2px #3AB3DF; } .btn-custom:focus, .btn-custom.focus { box-shadow: none; } .btn-custom.disabled, .btn-custom:disabled { color: #fff; background-color: #3AB3DF; border-color: #3AB3DF; } .btn-custom:not(:disabled):not(.disabled):active, .btn-custom:not(:disabled):not(.disabled).active, .show > .btn-custom.dropdown-toggle { color: #fff; background-color: none; border-color: none; } .btn-custom:not(:disabled):not(.disabled):active:focus, .btn-custom:not(:disabled):not(.disabled).active:focus, .show > .btn-custom.dropdown-toggle:focus { box-shadow: none; } /*==================================================== 4. SPACE AND ALIGMENT. ====================================================*/ .container, .container-fluid{ margin: 3rem auto 3rem auto; } .inner-color{ padding: 1rem 0rem; background-color: rgba(240, 245, 245, 0.5); } .inner-color .container{ margin: 1rem auto 1rem auto } /*==================================================== 5. HEADER. ====================================================*/ .top-header{ background: transparent; height: 60px; width: 100%; clear: both; z-index: 1; position: relative; } .top-header p{ margin-bottom: 0px; color: #fff; font-size: 14px; } .header-left{ float: left; padding: 10px 0px; margin-bottom: 5px; } .header-right{ float: right; padding: 10px 0px; margin-bottom: 5px; } .phone-box, .mail-box{ display: inline-block; } .mail-box{ margin-right: 5px; } .social-dribbble, .social-facebook, .social-twitter, .social-instagram{ display: inline-block; font-size: 16px; color: #FFF; } .social-dribbble, .social-facebook, .social-twitter{ margin-right: 10px; } hr.top-line{ border-bottom: 1px solid rgba(255, 255, 255, 0.2); clear: both; } header{ position: relative; height: 100%; z-index: 100; } header .container{ margin: auto; } .home-slider{ z-index: -1; width: 100%; position: relative; height: auto; margin-top: -110px; } /*==================================================== 6. PRELOADER ====================================================*/ #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1031; background-color: #F2F2F2; } #loader-wrapper .loader { position: absolute; /*Setting position of element according to the next parent element with position anything other then default*/ top: 50%; /*50% down on the parent element*/ left: 50%; /*50% right on the parent element*/ -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /*50% of element width (50px) left, 50% of element height (50px) up*/ width: 100px; /*Element is 100px wide*/ height: 100px; /*Element is 100px tall*/ animation: spin .6s linear infinite reverse; /* Animation is using the spin keyframes Animation is 0.8 seconds long Aniamtion tweening/easing is linear (no acceleration) The animation loops forever The animation goes the opposite way than defines */ } #loader-wrapper .loader .ball { position: absolute; /*Same deal with centering the element like with .loader, but the parent of .ball is .loader*/ top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 100%; /*Height is 100% of the parent not 100% of the screen height (that's 100vh)*/ -webkit-animation: spin 1s infinite ease-in-out; animation: spin 1s infinite ease-in-out; /* Animation is using the spin keyframes (in the way it is defines) Animation is 1 second long Animation loops forever Animation tweening/easing is ease-in-out, which has symetrical acceleration at the start as at the end */ /*Here I am using the selector `:nth-child(n)` to select certain elements*/ } #loader-wrapper .loader .ball:after { /*Pseudo-class, there is also :before*/ position: absolute; /*Pseudoclasses for use as shapes need to be position absolute*/ content: ''; /*And content defined (Add some text into it)*/ background-color: #e4943f; /*SCSS variable using the white from line 8*/ width: 5px; /*Width 5 pixels*/ height: 5px; /*Height 5 pixels*/ border-radius: 100%; /*Corners will be rounded into an oval*/ top: 0px; /*Put this element at the top of the parent*/ } #loader-wrapper .loader .ball:nth-child(1) { /*The first .ball in the parent*/ -webkit-animation-delay: -0s; animation-delay: -0s; } #loader-wrapper .loader .ball:nth-child(2) { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; /*Start the animation 0.1s before*/ } #loader-wrapper .loader .ball:nth-child(3) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; /*Start the animation 0.2s before*/ } #loader-wrapper .loader .ball:nth-child(4) { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } #loader-wrapper .loader .ball:nth-child(5) { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } #loader-wrapper .loader .ball:nth-child(6) { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } #loader-wrapper .loader .ball:nth-child(7) { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } #loader-wrapper .loader .ball:nth-child(8) { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } #loader-wrapper .loader .ball:nth-child(9) { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } #loader-wrapper .loader .ball:nth-child(10) { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; /*I am a fan of negative delays*/ } @-webkit-keyframes spin { /*The keyframes for the animation `spin`*/ 0% { /*At 0% of the animation whatever elements have these keyframes set as an animation will have these properties*/ -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } /*The balls do not change colour because the animation is set to their parent and not themselves*/ 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } @keyframes spin { /*The keyframes for the animation `spin`*/ 0% { /*At 0% of the animation whatever elements have these keyframes set as an animation will have these properties*/ -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } /*The balls do not change colour because the animation is set to their parent and not themselves*/ 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } /*==================================================== 7. FOOTER. ====================================================*/ footer{ background-color: #232323; padding: 2rem 0rem 3rem; } footer .container{ margin: 1rem auto 0rem; } .footer-col .footer-logo{ width: 160px; margin-bottom: 1rem; } .footer-col .footer-logo img{ width: 100%; } .footer-col h4{ color: #FFF; font-size: 20px; } .footer-center-col{ padding: 0rem 1.5rem; } .footer-col h4:after { background: #e4943f; content: ''; display: block; height: 3px; margin: 15px 0px 20px; width: 60px; } .footer-col p{ line-height: 1.5; margin-top: 15px; font-weight: 13px; color: #FFF; } p.footer-about{ line-height: 2; } p.phone::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f095"; margin-right: 15px; color: #e4943f; } p.email::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0e0"; margin-right: 15px; color: #e4943f; } p.address::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f3c5"; margin-right: 18px; color: #e4943f; } .fl-left ul{ list-style: none; font-family: 'Poppins', sans-serif; font-size: 15px; color: #FFF; line-height: 2; } .fl-left ul li::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f101"; margin-right: 10px; } .fl-left{ float: left; margin-bottom: 1rem; } .fl-right{ float: right; margin-bottom: 1rem; } .fl-right ul{ list-style: none; font-family: 'Poppins', sans-serif; font-size: 15px; color: #FFF; line-height: 2; } .fl-right ul li::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f101"; margin-right: 10px; } .media-post{ clear: both; height: 70px; } .media-thumb{ width: 70px; float: left; margin-right: 15px; } .media-thumb img{ width: 100%; } .media-caption h5{ color: #FFF; font-size: 14px; line-height: 1.3; text-transform: none; } .media-caption p{ margin-top: -5px; font-size: 13px; } .news-letter{ clear: both; } .newsletter-box { margin: 15px 0px 15px 0px; } .newsletter-box form { display: flex; align-items: center; } .newsletter-box .input { width: 70%; height: 38px; background: #FDFCFB; border: none; font-family: inherit; color: #737373; letter-spacing: 1px; text-indent: 5%; font-size: 12px; font-family: 'Poppins', sans-serif; } .newsletter-box .button { width: 30%; height: 38px; background-color: #e4943f; border: none; border-radius: 0 5px 5px 0; font-family: inherit; font-weight: 500; color: inherit; letter-spacing: 1px; cursor: pointer; color: #FFF; font-size: 12px; font-family: 'Poppins', sans-serif; } p.cursive{ font-style: italic; font-size: 13px; } footer hr.divider{ margin: 30px auto 20px; border-top: 1px solid rgba(221, 221, 221, 0.1); } .footer-col hr.divider{ margin: 20px auto; border-top: 1px solid rgba(221, 221, 221, 0.1); } .popular-links ul li{ font-family: 'Poppins', sans-serif; color: #FFF; font-size: 14px; font-weight: 400; line-height: 2.5; list-style-type:none; } .popular-links ul li:before{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f101"; margin-right: 10px; } .footer-grid-box{ padding: 10px; } .gb-photos{ padding: 3px; } .gb-photos img{ width: 100%; } .footer-bottom{ padding: 10px 0px; } .fb-copyright{ float: left; } .fb-copyright p{ color: #FFF; font-size: 14px; } .fb-social{ float: right; color: #FFF; font-size: 15px; } .span-fb-social{ display: inline-block; margin-right: 5px; } .span-fb-social .fab{ font-size: 16px; transition: 0.3s; } .span-fb-social .fab:hover{ color: #e4943f; } .last-box{ margin-right: 0px; } /*==================================================== 8. REVOLUTION SLIDER CUSTOM CSS ====================================================*/ .rev_slider img{ width:100% } .rev_slider::after{ width: 100%; height:30%; position: relative; content: ""; top: 0px; left: 0px; z-index:100; display:block; transition:all .3s ease; background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 4%, rgba(0,0,0,30) 100%); background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.6))); } .rev-about h2:after { background: #e4943f; content: ''; display: block; height: 3px; margin: 15px 0px; width: 80px; } .rev-about p { margin-bottom: 15px; } .desktop-view{ margin-top: 2rem; } .rev-icon{ width: 70px; float: left; margin: 0px 20px 40px; } .rev-icon img{ width: 100%; } .rev-box .caption h4{ font-size: 18px; margin-bottom: 10px; } .rev-box .caption p{ font-size: 14px; line-height: 1.5; } /*==================================================== 9. TEMPLATE PAGES ====================================================*/ .pages-header{ height: 100%; background-image: url("../img/images/topo-1.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .pages-header2{ height: 100%; background-image: url("../img/images/topo-2.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .pages-header4{ height: 100%; background-image: url("../img/images/topo-4.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .pages-header1{ height: 100%; background-image: url("../img/images/topo-3.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .pages-header5{ height: 100%; background-image: url("../img/images/topo-5.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .pages-header6{ height: 100%; background-image: url("../img/images/topo-6.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .pages-header7{ height: 100%; background-image: url("../img/images/topo-7.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .sections{ height: 500px; margin-top: -160px; } .sections .container{ margin: 0px auto; } .pages-title{ position: absolute; bottom: 20px; z-index: -1; } .pages-title h1{ color: #FFF; } .breadcrumb{ background: transparent; padding: 0px; position: relative; } .breadcrumb li{ display: inline-block; float: left; font-size: 16px; font-family: 'Poppins', sans-serif; color: #FFF; } .breadcrumb li::after { /* this is the separator between items */ display: inline-block; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f054"; margin: 10px; color: #FFF; font-size: 14px; line-height: 2; margin: 0 0.80rem; } .breadcrumb li:last-of-type::after { /* hide separator after the last item */ display: none; } .breadcrumb li.current { margin-top: 2px; } .section-title{ width: 90%; margin: auto auto 1.7rem; text-align: center; } .section-title h2{ margin-bottom: 5px; font-weight: 600; } .section-title h2:after { background: #e4943f; content: ''; display: block; height: 5px; margin: 15px auto; width: 80px; } .section-title p{ line-height: 1.8; } /*==================================================== 10. ABOUT US ONE. ====================================================*/ .about-pic img{ width: 100%; } .about-info p{ margin-bottom: 1rem; } .ab-contact{ border-right: solid 1px #ddd; display: inline-block; margin-right: 1rem; padding-right: 1rem; } .ab-contact p{ margin-bottom: 2px; font-style: italic; } .ab-contact h3{ font-weight: 500; } .ab-signature{ width: 140px; display: inline-block; } .ab-signature img{ width: 100%; } .alter-box{ background-color: #FFF; box-shadow: 0 0 10px rgba(204,204,204,0.6); -moz-box-shadow: 0 0 10px rgba(204,204,204,0.6); -webkit-box-shadow: 0 0 10px rgba(204,204,204,0.6); -o-box-shadow: 0 0 10px rgba(204,204,204,0.6); align-content: center; align-items: center; vertical-align: middle; z-index: 3; } .ab-inner-icon{ width: 40px; float: left; margin-right: 10px; } .ab-inner-icon img{ width: 100%; } .ab-inner{ display: inline-block; width: 600px; padding-top: 30px; padding-right: 30px; padding-left: 30px; padding-bottom: 30px; align-content: center; align-items: center; vertical-align: middle; text-align: justify; } .ab-inner-alt{ display: inline-block; width: 250px; padding-left: 20px; align-content: center; align-items: center; vertical-align: middle; } .ab-inner-img{ display: inline-block; justify-items: center; width: 200px; padding-bottom: 20px; padding-top: 20px; padding-left: 20px; align-content: center; align-items: center; vertical-align: middle; } .alter-box h4{ font-size: 18px; margin-bottom: 0px; font-weight: 600; } .alter-box p{ margin-bottom: 0px; font-size: 14px; } .box-layer{ padding: 30px 25px 35px; transition: 0.3s; cursor: pointer; } .box-layer h4{ margin: 20px 0px 10px; transition: 0.3s; font-weight: 600; } .box-layer p{ font-size: 14px; line-height: 1.8; transition: 0.3s; } .active-layer{ background-color: #46866C; } .bl-icon-active{ width: 40px; } .bl-icon-active img{ width: 100%; } h4.active{ color: #FFF; } p.active{ color: #FFF; } .box-layer .bl-icon{ width: 40px; } .box-layer .bl-icon img{ width: 100%; } .box-layer .bl-icon-hover{ width: 40px; display: none; } .box-layer .bl-icon-hover img{ width: 100%; } .box-layer:hover{ background-color: #46866C; } .box-layer:hover .bl-icon{ display: none; } .box-layer:hover .bl-icon-hover{ display: inherit; } .box-layer:hover h4{ color: #FFF; } .box-layer:hover p{ color: #FFF; } .ws-lefside{ height: 550px; background: #46866C; margin-top: 80px; position: relative; background-image: url("https://via.placeholder.com//1920x1080"); height: 550px; background-position: center; background-repeat: no-repeat; background-size: cover; z-index: 1; } .ws-lefside:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom right, #46866C, #46866C); opacity: 0.95; } .ws-right{ background-image: url("https://via.placeholder.com//1920x1080"); height: 550px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; } .ws-content{ margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); padding: 0rem 5rem 0rem 2rem; } .ws-content p{ color: #FFF; } .panel-title{ margin-bottom: 20px; border-left: solid 4px #e4943f; } .panel-title h5{ color: #FFF; margin-left: 15px; margin-bottom: 5px; } .panel-title h2{ color: #FFF; margin-left: 15px; } .ws-icons-list{ margin-top: 2rem; } .ws-icons-list h4{ color: #FFF; font-weight: 600; } .ws-icons-list p{ margin-top: -5px; } .block-one{ display: inline-block; width: 250px; margin-right: 1rem; } .block-two{ display: inline-block; width: 250px; } .b-icon{ width: 50px; float: left; margin-right: 10px; } .b-icon img{ width: 100%; } .team-portrait{ position: relative; margin: 0px 10px; cursor: pointer; } .tp-headshot img{ width: 100%; position: relative; z-index: -1; } .tp-caption{ width: 100%; position: absolute; z-index: 1; bottom: 0; transition: 0.3s; padding: 0px 20px; } .inner-tp-caption{ background-color: rgba(255, 255, 255, 0.9); padding: 15px 10px 10px; text-align: center; border-bottom: solid 5px #e4943f; } .inner-tp-caption h3{ margin-bottom: 0px; font-size: 20px; font-weight: 600; } .team-portrait:hover .tp-caption{ transition: 0.3s; bottom: 10px; } .team-portrait .tp-social{ display: none; transition: 0.3s; } .tp-social .social-icon{ display: inline-block; margin: 0px 5px; } .tp-social .social-icon .fab{ color: #46866C; transition: 0.3s; font-size: 16px; margin: 0px 5px; } .tp-social .social-icon .fab:hover{ color: #e4943f; } .team-portrait:hover .inner-tp-caption{ padding: 15px; text-align: center; } .team-portrait:hover .tp-social{ display: inherit; } .image-hover figure { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } .image-hover figure:hover+span { bottom: -36px; opacity: 1; } .hover-effects figure img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover-effects figure:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } /*==================================================== 11. ABOUT US TWO. ====================================================*/ .about-info h5{ color: #e4943f; font-size: 16px; } .about-info h2:after{ background-color: #e4943f; content: ''; display: block; height: 4px; margin: 15px 0px; width: 80px; } .about-info p strong{ font-weight: 500; color: #333; font-style: italic; } .about-img img{ width: 100%; } .btn-more{ margin-top: 1rem; } .btn { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; font-family: 'Poppins', sans-serif; font-weight: 500; border: none; border-radius: 5px; letter-spacing: 1px; text-transform: uppercase; } a.btn-hover-corner { display: inline-block; text-decoration: none; color: #e4943f; font-weight: bold; font-size: 14px; position: relative; padding: 0.5rem 2.5rem; overflow: hidden; transition: 0.3s ease; margin-bottom: 0px; font-family: 'Poppins', sans-serif; } a.btn-hover-corner:before { content: ''; display: block; height: 100%; width: 100%; border-bottom: 2px solid #e4943f; border-left: 2px solid #e4943f; position: absolute; left: 0; bottom: 0; transition: 0.3s ease; } a.btn-hover-corner:after { content: ''; display: block; height: 100%; width: 100%; border-top: 2px solid #e4943f; border-right: 2px solid #e4943f; position: absolute; right: 0; top: 0; transition: 0.3s ease; } a.btn-hover-corner:hover:before, a.btn-hover-corner:hover:after { width: 1rem; height: 1rem; } ----- a.btn-hover-corner2 { display: inline-block; text-decoration: none; color: #39ab53; font-weight: bold; font-size: 14px; position: relative; padding: 0.5rem 2.5rem; overflow: hidden; transition: 0.3s ease; margin-bottom: 0px; font-family: 'Poppins', sans-serif; } a.btn-hover-corner2:before { content: ''; display: block; height: 100%; width: 100%; border-bottom: 2px solid #228f3b; border-left: 2px solid #228f3b; position: absolute; left: 0; bottom: 0; transition: 0.3s ease; } a.btn-hover-corner2:after { content: ''; display: block; height: 100%; width: 100%; border-top: 2px solid #39ab53; border-right: 2px solid #39ab53; position: absolute; right: 0; top: 0; transition: 0.3s ease; } a.btn-hover-corner2:hover:before, a.btn-hover-corner2:hover:after { width: 1rem; height: 1rem; } hr.section-divider{ margin: 2rem auto 2rem; border-top: 1px solid rgba(221, 221, 221, 0.9); } .ab-icon{ width: 60px; float: left; margin-right: 10px; margin-bottom: 0px; } .ab-icon img{ width: 100% } .ab-caption h4{ font-weight: 600; } .ab-caption p{ font-size: 13px; margin-top: -5px; line-height: 1.5; } .pop-parallax{ background-image: url("https://via.placeholder.com//1920x1080"); height: 400px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .pop-parallax:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom right, #e4943f, #000); opacity: .4; } .box-layers{ margin-top: -250px; box-shadow: 0 0 10px rgba(204,204,204,0.6); -moz-box-shadow: 0 0 10px rgba(204,204,204,0.6); -webkit-box-shadow: 0 0 10px rgba(204,204,204,0.6); -o-box-shadow: 0 0 10px rgba(204,204,204,0.6); } .left-layer, .right-layer{ padding: 0px; } .left-layer{ background-color: #FFF; } .ws-content-alt{ margin: 0; padding: 2rem; z-index: 1; position: relative; } .panel-title{ margin-bottom: 20px; border-left: solid 4px #e4943f; } .ws-content-alt .panel-title h5{ margin-left: 15px; margin-bottom: 5px; color: #262626; } .ws-content-alt .panel-title h2{ margin-left: 15px; color: #262626; } .ws-content-alt .ab-contact{ margin-top: 1rem; } .r-layer-bg-color{ background-image: url("https://via.placeholder.com//992x661"); height: 400px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; overflow: hidden; } .vertical { -moz-transform: rotate(-90deg) translateY(0.5em); -ms-transform: rotate(-90deg) translateY(0.5em); -webkit-transform: rotate(-90deg) translateY(0.5em); transform: rotate(-90deg) translateY(0.5em); display: inline-block; font-weight: bold; line-height: 0; margin: 0 0 1em; text-transform: uppercase; white-space: nowrap; background-color: #e4943f; height: 50px; position: absolute; bottom: 5rem; right: -83px; padding: 15px; } .vertical:after { content: ''; display: block; padding-top: 100%; } .l-layer-bg-color{ background: #46866C; width: 100%; margin-top: 70px; padding: 3rem 2rem; overflow: hidden; } .tc-left{ float: left; } .tc-avatar{ width: 100px; height: 100px; margin: auto; } .tc-avatar img{ width: 100%; border-radius: 50%; border: solid 2px #FFF; } .tc-caption{ text-align: center; margin-top: 15px; } .tc-caption h4{ margin-bottom: 0px; font-weight: 600; } .tc-caption p{ color: #FFF; font-size: 13px; } .rating{ display: flex; justify-content: center; list-style: none; margin-top: 10px; } .rating li{ padding: 2px; font-size: 16px; color: #e4943f; } .rating .fas{ display: flex; justify-content: center; list-style: none; } .tc-comment{ width: 60%; background: rgba(0, 0, 0, 0.2); margin-left: 6rem; padding: 1.3rem; position: relative; } .tc-comment p{ color: #FFF; font-size: 16px; margin-bottom: 0px; line-height: 1.9; font-style: italic; font-weight: 500; } .quote-icon{ width: 60px; position: absolute; bottom: 1.5rem; right: 1.5rem; opacity: 0.2; } .quote-icon img{ width: 100%; } .clients-bar{ height: 300px; margin-top: -150px; margin-bottom: 1rem; padding-top: 3.5rem; overflow: hidden; } .clients-logo{ margin: 0px 20px; } .clients-logo img{ width: 100%; } /*==================================================== 12. PROJECTS. ====================================================*/ .sidebar-list .list-group-item { position: relative; display: block; padding: 20px 13px; margin-bottom: -1px; background-color: #F5F5F5; border: none; border-radius: 0px; margin-bottom: 5px; border-left: solid 6px #e4943f; transition: 0.3s ease; cursor: pointer; color: #333; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 15px; } .sidebar-list .list-group-item .badge { display: inline-block; padding: 0.25em 0.4em; font-size: 75%; font-weight: 400; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; color: #333; transition: 0.3s ease; } .sidebar-list .list-group-item:hover{ color: #FFF; } .sidebar-list .list-group-item:hover .badge { color: #FFF; } .sidebar-list .list-group-item:hover{ background-color: #002642; } .brochures{ margin-top: 1rem; } .brochures p{ font-size: 14px; line-height: 1.6; } .brochures-files .list-group-item { position: relative; display: block; padding: 20px; margin-bottom: -1px; background-color: #F5F5F5; border: none; border-radius: 0px; margin-bottom: 5px; transition: 0.3s ease; cursor: pointer; text-align: left; color: #333; font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 15px; } .brochures-files .list-group-item:hover { background-color: #002642; color: #FFF; } .brochures-files{ margin-top: 1rem; } .brochures-files .list-group-item .fas{ margin-right: 15px; color: #e4943f; transition: 0.3s ease; } .brochures-files .list-group-item:hover .fas{ margin-right: 15px; color: #FFF; } /*==================================================== 13. LAND PRESERVATION. ====================================================*/ .s-main-pic img{ width: 100%; } .service-content h2{ margin: 1.5rem 0rem 1rem; } .service-content p{ margin-bottom: 1rem; } .gb-thumb img{ width: 100%; } .sc-grid{ margin-top: 2rem; } .sc-caption h3{ font-weight: 700; } .accordion-section{ margin-top: 2rem; } .bullet-list p{ margin-bottom: 10px; color: #232323; } .bullet-list p::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00c"; margin-right: 10px; color: #e4943f; } /*==================================================== 14. FARM PLANS. ====================================================*/ .fp-main-pic img{ width: 100%; } .fp-content h2{ margin: 1.5rem 0rem 1rem; } .fp-content p{ margin-bottom: 1rem; } .bg-layers{ margin-top: 2rem; } .bg-layers-caption p.strong{ font-weight: 500; color: #333; font-style: italic; margin-bottom: 15px; } .bg-thumb img{ width: 100%; } .bg-layers-caption h3{ font-weight: 700; } .check-list p{ margin-bottom: 10px; color: #232323; } .check-list p::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f14a"; margin-right: 10px; color: #e4943f; } /*==================================================== 15. FARM TRUCK. ====================================================*/ .ei-main-pic img{ width: 100%; } .ei-content h2{ margin: 1.5rem 0rem 1rem; } .ei-content h3{ font-weight: 600; margin-top: 1.5rem; } .ei-content p{ margin-bottom: 1rem; } .span-opcions{ margin-top: 2rem; } .so-thumb img{ width: 100%; } .checklist-side{ padding: 15px 0px; } .checklist-side p{ margin-bottom: 10px; color: #232323; } .checklist-side p::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f560"; margin-right: 10px; color: #e4943f; } .span-accordion{ margin-top: 2rem; } .span-accordion .accordion { border-top: 1px solid #FFF; background: #F7FAFA; padding: 0px 20px; } .span-accordion .accordion li { border-bottom: 2px solid #fff; position: relative; list-style-type:none; } .accordion li p { display: none; padding: 10px 20px 20px; color: #516163; font-size: 14px; font-family: 'Poppins', sans-serif; } .span-accordion .accordion a { width: 100%; font-family: 'Poppins', sans-serif; display: block; cursor: pointer; font-weight: 500; line-height: 3; font-size: 16px; user-select: none; } .accordion li a.active{ color: #e4943f; } .accordion a.hover{ color: #e4943f; } .span-accordion .accordion a:after { width: 8px; height: 8px; border-right: 2px solid #e4943f; border-bottom: 2px solid #e4943f; position: absolute; right: 5px; content: " "; top: 20px; transform: rotate(-45deg); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .span-accordion a.active:after { transform: rotate(45deg); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border-right: 1px solid #e4943f; border-bottom: 1px solid #e4943f; } .span-accordion .accordion .last-item{ border-bottom: 1px solid #F7FAFA; padding-bottom: 5px; } /*==================================================== 16. FARM INSPECTION. ====================================================*/ .fi-main-pic img{ width: 100%; } .fi-content h2{ margin: 1.5rem 0rem 1rem; } .fi-content p{ margin-bottom: 1rem; } /*==================================================== 17. SOIL ANALYSIS. ====================================================*/ .sa-main-pic img{ width: 100%; } .san-content h2{ margin: 1.5rem 0rem 1rem; } .san-content p{ margin-bottom: 1rem; } .san-content strong{ font-weight: 600; color: #333; } .tab-content{ margin-top: 2rem; } .tabs-bar{ width: 100%; list-style: none; display: block; padding-left: 0px; } .tabs-bar .tab{ font-family: 'Poppins', sans-serif; font-size: 17px; font-weight: 500; display: inline-block; cursor: pointer; margin: 0px; margin-bottom: -1px; padding: 10px; border: solid 1px #F5F5F5; } .tab-active{ border: 1px solid #F5F5F5; background-color: #F5F5F5; } .content-hidden{ display: none; } .content-container h3{ font-weight: 600; } .content-container p.strong{ font-weight: 600; margin-bottom: 10px; line-height: 1.7; font-style: italic; } .content-active{ display: block; } .tab-thumb{ max-width: 350px; float: left; margin-right: 20px; } .tab-thumb img{ width: 100%; } .tab-caption p{ margin-bottom: 10px; } .tab-checklist p{ margin-bottom: 7px; color: #232323; } .tab-checklist p::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f14a"; margin-right: 10px; color: #e4943f; } .tc-thumb-2{ max-width: 350px; float: left; margin-right: 20px; } .tc-thumb-2 img{ max-width: 100%; } /*==================================================== 18. BLOG GRID. ====================================================*/ .blog-grid{ margin-bottom: 2rem; } .bg-preview-pic img{ width: 100%; } .bg-caption{ background-color: #FFF; position: relative; margin: -50px 8px 0px; } .bg-caption .caption-content{ padding: 15px; } .caption-content h3{ line-height: 1.3; font-weight: 600; font-size: 0.85rem; } .post-author-avatar{ width: 30px; height: 30px; } .post-author-avatar img{ width: 100%; border-radius: 50%; } .post-details ul li{ display: inline-block; font-size: 14px; font-family: 'Poppins', sans-serif; font-weight: 400; color: #797979; } .post-details ul li a { color: #797979; text-decoration: none; transition: 0.3s; } .post-details ul li a:hover { color: #FFBE0B; text-decoration: none; } .post-details ul li.date{ padding: 0px 10px; border-left: none; margin: 0px 5px; } .post-details ul li.date::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f073"; margin-right: 8px; } .post-details ul li.comments::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f075"; margin-right: 8px; } .post-details ul li a:hover { color: #FFBE0B; text-decoration: none; } .caption-content h5{ text-transform: none; color: #333; font-size: 16px; } .caption-content h5::after { font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 14px; content: "\f054"; margin-left: 10px; } .caption-content h5 a { color: #333; text-decoration: none; transition: 0.3s; } .caption-content h5 a:hover { color: #FFBE0B; text-decoration: none; } .caption-content h3 a { color: #333; text-decoration: none; transition: 0.3s; } .caption-content h3 a:hover { color: #FFBE0B; text-decoration: none; } .site-pagination .pagination { display: -ms-flexbox; display: flex; padding-left: 0; list-style: none; border-radius: 0rem; justify-content: center; } .site-pagination .page-link { position: relative; display: block; padding: 0.3rem 0.75rem; margin-left: -1px; line-height: 1.25; color: #333; background-color: #fff; border: none; font-family: 'Poppins', sans-serif; font-size: 18px; font-weight: 500; } .site-pagination .page-link:hover { z-index: 2; color: #e4943f; text-decoration: none; background-color: #F7FAFA; border-color: #F7FAFA; } .site-pagination .page-link:focus { z-index: 2; outline: 0; box-shadow: none; } .page-link .fas{ font-size: 18px; } .site-pagination .page-item.active .page-link { z-index: 1; color: #fff; background-color: #e4943f; border-color: #e4943f; } /*==================================================== 19. BLOG SIDEBAR. ====================================================*/ .blog-search{ display: inline-block; position: relative; color: #FFF; margin-bottom: 2rem; width: 100%; } .blog-search .form-control { background-color: #eff5f5; border: none; border-radius: 0px; padding-top: 2px; padding-bottom: 2px; font-size: 14px; height: 45px; font-family: 'Poppins', sans-serif; color: #CCC; transition: 0.3s; } .blog-search .form-control:focus { color: #CCC; background-color: #e0ebeb; border-color: none; outline: 0; box-shadow: none; } .blog-search .form-control-feedback { position: absolute; z-index: 2; display: block; width: 2rem; height: 45px; line-height: 45px; text-align: center; pointer-events: none; color: #CCC; right: 0; font-size: 16px; } .aside-list-group{ margin-bottom: 1.5rem; } .aside-list-group h4{ margin-bottom: 1rem; } .aside-list-group .list-group-item { position: relative; display: block; padding: 0.50rem 0rem; margin-bottom: -1px; background-color: #fff; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; color: #516163; } .aside-list-group .list-group-item .badge { display: inline-block; padding: 5px 10px; font-size: 100%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 5px; float: right; font-family: 'Poppins', sans-serif; background: #002642; color: #FFF; font-weight: 400; } .aside-list-group .list-group-item a { color: #516163; text-decoration: none; transition: 0.6s; } .aside-list-group .list-group-item a:hover { color: #e4943f; text-decoration: none; } .aside-related-posts h4{ margin-bottom: 1rem; } .aside-related-posts .media{ margin-bottom: 10px; } .mr-3{ width: 90px; height: 90px; } .mr-3 img{ width: 100%; } h5.mt-0{ text-transform: none; color: #333; line-height: 1.3; margin-bottom: 0px; font-size: 16px; } h5.mt-0 a { color: #333; text-decoration: none; transition: 0.3s; } h5.mt-0 a:hover { color: #e4943f; text-decoration: none; } .media-body p{ font-size: 14px; } .aside-tags{ margin-top: 1.6rem; } .aside-tags h4{ margin-bottom: 1rem; } .aside-tags .btn-tags { color: #516163; transition: 0.6s; padding: 0.2rem 0.7875rem; font-size: 14px; background: #f0f5f5; border-radius: 0px; text-transform: none; font-weight: 400; } .aside-tags .btn-tags:hover { color: #FFF; background-color: #002642; } .aside-tags .btn-tags:focus, .btn-tags.focus { box-shadow: none; } .aside-tags .btn-tags.disabled, .btn-tags:disabled { color: #fff; background-color: #002642; border-color: #002642; } /*==================================================== 20. BLOG LEFTSIDEBAR. ====================================================*/ .side-posts-left{ padding-left: 2rem; } .side-posts-left .post-details ul li.date{ border-right: none; } .side-posts-left .bg-caption .caption-content{ padding: 25px; } /*==================================================== 21. BLOG RIGHTSIDEBAR. ====================================================*/ .side-posts-right{ padding-right: 2rem; } .side-posts-right .post-details ul li.date{ border-right: none; } .side-posts-right .bg-caption .caption-content{ padding: 25px; } /*==================================================== 22. BLOG SINGLE. ====================================================*/ .bg-post-img img{ width: 100%; } .blog-content h2{ font-size: 1rem; margin: 1.5rem 0rem 15px; } .blog-content h3{ margin: 2rem 0rem 15px; } .blog-content p{ margin-bottom: 1rem; } .ludwig { position: relative; padding-left: 1em; border-left: 0.2em solid #e4943f; font-family: 'Poppins', sans-serif; font-size: 1rem; line-height: 1.5rem; font-weight: 100; } .ludwig:before, .ludwig:after { content: '\201C'; font-family: 'Sanchez'; color: #e4943f; } .ludwig:after { content: '\201D'; } .comment-block .btn-reply { color: #FFF; transition: 0.9s; padding: 4px 10px; font-size: 0.60rem; background: #e4943f; border: solid 2px #e4943f; font-size: 13px; border-radius: 0px; position: absolute; right: 0; } .comment-block .btn-reply:hover { color: #FFF; background: #46866C; border: solid 2px #46866C; } .comment-block .btn-reply:focus, .btn-reply.focus { box-shadow: none; } .comment-block .btn-reply.disabled, .btn-reply:disabled { color: #fff; background-color: #46866C; border-color: #46866C; } .comment-block .btn-reply:not(:disabled):not(.disabled):active, .btn-reply:not(:disabled):not(.disabled).active, .show > .btn-reply.dropdown-toggle { color: #fff; background-color: none; border-color: none; } .comment-block .btn-reply:not(:disabled):not(.disabled):active:focus, .btn-reply:not(:disabled):not(.disabled).active:focus, .show > .btn-reply.dropdown-toggle:focus { box-shadow: none; } .side-posts-right .btn-comment { color: #FFF; transition: 0.9s; padding: 4px 10px; font-size: 0.60rem; background: #e4943f; border: solid 2px #e4943f; font-size: 13px; border-radius: 0px; margin-top: 1rem; } .side-posts-right .btn-comment:hover { color: #FFF; background: #46866C; border: solid 2px #46866C; } .side-posts-right .btn-comment:focus, .btn-reply.focus { box-shadow: none; } .side-posts-right .btn-comment.disabled, .btn-reply:disabled { color: #fff; background-color: #46866C; border-color: #46866C; } .side-posts-right .btn-comment:not(:disabled):not(.disabled):active, .btn-reply:not(:disabled):not(.disabled).active, .show > .btn-reply.dropdown-toggle { color: #fff; background-color: none; border-color: none; } .side-posts-right .btn-comment:not(:disabled):not(.disabled):active:focus, .btn-reply:not(:disabled):not(.disabled).active:focus, .show > .btn-reply.dropdown-toggle:focus { box-shadow: none; } .comment-tittle{ margin-top: 2rem; } .comment-block{ clear: both; position: relative; } h3.comment-tittle{ margin-bottom: 2rem; font-weight: 600; } .form-title{ margin: 2rem 0rem; clear: both; } .form-title h3{ font-weight: 600; } .user-avatar{ width: 70px; height: 70px; float: left; margin-right: 20px; margin-bottom: 80px; } .user-avatar img{ width: 100%; border-radius: 50%; } .cb-caption h4{ font-size: 17px; } .cb-caption h6{ font-size: 14px; text-transform: none; font-weight: 400; color: #46866C; margin-bottom: 10px; } .cb-caption p{ line-height: 1.7; } .reply-comment{ margin-left: 2rem; } .customize { display: block; width: 100%; height: calc(2.25rem + 2px); padding: 0.375rem 0.75rem; font-size: 15px; font-family: 'Poppins', sans-serif; font-weight: 400; line-height: 1.5; color: #495057; background-color: #F7FAFA; background-clip: padding-box; border: none; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; margin: 5px 0px; transition: 0.6s; } .customize::-ms-expand { background-color: transparent; border: 0; } .customize:focus { color: #495057; background-color: #eff5f5; border-color: none; outline: 0; box-shadow: none; } /*==================================================== 23. CONTACT US ONE. ====================================================*/ .bottom-map{ line-height: 0; } .custom-margin{ margin-top: 0rem; } .map-iframe-alt{ width: 100%; height: 500px; } .contact-info-right{ padding: 1.5rem; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; } .contact-info-right h3{ font-size: 1.1rem; font-weight: 600; } .contact-info-right p{ line-height: 1.6; } hr.contact-divider{ margin: 1rem auto 1rem; border-top: 1px solid rgba(53, 65, 75, 0.1); } .box-contact{ margin-bottom: 10px; } .bc-icon{ float: left; margin-right: 25px; } .bc-icon .fas{ color: #e4943f; } .bc-caption{ width: 90%; padding: 2px 0px; } .bc-caption p{ color: #333; } .customize-contact-alt { display: block; width: 100%; height: calc(2.25rem + 2px); padding: 0.375rem 0rem; font-size: 14px; font-family: 'Poppins', sans-serif; font-weight: 400; line-height: 1.5; color: #495057; background-color: #FFF; background-clip: padding-box; border: none; border-bottom: solid #DDD 1px; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; margin: 3px 0px; transition: 0.6s; border-radius: 0px; } .customize-contact-alt::-ms-expand { background-color: transparent; border: 0; } .customize-contact-alt:focus { color: #495057; background-color: #FFF; border-color: none; outline: 0; box-shadow: none; border-bottom: solid #eec445 2px; } /*==================================================== 24. CONTACT US TWO. ====================================================*/ .contact-info{ padding-right: 1rem; } .contact-info h2:after{ background-color: #e4943f; content: ''; display: block; height: 5px; margin: 15px 0px; width: 80px; } .contact-info p{ margin-bottom: 1rem; } .customize-contact { display: block; width: 100%; height: calc(2.25rem + 2px); padding: 0.375rem 0rem; font-size: 14px; font-family: 'Poppins', sans-serif; font-weight: 400; line-height: 1.5; color: #495057; background-color: #FFF; background-clip: padding-box; border: none; border-bottom: solid #DDD 1px; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; margin: 3px 0px; transition: 0.6s; border-radius: 0px; } .customize-contact::-ms-expand { background-color: transparent; border: 0; } .customize-contact:focus { color: #495057; background-color: #FFF; border-color: none; outline: 0; box-shadow: none; border-bottom: solid #e4943f 2px; } .map-iframe{ width: 100%; height: 500px; border: none; margin: 0px; } .contact-box{ padding: 1.5rem; background-color: #F7FAFA; text-align: center; } .contact-box .phone-icon .fas{ font-size: 1.5rem; color: #e4943f; } .contact-box h3{ margin: 15px 0px 10px; } /*==================================================== 27. 404 ERROR PAGE. ====================================================*/ .error-page-bg{ background-image: url("https://via.placeholder.com//1920x1080"); height: 800px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .error-page-container{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: -1; } .ep-content h1{ color: #FFF; font-size: 3rem; } .ep-content h5{ color: #FFF; font-size: 20px; } .ep-content p{ color: #FFF; } /*==================================================== 28. FAQ. ====================================================*/ .accordion-title{ margin-bottom: 1.5rem; } .accordion { border-top: 1px solid #d9e5e8; } .accordion li { border-bottom: 1px solid #d9e5e8; position: relative; list-style-type:none; } .accordion li p { display: none; padding: 10px 20px 20px; color: #516163; font-size: 14px; font-family: 'Poppins', sans-serif; } .accordion a { width: 100%; font-family: 'Poppins', sans-serif; display: block; cursor: pointer; font-weight: 500; line-height: 3; font-size: 17px; user-select: none; } .accordion li a.active{ color: #e4943f; } .accordion a.hover{ color: #e4943f; } .accordion a:after { width: 8px; height: 8px; border-right: 1px solid #e4943f; border-bottom: 1px solid #e4943f; position: absolute; right: 5px; content: " "; top: 20px; transform: rotate(-45deg); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } a.active:after { transform: rotate(45deg); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border-right: 1px solid #002642; border-bottom: 1px solid #002642; } .content-box{ background-color: #F6F6F6; height: 100%; padding: 40px 10px; text-align: center; transition: 0.3s; } .content-box p{ font-size: 14px; line-height: 1.1; margin-bottom: 15px; } .content-box .icon-circle{ width: 70px; height: 70px; background: #002642; border-radius: 50%; position: relative; margin: auto auto 20px; transition: 0.3s; } .content-box:hover .icon-circle{ background: #e4943f; } .content-box .icon-circle .fas{ font-size: 35px; line-height: 70px; background: transparent; color: #FFF; width: 70px; height: 70px; text-align: center; vertical-align: bottom; } .content-box h3{ margin-bottom: 20px; } .middle-box{ border-left: solid 2px #FFF; border-right: solid 2px #FFF; } .content-box h5{ font-size: 17px; line-height: 1.7; margin-top: 15px; text-transform: none; margin-bottom: 0px; } .content-box a { text-decoration: none; position: relative; color: #e4943f; transition: 0.3s; } .content-box a:after { content: ''; width: 100%; position: absolute; left: 0; bottom: -2px; border-width: 0 0 2px; border-style: solid; } .content-box a:hover{ color: #002642; } .thumbnail-box{ background-color: #FFF; box-shadow: 0 0 10px rgba(204,204,204,0.6); -moz-box-shadow: 0 0 10px rgba(204,204,204,0.6); -webkit-box-shadow: 0 0 10px rgba(204,204,204,0.6); -o-box-shadow: 0 0 10px rgba(204,204,204,0.6); cursor: pointer; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; margin: 0px 15px 15px; } .tb-image img{ width: 100%; } .tb-caption{ background-color: #FFF; padding: 0rem 0.7rem 1rem; } .inner-caption{ background-color: #FFF; margin-top: -50px; position: relative; z-index: 1; padding: 0.80rem 0.80rem 0rem; } .inner-caption p{ font-size: 14px; line-height: 1.8; clear: both; margin-top: -5px; } .ic-top{ position: relative; margin-bottom: 20px; } .ic-top h3{ font-size: 18px; font-weight: 600; color: #002642; line-height: 1.4; -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .thumbnail-box:hover h3{ color: #262626; } .post-date{ width: 50px; height: 50px; background-color: #e4943f; text-align: center; padding: 15px 10px; float: left; margin-right: 10px; } .post-date p{ margin-bottom: 0px; line-height: 0.8; color: #FFF; font-size: 20px; font-weight: 500; text-align: center; } .post-date span{ font-weight: 400; font-size: 14px; } .image-hover .tb-image { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } .image-hover .tb-image:hover+span { bottom: -36px; opacity: 1; } .hover-effects .tb-image img { -webkit-transform: scale(1); transform: scale(1); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; } .hover-effects .tb-image:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } /*==================================================== 29. TESTIMONIALS. ====================================================*/ .owl-carousel .owl-wrapper:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel{display:none;position:relative;width:100%;-ms-touch-action:pan-y}.owl-carousel .owl-wrapper{display:none;position:relative;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%}.owl-carousel .owl-wrapper-outer.autoHeight{-webkit-transition:height 500ms ease-in-out;-moz-transition:height 500ms ease-in-out;-ms-transition:height 500ms ease-in-out;-o-transition:height 500ms ease-in-out;transition:height 500ms ease-in-out}.owl-carousel .owl-item{float:left}.owl-controls .owl-page,.owl-controls .owl-buttons div{cursor:pointer}.owl-controls{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)} .owl-carousel .owl-wrapper,.owl-carousel .owl-item{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)} .owl-theme .owl-controls{margin-top:-10px;text-align:center; z-index: 0; position: relative;}.owl-theme .owl-controls .owl-buttons div{color:#FFF;display:inline-block;zoom:1;*display:inline;margin:5px;padding:3px 10px;font-size:12px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;background:#869791;filter:Alpha(Opacity=50);opacity:.5}.owl-theme .owl-controls.clickable .owl-buttons div:hover{filter:Alpha(Opacity=100);opacity:1;text-decoration:none}.owl-theme .owl-controls .owl-page{display:inline-block;zoom:1;*display:inline}.owl-theme .owl-controls .owl-page span{display:block;width:12px;height:12px;margin:5px 7px;filter:Alpha(Opacity=50);opacity:.5;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;background:#869791}.owl-theme .owl-controls .owl-page.active span,.owl-theme .owl-controls.clickable .owl-page:hover span{filter:Alpha(Opacity=100);opacity:1}.owl-theme .owl-controls .owl-page span.owl-numbers{height:auto;width:auto;color:#FFF;padding:2px 10px;font-size:12px;-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px}.owl-item.loading{min-height:150px;background:url(AjaxLoader.gif) no-repeat center center} .owl-theme .owl-controls .owl-page span{ height:12px !important; width: 12px !important; background-color:#FFF !important; opacity: 0.8 ; border-radius: 50%; } .owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span{ background-color: #e4943f !important; } .agri-parallax{ background-image: url("https://via.placeholder.com//1920x1080"); height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; padding: 1rem 0rem; } .agri-parallax:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom right, #e4943f, #e4943f); opacity: 0.7; } .testimonial-side{ background-color: rgba(0, 0, 0, 0.8); padding: 1.5rem 0.80rem 1rem; border: none; margin: 0px; cursor: pointer; } .t-avatar{ width: 100px; height: 100px; margin: auto; } .t-avatar img{ width: 100%; border-radius: 50%; border: solid 2px #FFF; } .author-details{ text-align: center; margin: 1rem 0rem; } .author-details h3{ color: #FFF; margin-bottom: 5px; } .author-details h5{ text-transform: none; font-size: 14px; } .rating{ display: flex; justify-content: center; list-style: none; } .rating li{ padding: 2px; font-size: 16px; color: #e4943f; } .rating .fas{ display: flex; justify-content: center; list-style: none; } .author-testimonial{ padding: 0rem 1rem; } .author-testimonial p{ font-size: 16px; margin-bottom: 0px; line-height: 1.8; font-style: italic; font-weight: 500; } .about-side { padding-left: 1rem; } .about-side h2{ color: #FFF; } .about-side h2:after { background: #46866C; content: ''; display: block; height: 4px; margin: 15px 0px; width: 80px; } .about-side h5{ color: #46866c; } .about-side p{ color: #FFF; } .bullets{ list-style: none; font-family: 'Poppins', sans-serif; font-size: 16px; margin: 1rem 0rem; } .bullets li{ line-height: 2; color: #FFF; font-weight: 500; } .bullets li::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00c"; margin-right: 15px; } .signature{ width: 140px; } .signature img{ width: 100%; } .t-content .owl-controls .owl-page span{ display: none; } .t-content .owl-theme .owl-controls{margin-top:-50px;text-align:center; z-index: 0; position: relative; margin-right: -6rem;} /*==================================================== 30. GALLERY FILTER. ====================================================*/ * {-webkit-transform-origin:center!important;transform-origin:center!important;} .filter-container{ width:100%; margin:0 auto; text-align: center; } .filter { padding: 0; list-style: none; } .filter li { font-size: 15px; font-family: 'Poppins', sans-serif; display: inline-block; text-transform: uppercase; cursor: pointer; line-height: 2; padding: 0 10px; position: relative; color: #797979; font-weight: 500; } .filter li.active{ color: #e4943f; } #kehl-grid{ position:relative; text-align:center; margin:0 auto; padding:0; width:100%; /* max-width:1920px; */ } #kehl-grid:after { content: ''; display: block; clear: both; } .grid-box { position:relative; float:left; display:inline-block; overflow: hidden; width:calc(100% / 3); margin:0; padding: 5px; /* box-sizing: border-box; -webkit-transform: translate3d(1px,0,0); transform: translate3d(1px,0,0); */ clear: both; } #kehl-grid h3{ color:#262626; font-family: 'Open Sans', sans-serif; font-weight:800; font-size: 15px; line-height:25px; letter-spacing:4px; text-transform: uppercase; } #kehl-grid p{ color:#333; z-index:4; font-size:12px; letter-spacing:3px; font-family: 'Playfair Display', serif; font-weight:400; } /* clear fix */ .grid:after { content: ''; display: block; clear: both; } /* ---- .grid-item ---- */ .grid-sizer, .grid-box { width: 33.333%; } .grid-box { float: left; } .grid-box img { display: block; width: 100%; } .grid-box .image-mask{ position:absolute; width:100%; height:100%; top:0; left:0; background:rgba(256,256,256,0); z-index:2; transition: all 300ms linear; } .grid-box:hover .image-mask{ background:rgba(256,256,256,.8); } .grid-box h3{ position:absolute; width:100%; bottom:30%; left:0; margin-bottom:-16px; line-height:26px; text-align:center; z-index:4; opacity:0; transition: all 300ms linear; } .grid-box:hover h3{ bottom:50%; opacity:1; } .grid-box p{ position:absolute; top:15px; left:25px; opacity:0; font-style: italic; line-height:18px; transition: all 300ms linear; } .grid-box:hover p{ top:60px; left:25px; opacity:0; } /*==================================================== 31. MAGNIFIC POPUP. ====================================================*/ .magnific-img { width: 100%; height: 100%; } .magnific-img img { width: 100%; height: 100%; border-radius: 0px; } .mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg { opacity: 0; -webkit-backface-visibility: hidden; /* ideally, transition speed should match zoom duration */ -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .mfp-with-zoom.mfp-ready .mfp-container { opacity: 1; } .mfp-with-zoom.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-with-zoom.mfp-removing .mfp-container, .mfp-with-zoom.mfp-removing.mfp-bg { opacity: 0; } .mfp-arrow-left:before { border-right: none !important; } .mfp-arrow-right:before { border-left: none !important; } button.mfp-arrow, .mfp-counter { opacity: 0 !important; transition: opacity 200ms ease-in, opacity 2000ms ease-out; } .mfp-container:hover button.mfp-arrow, .mfp-container:hover .mfp-counter{ opacity: 1 !important; } /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.9; } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; } .mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: 'Poppins', sans-serif; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 14px; line-height: 18px; white-space: nowrap; font-family: 'Poppins', sans-serif; font-weight: 500; } .mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:active { margin-top: -54px; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; } .mfp-arrow:before, .mfp-arrow:after { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; } .mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; } .mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; } .mfp-arrow-left { left: 0; } .mfp-arrow-left:after { border-right: 17px solid #FFF; margin-left: 31px; } .mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; } .mfp-arrow-right { right: 0; } .mfp-arrow-right:after { border-left: 17px solid #FFF; margin-left: 39px; } .mfp-arrow-right:before { border-left: 27px solid #3F3F3F; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } .magnific-img .image-popup-vertical-fit img a:link { text-decoration: none; border: solid 2px #000; } .magnific-img .image-popup-vertical-fit img a:visited { text-decoration: none; border: solid 2px #000; } .magnific-img .image-popup-vertical-fit img a:hover { text-decoration: none; border: solid 2px #000; } .magnific-img .image-popup-vertical-fit img a:active { text-decoration: none; color: #000; border: solid 2px #000; } .mfp-figure button.mfp-close { cursor: pointer; } .popup-gallery a { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .mfp-figure figure { cursor: -webkit-zoom-out; cursor: -moz-zoom-out; cursor: zoom-out; } /*==================================================== 32. YOUTUBE POPUP. ====================================================*/ .popup-youtube .video-image { position: relative; display: inline-block; } .popup-youtube .video-image img{ width: 100% } .popup-youtube .video-image:before { content: ""; position: absolute; width: 100%; height: 100%; z-index: 10; background: transparent url(../img/master/play-button.png) center center no-repeat; } .popup-youtube .video-image img a:link { text-decoration: none; color: #FFF; } .popup-youtube .video-image img a:visited { text-decoration: none; color: #FFF; } .popup-youtube .video-image img a:hover { text-decoration: none; color: #FFF; } .popup-youtube .video-image img a:active { text-decoration: none; color: #FFF; } /*==================================================== 33. MODAL POPUP. ====================================================*/ .modal-box{ text-align: center; } .modal-box p{ margin: 15px 0px 15px 0px; } .modal-sm .modal-content{ background: #FFF; border: 1px solid #ddd; border: 1px solid rgba(0, 0, 0, .2); -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5); box-shadow: 0 3px 9px rgba(0, 0, 0, .5); padding: 10px 20px 10px 20px; } .close{ color: #000; } @media (min-width: 992px) { .modal-md { width: 600px; } } /*==================================================== 34. PULSE BUTTON EFFECTS. ====================================================*/ .pulse-button { width: 60px; height: 60px; border: none; box-shadow: 0 0 0 0 rgba(255, 166, 0, 0.7); border-radius: 50%; cursor: pointer; -webkit-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); -moz-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); -ms-animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1); background: transparent url(../img/master/play-arrow.png) center center no-repeat; background-color: #e4943f; position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } .pulse-button:hover { -webkit-animation: none;-moz-animation: none;-ms-animation: none;animation: none; } @-webkit-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}} @-moz-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}} @-ms-keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}} @keyframes pulse {to {box-shadow: 0 0 0 45px rgba(232, 76, 61, 0);}} .organic-pulsing-video .popup-youtube .video-image:before { content: ""; position: absolute; width: 100%; height: 100%; z-index: 10; background: none; } .youtube-popup{ position: relative; } .video-image img{ width: 100% } /*==================================================== 35. SCROLLING TOP. ====================================================*/ @media only screen and (min-width: 1024px) { /* main p { font-size: 20px; font-size: 1.25rem; }*/ } .cd-top { display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 40px; left: 40px; overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(228, 148, 63) url(../img/master/cd-top-arrow.svg) no-repeat center 50%; visibility: hidden; border-radius: 50%; z-index: 4; } .cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; } .cd-top.cd-is-visible { /* the button becomes visible */ visibility: visible; opacity: 1; } .cd-top.cd-fade-out { /* if the user keeps scrolling down, the button is out of focus and becomes less visible */ opacity: .5; } .no-touch .cd-top:hover { background-color: #e4943f; } @media only screen and (min-width: 768px) { .cd-top { right: 20px; bottom: 20px; } } @media only screen and (min-width: 1024px) { .cd-top { height: 60px; width: 60px; right: 30px; bottom: 30px; } } /*==================================================== 36. HOME DEFAULT. ====================================================*/ .ws-left{ background-image: url("https://via.placeholder.com//1920x1080"); height: 600px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1; } .ws-left, .ws-right-alt{ padding: 0px; } .contact-form-right{ max-width: 600px; background: #F7FAFA; padding: 2.5rem 2rem 3.2rem; } .counter-bar{ height: 320px; margin-top: -130px; padding-top: 3.2rem; z-index: 0; position: relative; background-image: url("https://via.placeholder.com//1920x480"); } .counter-bar:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom right, #e4943f, #e4943f); opacity: 0.6; } .counter-bar-alt{ height: 320px; margin-top: -160px; padding-top: 3.2rem; z-index: 0; position: relative; background-image: url(".https://via.placeholder.com//1920x480"); } .counter-bar-alt:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom right, #e4943f, #e4943f); opacity: 0.6; } .counter-box{ background-color: rgba(238, 195, 68, 0.9); width: 100%; padding: 20px; } .counter-icon{ width: 60px; height: 60px; float: left; margin-right: 15px; } .counter-icon img{ width: 100%; } .counter{ margin-bottom: 0px; font-size: 1.5rem; font-family: 'Poppins', sans-serif; font-weight: 500; color: #FFF; } .counter-box p{ margin-top: -10px; margin-bottom: 0px; color: #FFF; } .customize-contact{ display: block; width: 100%; height: calc(2.25rem + 2px); padding: 0.375rem 0rem; font-size: 14px; font-family: 'Poppins', sans-serif; font-weight: 400; line-height: 1.5; color: #495057; background-color: #F7FAFA; background-clip: padding-box; border: none; border-bottom: solid #DDD 1px; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; margin: 3px 0px; transition: 0.6s; border-radius: 0px; } .customize-contact::-ms-expand { background-color: transparent; border: 0; } .customize-contact:focus { color: #495057; background-color: #F7FAFA; border-color: none; outline: 0; box-shadow: none; border-bottom: solid #eec445 2px; } .with-errors{ font-size: 12px; font-family: 'Poppins', sans-serif; text-align: left; } .alert-success { color: #FFF; background-color: #EF8354; border-color: #EF8354; font-family: 'Poppins', sans-serif; font-size: 15px; line-height: 1.5; } .close { float: right; margin-left: 5px; font-size: 1rem; font-weight: 700; line-height: 1; color: #FFF; text-shadow: none; opacity: 1; } .btn { display: inline-block; font-weight: 400; text-align: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .btn-contact { color: #e4943f; transition: 0.9s; padding: 0.3rem 1.125rem; font-size: 0.60rem; background: transparent; border: solid 2px #e4943f; width: 100%; margin-top: 15px; } .btn-contact:hover { color: #fff; background-color: #0069d9; border-color: #0062cc; } .btn-contact:focus, .btn-contact.focus { box-shadow: none; } .btn-contact.disabled, .btn-contact:disabled { color: #fff; background-color: #e4943f; border-color: #e4943f; } .btn-contact:not(:disabled):not(.disabled):active, .btn-contact:not(:disabled):not(.disabled).active, .show > .btn-contact.dropdown-toggle { color: #fff; background-color:#e4943f; border-color: #e4943f; } .btn-contact:not(:disabled):not(.disabled):active:focus, .btn-contact:not(:disabled):not(.disabled).active:focus, .show > .btn-contact.dropdown-toggle:focus { box-shadow: none; } .slider-title{ font-weight: 400; font-size: 60px; } .ha-leftside h5{ color: #e4943f; } .ha-leftside h1{ line-height: 1.3; } .ha-signature{ width: 180px; margin-top: 1rem;; } .ha-signature img{ width: 100%; } .ha-rightside strong{ font-weight: 600; color: #333; } .ha-banner{ margin-top: 2rem; background-color: #FFF; padding: 15px; border-radius: 5px; box-shadow: 0 0 10px rgba(204,204,204,0.6); -moz-box-shadow: 0 0 10px rgba(204,204,204,0.6); -webkit-box-shadow: 0 0 10px rgba(204,204,204,0.6); -o-box-shadow: 0 0 10px rgba(204,204,204,0.6); } .hab-inner{ display: inline-block; width: 250px; } .hab-inner-alter{ display: inline-block; width: 250px; } .hab-icon{ width: 40px; float: left; margin-right: 10px; } .hab-icon img{ width: 100%; } .ha-banner h4{ font-size: 18px; font-weight: 600; } .ha-banner p{ font-size: 14px; margin-top: -5px; } .circle-col { position: relative; width: 100%; color: #bbb; font-size: 16px; box-shadow: none !important; -webkit-transform: translateZ(0); transform: translateZ(0); } .circle-col *, .circle-col:before, .circle-col:after { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } .circle-col:before, .circle-col:after { -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; content: ''; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: -1; border: 2px solid #46866C; border-color: transparent #46866C; } .circle-col img { max-width: 100%; backface-visibility: hidden; vertical-align: top; border-radius: 50%; padding: 10px; } .circle-col figcaption { position: absolute; top: 5px; bottom: 5px; left: 5px; right: 5px; opacity: 0; background-color: rgba(70, 134, 108, 0.8); border-radius: 50%; } .circle-col i { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 4em; z-index: 1; } .circle-col a { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; } .circle-col:hover figcaption, .circle-col.hover figcaption { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } .circle-col:hover:before, .circle-col.hover:before, .circle-col:hover:after, .circle-col.hover:after { border-width: 10px; } .circle-col:hover:before, .circle-col.hover:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .circle-col:hover:after, .circle-col.hover:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .center-icon{ width: 100px; height: 100px; position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; padding: 10px; } .center-icon img{ width: 100%; } .ws-content-alt{ padding-right: 20%; } .ws-content-alt h5{ color: #FFF; } .ws-content-alt h2{ font-size: 1.5rem; color: #FFF; } .ws-content-alt p{ color: #FFF; } .ws-content-alt p.text-b{ color: #797979; } .ws-bullets{ margin-top: 1rem; } .ws-center{ margin: 1.5rem 0rem; } .ws-retangle{ width: 60px; height: 60px; border: solid 1px #e4943f; border-radius: 5px; float: left; margin-right: 15px; position: relative; } .wsr-icon{ width: 40px; height: 40px; position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } .wsr-icon img{ width: 100%; } .ws-bullets h4{ color: #FFF; font-size: 17px; text-transform: uppercase; } .ws-bullets p{ font-size: 13px; color: #e6e6e6; margin-top: -7px; line-height: 1.5; } /*==================================================== 37. HOME TWO. ====================================================*/ .thumbnail-card{ position: relative; cursor: pointer; } .card-img img{ width: 100%; } .overlay::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(transparent, #000); opacity: 0.01; transition: 0.5s; } .card-caption{ position: absolute; bottom: 20px; padding: 0rem 1rem; transition: 0.5s; } .thumbnail-card:hover .card-caption{ bottom: 80px; } .thumbnail-card:hover .card-img:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(transparent, #000); opacity: 0.4; } .card-caption h3{ font-size: 1.1rem; color: #333; } .card-caption p{ color: #333; line-height: 1.5; } .span-d-block{ margin-top: 1rem; } .span-d-block p{ font-size: 14px; font-weight: 600; } .span-d-block p::before { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f30b"; margin-right: 10px; font-size: 14px; } .span-about-img img{ width: 100%; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; } .span-about h2:after{ background-color: #e4943f; content: ''; display: block; height: 4px; margin: 15px 0px; width: 80px; } .span-about h5{ color: #e4943f; } hr.dotted{ border-bottom: 1px dotted rgba(255, 255, 255, 0.2); clear: both; } .alt-counter{ margin-top: 2rem; } .inner-counter{ text-align: center; } .inner-counter .counter{ font-weight: 600; margin-bottom: 0px; color: #333 !important; margin-top: -18px; } .inner-counter p{ margin-top: -10px; } .section-common-space { padding: 100px 0; } .section-header { margin-bottom: 60px; } .section-title { color: #1c1c1c; margin-bottom: 60px; } .section-title span { position: relative; } .section-title span:before { content: ""; position: absolute; bottom: -30px; right: 0; width: 100%; height: 1px; background-color: #1c1c1c; } .ft-wt-bold { font-weight: 700; } .section-subtitle { font-size: 17px; color: #666666; } .features-item { background-color: #fff; margin-bottom: 110px; padding: 90px 25px 35px; position: relative; -webkit-transition: .3s; transition: .3s; border-radius: 2px; } .features-info .title { text-transform: uppercase; } .features-item:hover { box-shadow: 0 40px 70px 0 rgba(0, 0, 0, 0.22); cursor: pointer; } .features-item:hover .features-icon { color: #e4943f; border-color: #e4943f; } .features-item:hover .features-info .title { color: #e4943f; border-color: #e4943f; } .features-icon { font-size: 36px; width: 96px; height: 96px; line-height: 96px; text-align: center; background: #fff; border-radius: 60px; border: 2px dashed #f0f0f0; box-shadow: 0 0 0 10px #fff; position: absolute; top: -50px; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); color: #bdbdbd; -webkit-transition: .3s; transition: .3s; } @media only screen and (max-width: 992px) { .clear-problem > div:nth-child(3n + 1) { clear: none; } } @media only screen and (max-width: 768px) { .section-common-space { padding: 50px 0; } h4 { font-size: 17px; } h2 { font-size: 21px; } .section-title { margin-bottom: 20px; } .section-title span:before { bottom: -10px; } } .clear-problem > div:nth-child(3n + 1) { clear: left; } .features-info .title { color: #1c1c1c; font-weight: 700; margin-bottom: 20px; } .home-v2{ margin-bottom: 4rem; } /*==================================================== 38. HOME THREE. ====================================================*/ .about-one { padding-top: 120px; padding-bottom: 175px; } .about-one__text { font-size: 14px; line-height: 26px; color: #777777; font-weight: 500; margin: 0; margin-bottom: 40px; } .about-one__image { position: relative; box-shadow: 0px 30px 50px 0px rgba(8, 13, 62, 0.15); } .about-one__image-title { margin: 0; color: #222222; font-size: 40px; background-color: #fff; mix-blend-mode: screen; font-weight: bold; line-height: 1em; padding-top: 30px; opacity: .95; } .about-one__image-text { margin: 0; text-transform: uppercase; color: #222222; font-size: 14px; background-color: #fff; mix-blend-mode: screen; font-weight: bold; line-height: 1em; padding-top: 10px; padding-bottom: 40px; opacity: .95; } .about-one__image-block { display: inline-block; position: relative; margin-right: 50px; } .about-one__image-block:after { content: ''; position: absolute; top: 50px; left: 50px; width: 100%; height: 100%; border-style: solid; border-width: 5px; border-color: #e4943f; z-index: 0; } .about-one__image-block:before { content: ''; position: absolute; bottom: 20px; left: 50px; width: 100%; height: 71%; background-color: #46866C; z-index: 1; } .about-one__image-block .inner { position: relative; z-index: 10; } .about-one__image-block .inner img{ width: 100%; } .about-one__image-content { position: absolute; bottom: 30px; right: 0; width: 100%; max-width: 240px; text-align: center; } .elements-container{ overflow: hidden; } .box-element { background: #44836A; padding: 8px 15px 15px; text-align:center; box-shadow: 0 19px 38px rgba(0,0,0,0.10), 0 15px 12px rgba(0,0,0,0.02); } .box-element .fas, .fab, .far { font-size: 45px; color: #fff; margin: 15px; } .box-element .far { font-size: 45px; color: #fff; margin: 15px; } .box-element p { font-size:14px; color:#fff;margin-bottom:0;} .box-element p span { display: block; } .box-element p a { color:#fff; } .footer-widgets { margin-top: 42px; } .footer-widget { padding-right:25px; } .footer-widgets .small-logo { margin:10px 0 15px; } .footer-widgets p { font-size:15px; color:#ccc;margin-bottom:0; } .footer-widgets h5 { font-size:18px; color:#fff;margin:12px 0 20px; padding:0; } .footer-widgets ul.posts { margin:0; padding:0; list-style: none; } .footer-widgets ul.posts li { padding:9px 0; border-bottom:1px solid #747474; font-size:15px; } .footer-widgets ul.posts li:first-child { padding-top:0; } .footer-widgets ul.posts li:last-child { border-bottom:0; } .footer-widgets ul.posts li a { color:#ccc; -webkit-transition: all 250ms ease-out 0s; transition: all 250ms ease-out 0s; } .footer-widgets ul.posts li a:hover { color:#fff; } .footer-widgets ul.posts li span { display:block;font-size:12px; margin-top:3px;color:#B9B9B8; } #mc_embed_signup { margin-top:15px;} #mc_embed_signup input[type="email"] { border-radius:5px; width:100%; padding:10px 15px; border:0; box-shadow: 0; } #mc_embed_signup input[type="submit"] { margin-top:5px; -webkit-transition: all 250ms ease-out 0s; transition: all 250ms ease-out 0s; border-radius:5px; width:100%; padding:10px 15px; border:0; box-shadow: 0; color:#fff; background:#28CB75; } #mc_embed_signup input[type="submit"]:hover { background:#808080; } .row.no-gutter [class*='col-']:not(:first-child), .row.no-gutter [class*='col-']:not(:last-child) { padding-left: 0; padding-right: 0; } .wide-grid{ margin-top: 5rem; } .grid-col{ height: 400px; background: #fff; } .grid-col-img{ background-image: url("../img/images/consulting.jpg"); height: 400px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .grid-col-img:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: linear-gradient(to bottom right, #000, #000); opacity: 0.2; } .grid-col h3{ font-size: 1rem; } .service-grid-2{ background-image: url("https://via.placeholder.com//992x661"); height: 400px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .service-grid-3{ background-image: url("https://via.placeholder.com//992x661"); height: 400px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .service-grid-4{ background-image: url("https://via.placeholder.com//992x661"); height: 400px; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; } .grid-col{ padding: 6% 2.5%; } .grid-col-img{ outline: 1px solid #FFF; outline-offset: -20px; } /*==================================================== 39. TEAM. ====================================================*/ .td-view{ margin-top: 2rem; } .slider-title{ letter-spacing: -5px; } /*Início código de Política de Privacidade*/ .box-cookies.hide { display: none !important; } .box-cookies { position: fixed; background: #e9e9e9; width: 60%; z-index: 998; bottom: 30px; left: 20%; box-shadow: 0 0 0px 0 rgba(0, 0, 0, .2); border-radius: 4px; align-self: normal; display: flex; align-items: center; text-align: center; justify-content: space-between; } .msg-cookies{ padding-top: 15px; padding-bottom: 0px; padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; margin-bottom: 15px; } .box-cookies .msg-cookies, .box-cookies .btn-cookies { align-items: center; text-align: center; color: #000; font-size: 12px; font-weight: 600; } .box-cookies .btn-cookies { background: #39ab53; cursor: pointer; padding-right: 20px; padding-left: 20px; padding-top: 20px; padding-bottom: 20px; color: #000; border-radius: 4px; align-self: normal; align-items: center; text-align: center; justify-content: space-between; } .box-font-color { font-size: 12px; color: #39ab53; font-weight: 500; } @media screen and (max-width: 600px) { .box-cookies { flex-direction: column; } } /*Final código de Política de Privacidade*/ /*Botão Whatsapp*/ .btn-whatsapp a { color:#fff; text-decoration:none; display:block; } .btn-whatsapp { position:fixed; right:25px; bottom:15px; transform: translate(-50%, -50%); background-color:rgb(37, 211, 102); width:60px; height:60px; text-align:center; line-height:58px; font-size:1.8em; color:#ffffff; font-weight:100; border-radius:50%; z-index: 9999; } .btn-whatsapp:before, .btn-whatsapp:after { content: ''; display:block; position: absolute; border-radius:50%; border:1px solid #25d366; left: -20px; right: -20px; bottom: -20px; top: -20px; animation: animate 1.5s linear infinite; opacity:0; backface-visibility:hidden; } .pulsaDelay:after { animation-delay: .5s; } /* Ficha técnica de cultivares - Informações da variedade / Resistência a pragas / Recomendação de Cultivo */ .resistencia-pragas-full { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid #e0ebeb; } .resistencia-title { color: #46866C; font-weight: 700; font-size: 1.3rem; margin-bottom: 1.2rem; } .resistencia-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 60px; } @media (max-width: 767px) { .resistencia-grid { grid-template-columns: 1fr; } } .resistencia-list { list-style: none; padding: 0; margin: 0; } .resistencia-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid #e0ebeb; } .resistencia-list li:last-child { border-bottom: none; } .praga-nome { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; color: #232323; } .praga-nome em { font-style: italic; font-weight: 400; color: #797979; font-size: 12px; } .praga-valor { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px; color: #46866C; flex-shrink: 0; } .resistencia-footnote { text-align: right; margin-top: 10px; } .resistencia-footnote p { font-size: 13px; color: #797979; margin-bottom: 0; } .resistencia-footnote p i { font-style: italic; } .recomendacao-cultivo { display: flex; align-items: center; gap: 20px; margin-top: 2rem; } .flyer-download { margin-top: 2rem; text-align: center; } .flyer-download .btn i { margin-right: 8px; } .recomendacao-label { flex: 0 0 60px; background: #e4943f; color: #FFF; border-radius: 30px; display: flex; align-items: center; justify-content: center; padding: 20px 6px; text-align: center; } .recomendacao-label span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.3px; } .recomendacao-content ul { padding-left: 18px; margin-bottom: 1rem; } .recomendacao-content li { font-family: 'Poppins', sans-serif; font-size: 14px; color: #516163; line-height: 1.6; margin-bottom: 8px; } @media (max-width: 767px) { .recomendacao-cultivo { flex-direction: column; align-items: stretch; } .recomendacao-label { flex: 0 0 auto; width: 100%; padding: 12px 20px; } .recomendacao-label span { writing-mode: horizontal-tb; transform: none; } } .recomendacao-cta { font-family: 'Poppins', sans-serif; font-weight: 700; color: #232323; margin-bottom: 0; } @keyframes animate { 0% { transform: scale(0.5); opacity:0; } 50% { opacity:1; } 100% { transform: scale(1.2); opacity:0; } } /*Botão Whatsapp*/