@charset utf-8; 
/*===============================*/
/* CSS by marmint.com */
/* accent colors */
/* #76a53d */

/* GENERAL */
/*===============================*/
/* latin */
@font-face {
  font-family: 'Swanky and Moo Moo';
  font-style: normal;
  font-weight: 400;
  src: local('Swanky and Moo Moo'), local('SwankyandMooMoo'), url(https://fonts.gstatic.com/s/swankyandmoomoo/v7/flUlRrKz24IuWVI_WJYTYcqbEsMUZ3kksrnl.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* all */
.main-width, #fancybox-content, #bd_results, .content-wrapper, * {font-family:'Roboto', sans-serif}
.animate, .top-wrapper *, .selling-arguments .custom *, .fb-posts .post {webkit-transition:all 0.15s ease-out; -moz-transition:all 0.15s ease-out; -o-transition:all 0.15s ease-out; -ms-transition:all 0.15s ease-out; transition:all 0.15s ease-out}
.no-animation, .no-animate {-webkit-transition:none; -moz-transition:none; -o-transition:none; -ms-transition:none; transition:none}
.jg_clearboth, .clr, .clear {width:100%; overflow:hidden; clear:both}

/* reset */
body, html, input, button {font-size: 16px}
*,:active,:focus{outline:none; outline:none}
form,fieldset{margin:0; padding:0; background:none; border:none}
body{margin:0 !important; padding:0 !important}


hr{border:none; height:1px; background:#ddd}
a img{border:0}
a{color:#2a4151; text-decoration:underline}
a:hover{text-decoration:none}
button,input[type="button"],input[type="submit"],a{cursor:pointer}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0}
input[type="number"] {
    -moz-appearance: textfield;
}
fieldset,dd,dl,dt{border:0; margin:0; padding:0}
h1,.content-wrapper form legend, .product-fields-title strong, .cart-dialog  .product-related-products h4 {font-size: 24px; margin:25px 0 30px; padding:0; font-weight:300; position:relative; z-index:1; color:#173861}
.puhunlund h1 {color:#000}
h2{font-size: 16px; margin:12px 0 0; padding:0; font-weight:300; position:relative; z-index:1; color:#444}
h2 a {display:block}
h3{font-size:16px; margin:0; padding:0}
:focus{outline:0}
input, select, textarea {margin:0 0 5px}
ul {-webkit-margin-before:0; -webkit-margin-after:0; -webkit-margin-start:0; -webkit-margin-end:0; -webkit-padding-start:0}
.content-wrapper ul {padding:1em 0 1em 40px}
img {max-width:100%}
figure {margin: 0; padding: 0}
.fb-post.fb_iframe_widget {min-height:135px; min-width:100%; background:url(../images/loader.gif) no-repeat 50% 50% !important; margin:0 0 25px !important}

/* FRAMEWORK */

/* grid */
div.row, div.column, .djc_subcategory_row, [class*='opg-width'] {box-sizing:border-box}
div.row::before, div.row::after, .djc_subcategory_row::before, .djc_subcategory_row::after {content:" "; display:table}
div.row::after, .djc_subcategory_row::after {clear:both}
div.row div.column, .vm-col-4, .vm-col-5, .width25, .width33, .vm-col-3, .djc_subcategory_row .pull_left {position:relative; float:left}

div.column-1 {width:8.33333333330%}
div.column-2 {width:16.66666666660%}
div.column-3, .vm-col-4, .width25 {width:24.99999999990%}
div.column-4, .width33, .vm-col-3 {width:33.33333333330%}
div.column-5 {width:41.33333333330%}
div.column-6 {width:49.99999999990%}
div.column-7 {width:58.33333333330%}
div.column-8 {width:66.66666666660%}
div.column-9 {width:74.99999999990%}
div.column-10 {width:83.33333333330%}
div.column-11 {width:91.66666666660%}
div.column-12 {width:100%}

.opg-width-large-1-1 {width:100%}
.opg-width-large-1-2, .opg-width-large-2-4, .opg-width-large-3-6, .opg-width-large-5-10 {width:50%}
.opg-width-large-1-3, .opg-width-large-2-6 {width:33.333%}
.opg-width-large-2-3, .opg-width-large-4-6 {width:66.666%}
.opg-width-large-1-4 {width:25%}
.opg-width-large-3-4 {width:75%}
.opg-width-large-1-5, .opg-width-large-2-10, .vm-col-5 {width:20%}
.opg-width-large-2-5, .opg-width-large-4-10 {width:40%}
.opg-width-large-3-5, .opg-width-large-6-10 {width:60%}
.opg-width-large-4-5, .opg-width-large-8-10 {width:80%}
.opg-width-large-1-6 {width:16.666%}
.opg-width-large-5-6 {width:83.333%}
.opg-width-large-1-10 {width:10%}
.opg-width-large-3-10 {width:30%}
.opg-width-large-7-10 {width:70%}
.opg-width-large-9-10 {width:90%}


/*===============================*/
/* LAYOUT */
/*===============================*/
.top-wrapper {width:68%; float:left; position:fixed; left:0; top:0; bottom:0; height:100%; text-align:center; color:#fff; background:url(../images/bg/bg2.jpg?v=2) no-repeat 60% 0; box-sizing:border-box; padding:30px 85px 0 0; background-size:cover}
.puhunlund .top-wrapper {background:url(../images/bgtalv/bg2.jpg?v=1) no-repeat 20% 0; background-size:cover}
@media only screen and (min-width:2004px) {
	.top-wrapper {background-size:cover}
}
.middle-wrapper {width:32%; color:#444; position:absolute; right:0; top:0; bottom:0; height:100%; min-height:100%}

/* fron slogan and arguments */
.slogan h2 {font-weight:700; font-size:46px; color:#fff; margin:15px 0 0; padding:0}
.puhunlund .slogan * {color:#333}
.slogan p {font-size:20px; font-weight:300; margin:10px auto; display: inline-block}
.slogan p::before {content:"\f3c5"; display:inline-block;  height:48px; width:48px; position:relative; margin:0 !important; bottom: 5px}
.puhunlund .slogan p::before {background:url(../images/location-talv.png) no-repeat}
.selling-arguments .custom {position:absolute; bottom:100px; width:100%; padding-right: 85px; box-sizing:border-box; left:0}
.selling-arguments .custom div {box-sizing:border-box; width:clamp(115px, 8vw, 175px); height:clamp(115px, 8vw, 175px); text-align:center; display:inline-block; margin-left:-1vw; overflow:hidden; border-radius:50%; position:relative}
.selling-arguments .custom div::after {content:" "; display:block; position:absolute; z-index:-1; background:#304319d6; height:100%; width:100%; top:0; right:0; bottom:0; left:0; opacity:0.7; -moz-opacity:0.7; -webkit-opacity:0.7}
.selling-arguments .custom div:hover::after {opacity:0.6; -moz-opacity:0.6; -webkit-opacity:0.6}
.selling-arguments .custom div::before {display:inline-block; content:" "; clear:both; margin:1.3vw 0 .6vw; font-family: "Font Awesome 6 Free"; -webkit-font-smoothing: antialiased; display: var(--fa-display, inline-block); font-variant: normal; text-rendering: auto; font-style: normal; line-height: 1; font-weight: 900; font-size:clamp(18px, 1.3vw, 34px); text-align: center}

.selling-arguments .custom div.accurate::before {content:"\f017"}
.selling-arguments .custom div.silent::before {content:"\f6a9"}
.selling-arguments .custom div.trust::before {content:"\f4be"}
.selling-arguments .custom div.year::before {content:"\f274"}
.selling-arguments .custom div.correct::before {content:"\f164"}

.selling-arguments .custom h4 {margin:0; padding:0; font-size:clamp(14px, .8vw, 20px); font-weight:bold}
.selling-arguments .custom div p {font-size:clamp(14px, .5vw, 16px); font-weight:300; margin:0; padding:0}
a.main-logo {display:block; position:absolute; bottom:0; right:0; width:140px; height:140px; text-decoration:none; background:url(../images/mehka.png) no-repeat 50% 25px; background-size:contain; background-color:#3d685a; text-align:center; padding:70px 0 0; box-sizing:border-box}
.puhunlund  a.main-logo {background-color:#222}
a.main-logo span {display:block; padding:15px 5px; text-align:center; color:#fff; position:relative; z-index:1; margin-top:0; font-weight:100}

@media only screen and (max-height:520px) {
a.main-logo {display:none}
}

@media only screen and (max-width:1550px) {
	.top-wrapper {width:60%; padding-right: 175px}
	.middle-wrapper {width:40%}
	.slogan h2 {font-size:34px}
	.selling-arguments .custom {bottom:50px; padding-right: 45px}
	.selling-arguments .custom div p {font-size:12px}
}
@media only screen and (max-width:1150px) {
	.top-wrapper {padding-left:30px}
	.slogan h2 {font-size:30px}
	.slogan p {font-size:18px; margin-top:2px}
	.slogan p::before {width:32px; height:32px; background-size:cover; margin-bottom:-10px}
}

/* main menu */
.mainmenu {position:absolute; top:0; right:0}
.mainmenu ul {float:right; display:block; padding:0; margin:0; list-style:none; width:140px; text-align:left}
.mainmenu li {display:block; padding:0 0 2px; position:relative; overflow:hidden}
.mainmenu li a {display:block; font-size:14px; color:#2a4151; text-decoration:none; padding:32px 5px; background:#fff;   -webkit-box-shadow: inset -10px 0 8px -2px #aaa; box-shadow: inset -10px 0 8px -2px #aaa; position:relative; margin-top:-4px; position:relative}
.mainmenu li a:hover, .mainmenu li.active a {box-shadow:none; -webkit-box-shadow:none}
.mainmenu li.item-240 a {overflow:hidden; padding:0 !important}
.mainmenu li.item-240 span {display:block; padding:15px 5px; text-align:center; color:#fff; position:relative; z-index:1; margin-top:0; font-weight:100; display:none}
.mainmenu li.item-240 {background:#76a53d; text-align:center; padding:20px 0 0}
.puhunlund .mainmenu li.item-240 {background:#222}
.mainmenu li.item-240 a {background:none; box-shadow:none; -webkit-box-shadow:none}

.mainmenu li a::before, .slogan p::before {padding: 7px 7px 0 7px; width: 30px; float:left; margin:-9px 5px 0 0; position:relative; font-family: "Font Awesome 6 Free"; -webkit-font-smoothing: antialiased; display: var(--fa-display, inline-block); font-variant: normal; text-rendering: auto; font-style: normal; line-height: 1; font-weight: 900; font-size: 24px; text-align: center}

.mainmenu li.item-240 a::before {display:none}
.puhunlund .mainmenu {z-index:10}
@media only screen and (max-width:1000px) {
.selling-arguments .custom {display:none}
}
@media only screen and (max-width:950px) {
	.top-wrapper {padding-right:0; padding-left:5%; width:50%; background:url(../images/bg/bg-m.jpg?v=2.1) no-repeat 50% 0; background-size:cover; z-index:10}
	.top-wrapper .bg {position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%; background:#000; opacity:0.1; z-index:-1}
	.middle-wrapper {width:50%}
	
	.mainmenu ul {width:84px; text-align:center}
	.mainmenu li.item-240 {position:fixed; left:0; bottom:-2px; width:130px}
	.mainmenu li.item-240 span {font-size:12px}
	.mainmenu li a {padding:25px 5px 20px}
	.mainmenu li a::before {width:100%; height:20px; position:relative; float:none; padding: 10px 0}
	.slogan {transform: rotate(270deg); position:absolute; left:-100px; top:90px}
	.slogan h2, .slogan p {width:250px; text-align:left}
	.slogan h2 {font-size:20px}
	.slogan p {position:relative; left:-5px; font-size:16px; }
	.slogan p::before {display:none}
	.grass {display:none !important}
	.main-logo {display:none  !important}
}
@media only screen and (max-width:650px) {
	
	.slogan {left:-100px; top:130px}
	.slogan h2, .slogan p {width:250px; text-align:left}
	.slogan p {position:relative; left:-5px}
	.top-wrapper {padding-right:0; padding:0; width:30%; background:url(../images/bg/bg-m-n.jpg?v=1) no-repeat 50% 0; background-size:cover}
	.middle-wrapper {width:70%}
	a.main-logo {display:none}
	/* menu button */
	#mobnav-btn { display: inline-block; cursor: pointer; position:absolute; top:5px; left:5px; z-index:1000}
	#mobnav-btn .bar1, #mobnav-btn .bar2, #mobnav-btn .bar3 { width: 35px; height: 5px; background-color: #fff; margin: 6px 0; transition: 0.4s; }
	#mobnav-btn.change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); }
	#mobnav-btn.change .bar2 { opacity: 0; }
	#mobnav-btn.change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); }
	
	.mainmenu {top:50px; -webkit-transition:none; -moz-transition:none; -o-transition:none; -ms-transition:none; transition:none}
	.mainmenu li {display:none; -webkit-transition:none; -moz-transition:none; -o-transition:none; -ms-transition:none; transition:none}
	.mainmenu li.item-240 {width:130px; z-index:10; display:block !important}
	.mainmenu li.item-240.hide {display:none !important}
	.mainmenu li.item-240 span {padding:5px 4px}
	.mainmenu.xactive, .mainmenu.xactive ul {display:block; width:100%; text-align:left}
	.mainmenu.xactive li {display:block; height:auto}
	.mainmenu li a::before {height:30px; width:30px; top:9px}
	.ico-facebook,.ico-youtube {position:fixed !important; left:10px !important; bottom:10px !important; top:auto !important; right:auto !important; background-position:0 -25px !important; z-index:1 !important}
	.ico-facebook,.ico-youtube {display:none}
	.ico-facebook.show,.ico-youtube.show {display:inline-block}
}
@media only screen and (max-width:500px) {
h1 {text-align:center}
}
@media only screen and (max-width:440px) {
	.mainmenu li a::before {display:none}
    .mainmenu li.item-240 {width: 100px; padding: 10px 10px 2px}
}
@media only screen and (max-width:390px) {
	.mainmenu li a::before {display:none}
    .mainmenu li.item-240 {width: 90px}
}

.content-wrapper {padding:10px 6% 80px; width:100%; clear:both; box-sizing:border-box; float:left; clear:both}
body.i-body-i .content-wrapper{padding:10px; width:570px; clear:none}
body.i-body .content-wrapper{width:780px; float:right; padding:10px 0 10px 10px; clear:right}
body.body-i .content-wrapper{width:780px; float:left; padding:10px 10px 10px 0; clear:left}

body.contact .middle-wrapper {background:url(../images/contact.jpg?v=1) no-repeat left 50% bottom 150px; background-size:70% auto}

.content-wrapper *{line-height:140%}
.content-wrapper.three-col{padding:0 10px 10px; width:570px}
.content-wrapper table{width:100%; border-collapse:collapse; border-spacing:0}
.content-wrapper th{padding:5px; background:#fafafa; padding:8px 10px; font-size:12px}
.content-wrapper p{margin:0; padding:0 0 12px}
.content-wrapper .spearheadfacebooklike{float:right}

textarea,input[type="text"],textarea,input[type="number"],input[type="password"],input[type="email"],input[type="search"], select,button, .checkout-bottom .vm-button-correct, a.chzn-single {background:#fff; border:3px solid #ddd; line-height:140%; padding:15px; color:#444; box-sizing:border-box; max-width:100%; border-radius: 4px}
textarea:focus,input[type="text"]:focus,input[type="password"]:focus,select:focus,input[type="search"]:focus {background:#ffd; color:#000}
input[type="submit"],input[type="button"],button[type="submit"],button[type="reset"],
.checkout-bottom .vm-button-correct, .opg-button-large, .opg-modal-footer .opg-button-primary, #rsc_submit {background:#76a53d !important; color:#fff !important; padding:16px 32px; border:none !important; text-decoration:none; display:inline-block; border-radius: 4px; font-weight: bold}
.opg-button, .opg-button-primary  {padding:5px 10px; border:none !important; text-decoration:none; display:inline-block; border-radius:5px; border:1px solid #ddd}
.content-wrapper textarea{width:100%; height:120px; box-sizing:border-box}


.ico-facebook,.ico-youtube {width:25px; height:25px; position:absolute; top:40px; right:10px; background:url(../images/icons/fb.png) no-repeat; z-index:1000}
.ico-youtube {background:url(../images/icons/yt.png) no-repeat; right:38px}
/* grass */
.grass {position:fixed; left:0; bottom:-10px; height:160px; right:0; width:100%; z-index:1000; background:url(../images/grass.png) repeat-x 50% -40px; display:none}
@media only screen and (max-width:1650px) {
	.grass {height:130px}
}
@media only screen and (max-width:1350px) {
	.grass {height:80px; background-position:50% 0 !important; background-size:cover}
}
/* COMPONENTS */
/* com - user */
/* ... generel */
.content-wrapper form#user-registration label, .content-wrapper .control-label {text-align:center; width:auto !important}
.content-wrapper .control-label *, .content-wrapper .control-label, .remember-me * {font-size:12px; color:#666}

/* ... login */
.login-page-wrapper {clear:both; text-align:center}
.login-page-inner {display:inline-block; width:100%; box-sizing:border-box; max-width:320px; text-align:left; margin:auto; padding:20px}
.login-page-inner div {text-align:left !important}
.login-page-inner .controls input, .login-page-inner .controls button {box-sizing:border-box; width:100%}
.login-page-inner .buttons {padding:10px 0 0}
.login-page-inner ul {list-style:none; margin:10px 0 0; padding:10px; background:#eee}
.login-page-inner ul li {display:block}
.login-page-inner ul * a {font-size:12px; color:#444; display:block; text-decoration:none}
.login-page-inner ul * a:hover {text-decoration:underline}

/* ... reset */
.content-wrapper div.reset, .content-wrapper div.registration {text-align:center}
.content-wrapper form#user-registration, .content-wrapper form#member-registration {padding:20px; border:1px solid #ddd; display:inline-block; text-align:center; max-width:500px; margin:30px auto 10px}
.content-wrapper .control-label {padding:10px 0 0}
.content-wrapper form#user-registration input#jform_email {max-width:200px}

/* ... register */
.content-wrapper form#member-registration {max-width:100%; width:100%; box-sizing:border-box}
.content-wrapper form#member-registration .control-label {width:40% !important; float:left; clear:left; text-align:right; padding:0 10px 0 0}
.content-wrapper form#member-registration .controls {overflow:hidden; clear:right}
.content-wrapper form#member-registration .control-group {width:100%; clear:both; overflow:hidden; border-top:1px solid #ddd; text-align:center; padding:10px 0 0; margin:10px 0 0}
.content-wrapper form#member-registration fieldset .control-group {border:none; text-align:left; padding:1px 0; margin:0}
.content-wrapper form#member-registration fieldset input {max-width:90%}

/* ... ... fb */
.facebook-registration {padding:20px; border:1px solid #ddd; clear:both; overflow:hidden; background:#f5f5f5; margin:20px 0 0; text-align:center}
.facebook-registration h3, .facebook-registration h5 {margin:0; padding:0 0 6px; font-size:14px; color:#999}

/* fb posts */
.fb-posts {width:100%; clear:both; float:left; padding:0 0 50px}
.fb-posts .post {width:100%; float:left; clear:both; box-sizing:border-box; padding:12px; border:1px solid #ddd; border-radius:5px; margin:0 0 10px}
.fb-posts .post:hover {box-shadow:#ccc 0 0 15px}
.fb-posts .post img.profile {border-radius:50%; float:left; margin:0 10px 10px 0}
.fb-posts .post .fb-img {float:right; filter: grayscale(100%);}
.fb-posts .post .fb-img:hover {filter:none}
.fb-posts .post .details {overflow:hidden; padding:10px 0}
.fb-posts .post h4 {font-size:14px; margin:0; padding:0; color:#000}
.fb-posts .post .date {font-size:12px; color:#999}
.fb-posts .post .comment {width:100%; clear:both; overflow:hidden; padding:0 0 10px}
.fb-posts .post .actions {padding:10px 5px 0; border-top:1px solid #ddd; box-sizing:border-box; width:100%}
.fb-posts .post .actions a::after {display:inline-block; padding:0 15px 0 0; content:" "}
.fb-posts .post .actions a, .fb-posts .post .actions a * {font-size:14px; color:#999; text-decoration:none}
.fb-posts .post .actions a:hover {text-decoration:underline}

/* com - content - featured/blog */
.blog-featured ul.actions{margin:0; padding:0; list-style:none; text-align:right}
.blog-featured ul.actions li{display:inline}
.blog-items{width:100%; float:left}
.blog-items .img-intro-right{float:right; margin:0 0 10px 10px}
.blog-items .img-intro-left{float:left; margin:0 10px 10px 0}

.blog-items.columns-2 .blog-item h2 {display:block; width:100%; clear:both; padding:5px 0 0; margin:0}
.row-separator{width:100%; float:left; clear:both}
.blog-items.columns-2 .blog-item figure {height:130px; overflow:hidden; width:100%; text-align:center}
.blog-items.columns-2 .blog-item figure img {max-height:130px; width: auto}

.items-leading {padding-bottom:50px}
.items-leading .pull-left.item-image {height:auto}
.items-leading .pull-left.item-image img {max-height:350px}
.items-leading h2 {text-align:center}

.blog-items.columns-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
}
.blog-item {text-align: center}
.blog-item .item-image img {
    width: 100%;
    height: auto;
}

@media only screen and (max-width:1150px) {
.blog-items.columns-2 .blog-item h2 {font-size:14px}
}
@media only screen and (max-width:500px) {
.blog-items.columns-2 {grid-template-columns: 1fr}
.blog-items.columns-2 .blog-item h2 {padding:0}
.blog-item .item-image img {height:auto}
.blog-item .item-image img {max-height:auto; width: }
}
/* com - content - article */
.item-page ul.actions{margin:0; padding:0; list-style:none; text-align:right}
.item-page ul.actions li{display:inline}
.item-page .img-fulltext-right{float:right; margin:0 0 10px 10px}
.item-page .img-fulltext-left{float:left; margin:0 10px 10px 0}
.item-page iframe {box-sizing:border-box; width:100% !important}

/* com - search */
.search-results .result-title{font-size:16px; margin:16px 0 0}
.search-results .result-category{display:none}
.search-results .highlight{background:#FF0}

/* com - forms */
.rsformcontact-form h2 {display:none}
strong.formRequired {display:none}
.form-txt {display:none}

/* validation */
.rsform-block-kontrollsona label, .rsform-block-kontrollsona .formControlLabel {display:none}
.rsform-block-kontrollsona input#kontrollsona {visibility:hidden; position:absolute; z-index:-1; width:1px; height:1px}
.rsform-block-valid h4 {margin:0; padding:15px 0 3px; font-size:18px; color:#2a4151; font-weight:400}

.rsform-block-valid #valid {position:relative; width:100%; clear:both; overflow:hidden; padding:5px 0 15px}
.rsform-block-valid #valid div {display:inline-block; font-family:"Font Awesome 6 Free"; width:40px !important; height:40px !important; line-height:25px; box-sizing:border-box; text-align:center; border-radius:50%; -moz-border-radius:50%; -webkit-border-radius:50%; background:none; padding:8px 0; border:none; cursor:not-allowed; margin:0 2px; color:#2a4151; webkit-transition:all 0.15s ease-out; -moz-transition:all 0.15s ease-out; -o-transition:all 0.15s ease-out; -ms-transition:all 0.15s ease-out; transition:all 0.15s ease-out; font-weight: 900}
.rsform-block-valid #valid div#v2 {background:#2a4151 ; cursor:pointer; color:#fff}
.rsform-block-valid #valid div:hover {background:#333 !important; color:#fff !important}
.rsform-block-valid #valid div.inactive:hover, .rsform-block-valid #valid div.inactive {background:red !important; color:#fff !important}
.rsform-block-valid #valid div#v2.active {background:#659f13 !important; color:#fff !important}
.rsform-block-valid #valid div#v1::before {content:"\f155"} 
.rsform-block-valid #valid div#v2::before {content: "\f153"}
.rsform-block-valid #valid div#v3::before {content:"\f154"}

@media only screen and (max-width:690px) {
	.rsform-block-valid h4, .rsform-block-valid #valid div {color:#2a4151}
}

/* com - joomgallery */
/* ... galleries, category */
.jg_clearboth {width:100%; float:left; clear:both; overflow:hidden; margin:10px 0}
.jg_element_cat ul, .jg_element_cat * li {margin:0 !important; padding:0 !important; list-style:none !important; background:none !important}
.jg_element_cat * li:first-child b {font-weight:bold !important}
.jg_element_cat * li:last-child {font-size:12px}
.jg_element_cat * {font-weight:normal}
.jg_element_cat, .jg_element_gal {width:23%; padding:0 1%; text-align:center; float:left}
.jg_element_cat img, .jg_element_gal img {border:1px solid #ddd; background:#fff; padding:1px; margin:10px auto}
.jg_element_cat a:hover img, .jg_element_gal a:hover img {border:1px solid #000; background:#000}
.jg_displaynone {display:none}

/* SYSTEM */
label.invalid{background:#fff; color:red}
span.star,strong.red,.formRequired span{color:red; font-size:18px}
span.spacer span.text,.searchintro{display:block; padding:5px; border:1px solid #eee; background:#fafafa; margin:5px 0}

a[href="http://www.faboba.com"]{display:none!important}
#userForm ol{margin:0; padding:0; list-style:none}
.formNoError{display:none}
.formFieldset legend{display:none}
.clear,.clr{width:100%; clear:both; overflow:hidden}
div.error {font-size:12px; color:red; clear:both; overflow:hidden; width:100%; padding:0 0 5px}


/* ... ... alerts */
#system-message-container .alert,.formRed, .alert-notice, .opg-alert {list-style:none; margin:0; padding:10px; color:#fff; background:#659f13; overflow:hidden; clear:both; display:none !important}
.alert-notice, .opg-alert {margin:0 0 15px}
#system-message-container .alert *, .formRed *, .opg-alert * {margin:0 !important; padding:0 !important; color:#fff !important}
#system-message dt, .alert-notice .close, .alert-heading{display:block; padding:5px; font-weight:700; display:none}
.formRed{display:block; padding:5px; margin:0}
.alert-notice p {display:none; margin:0; padding:0}
.alert-notice p:first-child {display:block}
.opg-close, #system-message-container .close {text-decoration:none !important; overflow:hidden}
.opg-alert > .opg-close:first-child, #system-message-container .close {float:right; position:relative; height:22px; width:22px; text-align:right}
.opg-close::after, #system-message-container .close::after {display:block;  content:"\f00d";  font-family:"Font Awesome 6 Free"; position:absolute; top:0; right:0}


/* form validate */
input.invalid,select.invalid,textarea.invalid,input.error,select.error,textarea.error {border-color:#f60!important; background:#ffc}
input.error::-webkit-input-placeholder  {color:red}
input.valid,select.valid,textarea.valid {background:#fafafa; border:1px solid #659f13 !important; color:#666}
.form-validate div.error, .formError {color:red; display:block; clear:both; overflow:hidden}
.form-validate div.error:hover {}
.form-validate td {vertical-align:top}

/* Tooltips */
.tip{float:left; background:#ffc; border:1px solid #D4D5AA; padding:5px; max-width:200px}
.tip *{font-size:12px}
.tip-title{font-weight:700; margin:-15px 0 0; padding:15px 0}
.tip-text{margin:0}
.tooltip {position:absolute; z-index:103000; display:block; visibility:visible; font-size:11px; line-height:1.4; opacity:0; filter:alpha(opacity=0)}
.tooltip.in {opacity:0.8; filter:alpha(opacity=80)}
.tooltip.top {margin-top:-3px; padding:5px 0}
.tooltip.right {margin-left:3px; padding:0 5px}
.tooltip.bottom {margin-top:3px; padding:5px 0}
.tooltip.left {margin-left:-3px; padding:0 5px}
.tooltip-inner {max-width:200px; padding:8px; color:#fff; text-align:left; text-decoration:none; background-color:#000; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; font-size:12px; font-family:Arial, Helvetica, sans-serif}
.tooltip-arrow {position:absolute; width:0; height:0; border-color:transparent; border-style:solid}
.tooltip.top .tooltip-arrow {bottom:1px; left:50%; margin-left:-5px; border-width:5px 5px 0; border-top-color:#000}
.tooltip.right .tooltip-arrow {top:50%; left:0; margin-top:-5px; border-width:5px 5px 5px 0; border-right-color:#000}
.tooltip.left .tooltip-arrow {top:50%; right:0; margin-top:-5px; border-width:5px 0 5px 5px; border-left-color:#000}
.tooltip.bottom .tooltip-arrow {top:0; left:50%; margin-left:-5px; border-width:0 5px 5px; border-bottom-color:#000}

/* slider core */
div.anythingSlider * {-webkit-transition:none; -moz-transition:none; -o-transition:none -ms-transition:none; transition:none}
div.anythingSlider{display:block; float:left; overflow:visible!important; margin:0}
div.anythingSlider .anythingWindow{overflow:hidden; position:relative; width:100%; height:100%}
.anythingBase{background:transparent; list-style:none; position:absolute; overflow:visible!important; top:0; left:0; margin:0; padding:0}
.anythingBase .panel{background:transparent; display:block; overflow:hidden; float:left; margin:0; padding:0}
.anythingBase .panel.vertical{float:none}
div.anythingSlider .arrow{position:absolute; display:block}
div.anythingSlider .arrow a span{display:block; visibility:hidden}
div.anythingSlider .back{left:0}
div.anythingSlider .forward{right:0}
div.anythingSlider.rtl .anythingWindow{direction:ltr; unicode-bidi:bidi-override}
div.anythingSlider,div.anythingSlider .anythingWindow,div.anythingSlider .anythingControls ul a,div.anythingSlider .arrow a,div.anythingSlider .start-stop{transition-duration:0; -o-transition-duration:0; -moz-transition-duration:0; -webkit-transition-duration:0}
div.anythingSlider .back.disabled,div.anythingSlider .forward.disabled{display:none}

/* Tooltips */
.tip{float:left; background:#ffc; border:1px solid #D4D5AA; padding:5px; max-width:200px}
.tip *{font-size:12px}
.tip-title{font-weight:700; margin:-15px 0 0; padding:15px 0}
.tip-text{margin:0}

/* tabs */
#ui-tabs ul#tabs {list-style-type:none; overflow:hidden; margin:0; padding:16px 0 0}
#ui-tabs ul#tabs li {display:inline-block; cursor:pointer; background:#ddd; padding:5px 10px 5px}
#ui-tabs ul#tabs li.current {display:inline-block; background:#fafafa}
#ui-tabs .tabs {padding:0}
#ui-tabs .dyn-tabs {overflow:auto; display:none}

/* pagiation */
.pagination, .vm-pagination {width:100%; clear:both; float:left; text-align:center; padding:40px 0 0; font-size:12px; color:#fff}
.pagination span, .vm-pagination span {display:block; padding:5px 0}
.pagination ul, .vm-pagination ul {list-style:none; margin:0; padding:0 0 5px}
.pagination li, .vm-pagination li {list-style:none; display:inline}
.pagination li span, .pagination li a, .vm-pagination li span, .vm-pagination li a {display:inline-block; padding:5px 10px; margin:0 2px; text-decoration:none; background:#333; color:#fff; font-size:12px}
.pagination li a, .vm-pagination li a {background:#e5e5e5; color:#333}
.pagination-start, .pagination-end {display:none !important}

::-webkit-input-placeholder { color:    #000}
:-moz-placeholder {color:    #000;   opacity:  1}
::-moz-placeholder {color:    #000;  opacity:  1}
:-ms-input-placeholder { color:    #000}

#gtx-trans {display:none !important}