/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, 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{background: transparent; border: 0; margin: 0; padding: 0; list-style: none;} img{max-width: 100%; image-rendering: -webkit-optimize-contrast;}
.cf{zoom: 1;} .cf:before, .cf:after{content: ""; display: table;} .cf:after{clear: both;} .clear{clear: both;} *, *:before, *:after{box-sizing: border-box;}

html, body{font-family: "Roboto", sans-serif; line-height: 1.5; height: 100%; width: 100%;}
body{display: flex; min-height: 100vh; flex-direction: column;}
hr{display: block; margin: 35px 0; border: none; border-top: 1px #eee solid;}
::-moz-selection{background: #105E31; color: #fff; text-shadow: none} ::selection{background: #105E31; color: #fff; text-shadow: none}

.main{flex: 1; padding: 50px 0;}
.wrap{max-width: 1240px; margin: 0 auto; padding: 0 20px;}

.flex-row{display: flex; flex-wrap: wrap; gap: 35px;}
.flex-row .flex-col{flex: 1;}

.col-7{max-width: 14.28%;} .col-4{max-width: 33.3333%;} .col-3{max-width: 25%;}

/* TYPOGRAPHY */

h1, h2, h3, h4, h5, h6{font-family: "Roboto Condensed", sans-serif; font-weight: 700; text-transform: uppercase; line-height: 1.2;}
h1{font-size: 28px;} h2{font-size: 22px;} h3{font-size: 20px;}
a{text-decoration: none; color: inherit; cursor: pointer; transition: all .2s ease-in-out;} a:hover{color: inherit;}

.underline-link{display: inline-block; margin: 2px 0; font-weight: 700; text-decoration: underline; color: #105E31;}
.underline-link:hover{text-decoration: none;}
.underline-link:after{margin-left: 10px; font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f35d";}

.green{color: #105E31;}

/* HEADER */

.header{background: #282828; padding: 20px 0;}
.header img{display: block; max-height: 75px; margin: auto;}

/* NAVIGATION */

#cssmenu{display: block; position: relative; background: #105E31; text-align: center; z-index: 999;}
#cssmenu ul li{display: inline-block; position: relative;}
#cssmenu ul li a{display: flex; align-items: center; padding: 10px 13px; font-family: "Roboto Condensed", sans-serif; font-size: 16px; font-weight: 700; text-transform: uppercase; text-decoration: none; color: #fff;}
#cssmenu ul li:hover > a{background: #0D532A;}
#cssmenu ul li:hover > ul{left: auto;}

#cssmenu ul li.has-sub > a:after{margin-left: 8px; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 8px; content: "\f078";}
#cssmenu ul ul{display: block; position: absolute; left: -9999px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);}
#cssmenu ul ul li{border-bottom: 1px #eee solid;}
#cssmenu ul ul li:last-child{border: none;}
#cssmenu ul ul li a{background: #fff; width: 250px; padding: 12px 13px; font-size: 14px; font-weight: 400; text-transform: none; text-align: left; color: #444;}
#cssmenu ul ul li:hover > a{background: #f5f5f5;}

#cssmenu ul ul li.has-sub > a:after{position: absolute; right: 10px; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 8px; content: "\f054";}
#cssmenu ul ul ul{top: -1px; margin-left: 100%;}

#cssmenu #menu-button{display: none; background: #105E31; padding: 15px 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; text-align: left; color: #fff; cursor: pointer;}
#cssmenu #menu-button:after{margin-left: auto; font-family: "Font Awesome 6 Free"; font-size: 16px; font-weight: 900; content: '\f0c9';}
#cssmenu #menu-button.menu-opened:after{content: '\f00d';}

/* BODY */

.home-container{display: flex; align-items: flex-start; flex-wrap: wrap; background: #444;}
.home-container .home-left{flex: 1; background: #fff; padding: 25px;}
.home-container .home-center{background: #282828; width: 50%;}
.home-container .home-right{flex: 1; background: #fff; padding: 25px;}

.title-container{display: flex; align-items: center; margin-bottom: 25px;}
.title-container a{margin-left: auto; padding: 0 10px; font-size: 14px; text-transform: uppercase;}
.title-container a:hover{text-decoration: underline;}

.carousel .flickity-button{display: none;}

.quick-search{display: block; width: 100%; margin: 15px 0 25px;}
.quick-search input[type="text"], .quick-search select{display: block; width: 100%; margin-bottom: 5px; padding: 10px; font-family: "Roboto", sans-serif; border: 1px #ddd solid; border-radius: 3px;}
.quick-search select{padding: 10px 5px;}
.quick-search button{display: block; width: 100%; background: #105E31; margin: 5px 0; padding: 12px; font-family: "Roboto Condensed", sans-serif; font-size: 16px; font-weight: 700; text-align: center; text-transform: uppercase; color: #fff; outline: none; border: none; border-radius: 3px; cursor: pointer; transition: all .2s ease-in-out;}
.quick-search button:hover{background: #0D532A;}
.quick-search a{display: block; width: 100%; background: #282828; margin: 5px 0; padding: 10px; font-family: "Roboto Condensed", sans-serif; font-size: 16px; font-weight: 700; text-align: center; text-transform: uppercase; color: #fff; outline: none; border: none; border-radius: 3px; cursor: pointer; transition: all .2s ease-in-out;}
.quick-search a:hover{background: #000;}

.finance-box{background: url("/siteart/bg-finance.jpg") center center no-repeat; background-size: cover; padding: 20px;}
.finance-box h2{margin-bottom: 15px; font-weight: 400; text-align: center;}
.finance-box h2 strong{display: block; font-weight: 700; color: #105E31;}
.finance-box a{display: block; margin: 5px 0; padding: 10px; font-family: "Roboto Condensed", sans-serif; font-weight: 700; text-align: center; text-transform: uppercase; border: 2px #282828 solid; border-radius: 3px;}
.finance-box a:hover{background: #282828; color: #fff;}
.finance-box a:nth-child(odd){color: #105E31; border-color: #105E31;}
.finance-box a:nth-child(odd):hover{background: #105E31; color: #fff;}

.card-container .card{position: relative; margin-bottom: 5px; border: 1px #ddd solid; overflow: hidden;}
.card-container .card img{display: block; width: 100%; transition: all .5s ease;}
.card-container .card .content{display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .5); font-family: "Roboto Condensed", sans-serif; font-size: 20px; font-weight: 700; text-transform: uppercase; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); color: #fff; transition: all .5s ease; z-index: 10;}
.card-container .card:hover img{transform: scale(1.05);}
.card-container .card:hover .content{background: rgba(0, 0, 0, 0);}

.product-box{background: #282828; padding: 25px; color: #fff;}
.product-container{display: flex; flex-wrap: wrap; gap: 5px; background: #0D532A; padding: 5px;}
.product-container .product{background: #fff; width: calc(33.3333% - 5px); border: 5px #282828 solid;}
.product-container .product img{display: block; margin: auto;}
.product-container .product a{display: block; padding: 10px 15px; transition: all .5s ease;}
.product-container .product a:hover{transform: scale(1.1);}
.main .product-box{border: none; padding: 0;}

.contact-info{display: flex; gap: 25px; font-size: 18px;}
.contact-info iframe{display: block; flex: 1; width: 100%; height: 250px;}
.contact-info ul{flex: 1; max-width: 400px;}
.contact-info ul li{display: flex; align-items: center; margin-bottom: 10px;}
.contact-info ul li i{display: flex; align-items: center; justify-content: center; background: rgba(13, 83, 42, 0.05); width: 50px; height: 50px; margin-right: 20px; font-size: 16px; color: #0D532A; border-radius: 50px;}
.contact-info ul li a{display: flex; align-items: center; flex: 1; font-weight: 300;}
.contact-info ul li a:hover{text-decoration: underline;}

.flex-col img {width: 100%; height: auto;}

/* FORM */

.form{margin: 15px 0; padding: 25px; font-size: 14px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);}
.form h3{display: block; background: #f5f5f5; width: 100%; margin: 20px 0; padding: 15px; font-size: 20px; text-align: center; color: #666;}
.form p{margin-bottom: 20px; font-size: 14px;}
.form input[type="text"], .form select, .form textarea{background: #fafafa; width: 100%; padding: 15px 12px; font-family: inherit; border: 1px #eee solid; border-radius: 5px;}
.form textarea{height: 120px;}
.form input[type="checkbox"], .form input[type="radio"]{position: relative; margin: 0 10px 0 0;}
.form input[type="submit"]{display: block; width: 100%; max-width: 250px; background: #333; margin: auto; padding: 15px; font-family: inherit; font-size: 16px; font-weight: 700; text-transform: uppercase; color: #fff; border-radius: 5px; border: none; transition: all .2s ease-in-out; cursor: pointer;}
.form input[type="submit"]:hover{background: #555;}

.form .form-row{display: block; margin-bottom: 10px;}
.form .form-group{display: flex; position: relative;}
.form .form-group label{position: absolute; top: 13px; left: 15px; color: #666; pointer-events: none; transition: 0.2s ease all;}
.form .form-group label span{color: red;}
.form .form-group.active label{top: 5px; left: 12px; font-size: 10px; font-weight: 700; color: #0D532A;}
.form .form-group.active input[type="text"], .form .form-group.active textarea{padding: 20px 12px 10px 12px;}
.form .form-group.active select{padding: 20px 12px 10px 8px;}

.form .label-field{display: flex; flex-wrap: wrap; margin: 10px 0;}
.form .label-field label{display: flex; align-items: center; margin: 0 5px 5px 0; background: #fafafa; padding: 8px 16px; border: 1px #eee solid; border-radius: 5px; transition: all .2s ease-in-out; cursor: pointer;}
.form .label-field label:hover{background: #f5f5f5;}

.CaptchaPanel{margin: 0 !important; padding: 0 !important; line-height: normal !important;}
.CaptchaImage{margin: auto;}
.CaptchaMessagePanel{padding: 0 !important; margin: 0 !important; font-weight: normal !important; font-size: 12px; line-height: 14px;}
.CaptchaAnswerPanel{margin: 0; padding: 2px 0px 2px 0px !important;}
.CaptchaAnswerPanel input{width: 250px; max-width: 100%; padding: 5px; margin: 5px 0;}
.CaptchaWhatsThisPanel{line-height: 0; margin: 0; padding: 8px 0 8px 0 !important;}
.CaptchaWhatsThisPanel a{text-decoration: underline; font-size: 12px; color: #000;} .CaptchaWhatsThisPanel a:hover{text-decoration: none;}

@media screen and (max-width: 768px){
	.form .label-field label{display: block; width: 100%;}
	.form input[type="submit"]{max-width: 100%;}
}

/* FOOTER */

.footer{background: #444; padding: 75px 0 20px; font-size: 14px; color: #fff;}
.footer h4{display: block; margin-bottom: 15px; font-size: 16px;}
.footer ul li a{display: inline-block; padding: 2px 0;}
.footer ul li a:hover{opacity: .75;}
.footer ul li a i{margin-right: 6px;}

.copyright{display: block; margin-top: 75px; font-size: 12px; text-align: center; opacity: .75;}
.copyright ul{display: inline-flex; margin: 0 10px; gap: 8px;}
.copyright ul li a{text-decoration: underline;}
.copyright ul li a:hover{text-decoration: none;}

/* RESPONSIVE */

@media screen and (max-width: 1024px){
	.main{padding: 30px 0;}
	.title-container{margin-bottom: 20px;}
	
	#cssmenu #menu-button{display: flex; align-items: center;}

	#cssmenu ul{display: none; background: #282828; text-align: left; color: #333; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.1);}
	#cssmenu ul li{display: flex; align-items: center; flex-wrap: wrap; border-bottom: 1px #444 solid;}
	#cssmenu ul li a{flex: 1; background: none !important; height: 52px; padding: 0 20px; font-size: 14px; text-transform: uppercase; order: 1;}
	#cssmenu ul li a:after{display: none;}
	#cssmenu ul ul{display: none; position: relative; background: #444; width: 100%; left: 0; order: 3;}
	#cssmenu ul ul li{border-bottom: 1px #555 solid;}
	#cssmenu ul ul li a{padding: 0 20px; font-size: 12px; text-transform: none; color: #fff;}
	#cssmenu ul ul ul{top: 0; margin-left: auto;}

	#cssmenu .submenu-button{display: flex; align-items: center; justify-content: center; background: #105E31; height: 52px; width: 52px; order: 2; cursor: pointer;}
	#cssmenu .submenu-button:after{font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 12px; color: #fff; content: "\f067";}
	#cssmenu .submenu-button.submenu-opened:after{content: '\f068';}
	
	.home-container .home-left{flex: none; width: 100%; padding: 20px 20px 0;}
	.home-container .home-center{width: 100%;}
	.home-container .home-right{flex: none; width: 100%; padding: 20px;}

	.finance-box{position: relative; width: calc(100% + 40px); left: -20px;}

	.product-box{padding: 20px;}

	.card-container{display: flex; flex-wrap: wrap;}
	.card-container .card{flex: none; width: calc(50% - 10px); height: 85px; margin: 5px;}
	.card-container .card img{width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
	.card-container .card:hover img{transform: translate(-50%,-50%);}
}
@media screen and (max-width: 768px){
	.flex-row{gap: 20px;}
	.flex-row .flex-col{flex: none; width: 100%;}
	.col-7{max-width: calc(25% - 20px);}

	.contact-info{flex-wrap: wrap;}
	.contact-info iframe{flex: none; width: 100%; max-width: 100%;}
	.contact-info ul{flex: none; width: 100%; max-width: 100%;}

	.footer{padding: 35px 0 20px; text-align: center;}
}
@media screen and (max-width: 480px){
	h1{font-size: 24px;}
	.col-7{max-width: calc(50% - 20px);}

	.product-container .product{width: calc(50% - 5px);}
	.card-container .card{width: 100%; margin: 5px 0;}
}