
.vb-btn-image:not(.vb-style-g) > a, .vb-btn-image:not(.vb-style-g) > div { width:100%; height:100%; display:block; padding:20px 20px 18px 20px; text-decoration:none; position: relative; }
.vb-btn-image:not(.vb-style-g) > * > div, .vb-btn-image:not(.vb-style-g) .vb-wrap > div { height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.vb-btn-image:not(.vb-style-g) .vb-body { width:100%; height:100%; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; }
.vb-btn-image:not(.vb-style-g) .vb-image { width:100%; height:100%; }
.vb-btn-image:not(.vb-style-g) .vb-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.vb-btn-image:not(.vb-style-g) .vb-image svg { width: 100%; height: 100%; fill:inherit; }
.vb-btn-image:not(.vb-style-g) .vb-info-wrap > * { text-align:center; }
.vb-btn-image:not(.vb-style-g) .vb-button { transition:all .2s ease-out; }
.vb-btn-image:not(.vb-style-g) .vb-foot { display: flex; justify-content: center; align-content: flex-end; }

/* (STYLE A - DEFAULT) */
.vb-btn-image.vb-style-a { height:100%; }
.vb-btn-image.vb-style-a > * { transform: scale(1); background-color:#fff; transition:all .2s ease-out; }
.vb-btn-image.vb-style-a .vb-image { width:100%; height:auto; aspect-ratio:1/1; overflow:hidden; }
.vb-btn-image.vb-style-a .vb-title { font-size: 18px; line-height: 23px; font-weight: 800; letter-spacing: .5px; color:#2e2e2e; margin: 16px 0 3px 0; text-transform: none; transition:all .2s ease-out; }
.vb-btn-image.vb-style-a .vb-text { font-size:17px; font-weight:300; line-height:normal; color:#2e2e2e; margin-bottom:20px; }
.vb-btn-image.vb-style-a .vb-button { font-size:15px; border:1px solid #000; padding:8px 18px; background-color:#f9bf3b; color:#000; }

@media all and (max-width:1024px) {
	.vb-btn-image.vb-style-a .vb-title { font-size: 17px; margin: 12px 0 0 0; letter-spacing:normal; }
	.vb-btn-image.vb-style-a .vb-text { font-size: 16px; margin: 5px 0 2px 0; }
}
@media all and (max-width:767px) {
	.vb-btn-image:not(.vb-style-g) > a, .vb-btn-image:not(.vb-style-g) > div { padding: 10px 10px 18px 10px; }
}

/* (STYLE B) */
.vb-btn-image.vb-style-b > * { font-size: 0; line-height: 0; padding:0; border: 1px solid #fff; }
.vb-btn-image.vb-style-b .vb-image { overflow:hidden; }
.vb-btn-image.vb-style-b .vb-helper { position:absolute; top:0; left:0; right:0; bottom:0;  border:0px solid #ffffff00; transition: all .2s ease-out; }
.vb-btn-image.vb-style-b .vb-info-wrap {  font-size:17px; line-height:normal; letter-spacing:.2px; display: flex; flex-direction: column-reverse; align-items: center; position:absolute; bottom:15px; left:15px; right:15px; padding:15px 5px; background-color:#fff; transition: all .3s ease-out; }
.vb-btn-image.vb-style-b .vb-text { margin-bottom:5px; color:#777; font-weight:300; }
.vb-btn-image.vb-style-b .vb-title { color:#2e2e2e; font-weight:400; text-transform:uppercase; }
.vb-btn-image.vb-style-b .vb-image img { height:100%; transition: all .3s ease-out; }
.vb-btn-image.vb-style-b .vb-button { display:none; }

/* (STYLE C) */
.vb-btn-image.vb-style-c { height:100%; }
.vb-btn-image.vb-style-c .vb-image { width:100%; height:auto; aspect-ratio:1/1; }
.vb-btn-image.vb-style-c .vb-title { font-size:18px; line-height:23px; font-weight:600; margin: 10px 0; color:#2e2e2e; }
.vb-btn-image.vb-style-c .vb-text { font-size:17px; line-height:normal; font-weight:300; color:#2e2e2e; }
.vb-btn-image.vb-style-c .vb-button { font-size:15px; border:1px solid #000; border-radius:20px; padding:8px 18px; margin-top: 20px; background-color:#f9bf3b; color:#000; }
.vb-btn-image.vb-style-c .btn-link > div:before, .vb-btn-image.vb-style-c .btn-link > div:after,.vb-btn-image.vb-style-c .btn-link:before, .vb-btn-image.vb-style-c .btn-link:after { content:''; position:absolute; background-color:#000; transition:all .25s ease-in-out; }
.vb-btn-image.vb-style-c .btn-link > div:before, .vb-btn-image.vb-style-c .btn-link > div:after,.vb-btn-image.vb-style-c .btn-link:before, .vb-btn-image.vb-style-c .btn-link:after { background-color:var(--text_color); }
.vb-btn-image.vb-style-c .btn-link > div:before { top:0; left:0; width:2px; height:0; }
.vb-btn-image.vb-style-c .btn-link > div:after { bottom:0; right:0; width:2px; height:0; }
.vb-btn-image.vb-style-c .btn-link:before { top:0; left:0; width:0; height:2px; }
.vb-btn-image.vb-style-c .btn-link:after { bottom:0; right:0; width:0; height:2px; }

/* (STYLE D) */
.vb-btn-image.vb-style-d { height:100%; }
.vb-btn-image.vb-style-d > * { padding:0; }
.vb-btn-image.vb-style-d .vb-info-wrap { flex: 1; display: flex; flex-direction: column; }
.vb-btn-image.vb-style-d .vb-image { width:100%; max-width:100px; height:auto; aspect-ratio:1/1; display: flex; justify-content: center; align-items: center; }
.vb-btn-image.vb-style-d .vb-text { font-size:100%; line-height:normal; letter-spacing:.2px; color:#777; font-weight:300; }
.vb-btn-image.vb-style-d .vb-title { display: flex; justify-content: center; align-items: center; margin:16px 0 10px 0; font-size:90%; color:#2e2e2e; font-weight:400; text-transform:uppercase; transition: all .3s ease-out; }
.vb-btn-image.vb-style-d a { padding:20px; }
.vb-btn-image.vb-style-d .vb-button { display:none; }

/* (STYLE E) .vb-style-e*/
.vb-btn-image.vb-style-e .vb-image { transform: scale(1); height:auto; max-width:84px; margin:0 30px 0 0; transition:all .2s ease-out; }
.vb-btn-image.vb-style-e .vb-body { flex-direction: row; align-items: flex-start; }
.vb-btn-image.vb-style-e .vb-title { font-size:105%; line-height: 23px; font-weight: 800; letter-spacing: .5px; color:#2e2e2e; margin:0 0 6px 0; text-transform: none; text-align: start; transition:all .2s ease-out; }
.vb-btn-image.vb-style-e .vb-text { font-size:95%; font-weight:300; line-height:normal; color:#2e2e2e; margin-bottom:0; text-align:start; }
.vb-btn-image.vb-style-e .vb-button { font-size:15px; border:1px solid #000; padding:8px 18px; background-color:#f9bf3b; color:#000; }
.vb-btn-image.vb-style-e.reverse .vb-body { flex-direction:row-reverse; }
.vb-btn-image.vb-style-e.reverse .vb-image { max-width:84px; margin:0 0 0 30px; }
.vb-btn-image.vb-style-e.reverse .vb-title { text-align: end; }
.vb-btn-image.vb-style-e.reverse .vb-text { text-align:end; }

/* (STYLE F) */
.vb-btn-image.vb-style-f { height:100%; }
.vb-btn-image.vb-style-f > * { padding:0; border: 1px solid #fff; }
.vb-btn-image.vb-style-f .vb-image { overflow:hidden; height:auto; }
.vb-btn-image.vb-style-f .vb-helper { }
.vb-btn-image.vb-style-f .vb-info-wrap { font-size:17px; line-height:normal; letter-spacing:.2px; display: flex; flex-direction: column-reverse; padding:15px; width:100%; align-items: center; background-color:#fff; border: 1px solid var(--primary_color); transition: all .3s ease-out; }
.vb-btn-image.vb-style-f .vb-texts { flex:1; display: flex; flex-wrap:wrap; justify-content:space-between; width:100%; color: #2e2e2e; font-size: 16px; line-height: normal; padding: 9px 1px 8px 1px; }
.vb-btn-image.vb-style-f .vb-text {  }
.vb-btn-image.vb-style-f .vb-additional { text-align:end; }
.vb-btn-image.vb-style-f .vb-title { color:var(--primary_color); font-weight:normal; text-transform:uppercase; }
.vb-btn-image.vb-style-f .vb-image img { height:100%; transform:scale(1); transition: all .3s ease-out; }
.vb-btn-image.vb-style-f .vb-button { display:none; }

/* (STYLE G) */
.vb-btn-image.vb-style-g { aspect-ratio:4/5; font-family:inherit; }
.vb-btn-image.vb-style-g a { position:relative; overflow:hidden; height:100%; width:100%; display:block; }
.vb-btn-image.vb-style-g .abs { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.vb-btn-image.vb-style-g .bimage { background-position: center; background-size: cover; z-index: 1; }
.vb-btn-image.vb-style-g .bfront { opacity:0; z-index: 2; transition:opacity .35s ease-in-out; transition-delay:0; }
.vb-btn-image.vb-style-g .bfilter { background-color:#0008; }
.vb-btn-image.vb-style-g .bstitle { display: flex; justify-content: center; align-items: flex-end; z-index: 3; pointer-events:none; }
.vb-btn-image.vb-style-g .bstitle > div { font-size:33px; font-weight:400; color:#fff; width:100%; text-align:center; padding: 12px 10px; transition:transform .4s ease-in-out; }
.vb-btn-image.vb-style-g .bcontent { flex-direction:column; padding:7%; }
.vb-btn-image.vb-style-g .bcontent > div { color:#fff; text-align:center; }
.vb-btn-image.vb-style-g .bltitle { font-size:39px; font-weight:400; margin-bottom:12px; }
.vb-btn-image.vb-style-g .btext { font-size:16px; font-weight:300; line-height:22px; }
.vb-btn-image.vb-style-g .bmore { position:relative; font-size:16px; font-weight:400; text-transform:uppercase; padding:20px 10px; }
.vb-btn-image.vb-style-g .bmore:after { content:''; position: absolute;height: 2px; transform:scaleX(1); left: 10px; right:10px; bottom: 15px; display: block; background-color: #fff; transition:transform .4s ease-in-out; }
.vb-btn-image.vb-style-g a:hover .bfront { opacity:1; transition-delay:.12s; }
.vb-btn-image.vb-style-g a:hover .bstitle > div { transform: translateY(100%); }
.vb-btn-image.vb-style-g .bmore:hover:after { transform:scaleX(-1); }

/* (STYLE F)
.vb-btn-image.vb-style-f > * { font-size: 0; line-height: 0; padding:0; border: 1px solid #fff; }
.vb-btn-image.vb-style-f .vb-image { overflow:hidden; }
.vb-btn-image.vb-style-f .vb-helper { position:absolute; top:0; left:0; right:0; bottom:0;  border:0px solid #ffffff00; transition: all .2s ease-out; }
.vb-btn-image.vb-style-f .vb-info-wrap {  font-size:17px; line-height:normal; letter-spacing:.2px; display: flex; flex-direction: column-reverse; align-items: center; position:absolute; bottom:25px; left:auto; right:auto; padding:15px 16%; background-color:#fff; border: 1px solid var(--primary_color); transition: all .3s ease-out; }
.vb-btn-image.vb-style-f .vb-text { position: absolute; top: 10px; left: 16px; font-size: 22px; line-height: normal; color: #fff; }
.vb-btn-image.vb-style-f .vb-title { color:var(--primary_color); font-weight:normal; text-transform:uppercase; }
.vb-btn-image.vb-style-f .vb-image img { height:100%; transition: all .3s ease-out; }
.vb-btn-image.vb-style-f .vb-button { display:none; }
 */
 
@media all and (max-width:991px) {
	.vb-btn-image.vb-style-f .vb-info-wrap { padding:10px; }
}
 
@media(hover: hover) and (pointer: fine) {
	.vb-btn-image.vb-style-a a:hover { text-decoration:none; transform: scale(1.02); box-shadow: 0 18px 16px 0 rgba(211,214,220,.63); }
	.vb-btn-image.vb-style-a a:hover .vb-title { color:#f9bf3b; }
	.vb-btn-image.vb-style-a a .vb-button:hover { background-color:transparent; }
	
	.vb-btn-image.vb-style-b a:hover .vb-helper { border:4px solid #ffffffff; }
	.vb-btn-image.vb-style-b a:hover .vb-info-wrap { background-color:#ff5151; }
	.vb-btn-image.vb-style-b a:hover .vb-text, .vb-btn-image.vb-style-b a:hover .vb-title { color:#fff; }
	.vb-btn-image.vb-style-b a:hover .vb-image img { transform:scale(1.05); }
	
	.vb-btn-image.vb-style-c .vb-button:hover { background-color:transparent; }
	.vb-btn-image.vb-style-c .btn-link:hover > div:before, .vb-btn-image.vb-style-c .btn-link:hover > div:after { height:100%; }
	.vb-btn-image.vb-style-c .btn-link:hover:before, .vb-btn-image.vb-style-c .btn-link:hover:after { width:100%; }
	
	.vb-btn-image.vb-style-d a:hover { text-decoration:none; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; background-color:#fff3; }
	.vb-btn-image.vb-style-d a:hover .vb-title { color:#d00; }
	.vb-btn-image.vb-style-d a:hover svg { fill:#d00; }
	
	.vb-btn-image.vb-style-e a:hover .vb-image { transform: scale(1.05); }
	.vb-btn-image.vb-style-e a:hover .vb-title { color:#f9bf3b; }
	
	.vb-btn-image.vb-style-f a:hover .vb-info-wrap { background-color:var(--primary_color); }
	.vb-btn-image.vb-style-f a:hover .vb-title { color:#fff; }
	.vb-btn-image.vb-style-f a:hover .vb-image img { transform:scale(1.05); filter: brightness(.85) blur(.2px); }
	
	/*
	.vb-btn-image.vb-style-f a:hover .vb-info-wrap { background-color:var(--primary_color); }
	.vb-btn-image.vb-style-f a:hover .vb-title { color:#fff; }
	.vb-btn-image.vb-style-f a:hover .vb-image img { transform:scale(1.05); filter: brightness(.85) blur(.2px); }
	*/
}












