* { margin: 0; padding: 0; outline: none !important; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; word-wrap: break-word; -webkit-font-smoothing: subpixel-antialiased;
}
.clear:after { content: ''; display: block; clear: both;
}
.grid-wa { display: grid; grid-gap: 20px;
}
.grid-wa.col2 { grid-template-columns: 1fr 1fr;
}
.grid-wa.col3 { grid-template-columns: 1fr 1fr 1fr;
}
.grid-wa.col4 { grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid-wa.install-btn { grid-template-columns: 2fr 1fr;
}
@media(max-width: 960px) { .grid-wa { grid-template-columns: 1fr!important; }
}
.poptamv { font-size: 14px; line-height: 1.6;
}
.poptamv * { font-family: 'Open Sans', sans-serif;
}
.poptamv b,
.poptamv strong { font-weight: 600;
}
.poptamv { display: flex !important; position: relative; position: fixed !important; z-index: 1000000; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; padding: 20px 0; visibility: hidden; opacity: 0;
}
.poptamv.open { visibility: visible; opacity: 1; transition: .4s;
}
.poptamv a { text-decoration: none;
}
.poptamv .wrap { display: block; margin: auto auto; width: calc(100% - 30px); box-shadow: 0 20px 50px rgba(0, 0, 0, .2); max-width: 500px;
}
.poptamv .wrap .title { display: block; margin: 0; height: 60px; line-height: 60px; border-bottom: 1px solid #eee; font-size: 14px; background: #fff; border-radius: 4px 4px 0 0; font-weight: 400;
}
.poptamv .wrap .title span.title-content { padding: 0 20px; color: #444; font-size: 110%;
}
.poptamv .wrap .title span.title-content i { color: #0CC243; font-size: 140%; display: inline-block; vertical-align: middle; margin-right: 10px;
}
.poptamv .wrap .title .closeTamv { color: #aaa; float: right; padding: 0 20px; cursor: pointer; font-size: 25px; font-weight: normal; transition: .2s;
} .poptamv .wrap .title .closeTamv:hover { color: #444;
} .poptamv .wrap .title .closeTamv:before { content: ''; cursor: default; display: block; position: fixed; z-index: -2; top: 0; left: 0; width: 100%; height: calc(100% + 100px); background: rgba(0, 0, 0, .4);
}
.poptamv .wrap .content { display: block; /*overflow-y: auto;*/ /*max-height: calc(100vh - 80px);*/ background: #fff; border-radius: 0 0 4px 4px;
}
.poptamv .poptamv-wrap { padding: 20px;
}
/* ---------------- FORMTAMV
------------------- */@media(max-width: 960px) { .formtamv .grid-wa.col2 { grid-template-columns: 1fr 1fr!important; }
}
@media(max-width: 320px) { .formtamv .grid-wa.col2 { grid-template-columns: 1fr!important; }
}
.formtamv * { outline: none; text-decoration: none;
}
.formtamv br { margin: 0; padding: 0; line-height: 0;
}
.formtamv .focus { box-shadow: inset 0 0 0 1px #FFBA00;
}
.formtamv label { position: relative; display: block; width: 100%; margin:0; padding: 0;
}
.formtamv label > input,
.formtamv label > select,
.formtamv label > textarea { position: relative; z-index: 1; border: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .02), inset 1px 1px 5px rgba(0,0,0,.05); background: rgba(0, 0, 0, .02); padding: 10px 15px; width: 100%; border-radius: 4px; padding-left: 40px;
}
.formtamv label > i { position: absolute; z-index: 0; display: inline-block; vertical-align: top; width: 40px; text-align: center; font-size: 20px; height: auto; background: transparent; box-shadow: none; top: 3px; left: 0; color: rgba(0,0,0,.2);
}
.formtamv label small { position: relative; display: block; margin-top: 10px; z-index: 3;
}
.formtamv label small > a.tooltip { margin-left: 10px; font-size: 20px; vertical-align: middle; display: inline-block; color: rgba(0,0,0,.4);
}
.formtamv label small > a.tooltip:hover { color: rgba(0,0,0,.6);
}
.formtamv label small a { font-weight: bold;
}
.formtamv select::-ms-expand { display: none;
}
.formtamv select { -webkit-appearance: none; -moz-appearance: none; -webkit-appearance: none; appearance: none;
}
.formtamv select option { font-size: 18px; background: #EDF8F5; color: rgba(0,0,0,0.7); text-shadow: none;
}
.formtamv .nomor_whatsapp[type=number]::-webkit-outer-spin-button,
.formtamv .nomor_whatsapp[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.nomor_whatsapp[type="number"] {
-moz-appearance: textfield;
}
.formtamv label>*:focus { background: transparent;
}
.formtamv label textarea { min-height: 40px; resize: vertical; margin-bottom: 0;
}
.formtamv label .validasi { position: relative; position: absolute !important; z-index: 2; top: calc(100% + 10px); left: 0; background: #FFBA00; color: rgba(0, 0, 0, .6); padding: 5px 10px; border-radius: 3px; font-size: 80%; box-shadow: 0 5px 10px rgba(0,0,0,.1); transition: .4s; visibility: hidden; opacity: 0; display: inline-block !important;
}
.formtamv label .validasi.show { visibility: visible; opacity: 1; top: 100%;
}
.formtamv label .validasi:after { position: absolute; bottom: 100%; left: 12px; content: ""; border: 8px solid; border-color: transparent transparent #FFBA00 transparent;
}
.formtamv .submit { display: block; text-align: center; border: none; width: 100%; display: block; background: #0CC243; color: #fff; padding: 10px 20px; cursor: pointer; border-radius: 4px; font-weight: 600; font-size: 110%;
}
.formtamv .submit.s2 { background: #009688;
}
.formtamv .submit i { display: inline-block; vertical-align: middle; font-size: 140%; margin: 0 10px;
}
.formtamv .submit:active { box-shadow: none;
}
.waFix { font-family: "Open Sans", sans-serif; position: relative; position: fixed!important; z-index: +100; bottom: 20px;
}
.waFix.kiri { left: 20px;
}
.waFix.kanan { right: 20px;
}
.waFix i.wa { position: relative; display: block; width: 60px; height: 60px; line-height: 60px; text-align: center; background: #fff; color: #23CC62; border-radius: 60px; box-shadow: 0 5px 15px rgba(0,0,0,.1); font-size: 30px;
}
.waFix:active i.wa { box-shadow: none;
}
.waFix span.count { position: absolute; display: inline-block; top: -2px; right: -2px; background: #E91B43; color: #fff; height: 20px; line-height: 20px; width: 20px; border-radius: 20px; font-size: 8px; text-align: center; font-style: normal; font-weight: bold; box-shadow: inset 0 -3px 0 rgba(0,0,0,.1); transform: scale(0.0);
}
.waFix.show span.count { transform: scale(1.1); transition: .2s;
}
.waFix span.info { display: inline-block; white-space: nowrap; border-radius: 4px; background: #fff; height: 40px; line-height: 40px; padding: 0 15px; text-align: center; position: relative; position: absolute!important; box-shadow: 0 5px 15px rgba(0,0,0,.1); bottom: 8px; color: rgba(0,0,0,.6); opacity: 0; visibility: hidden;
}
@media(max-width: 480px) { .waFix span.info { display: none; }
}
.waFix.show span.info { opacity: 1; visibility: visible; transition: 1s;
}
.waFix.kiri span.info { left: calc(100% + 45px);
}
.waFix.kiri.show span.info { left: calc(100% + 15px);
}
.waFix.kanan span.info { right: calc(100% + 45px);
}
.waFix.kanan.show span.info { right: calc(100% + 15px);
}
.waFix span.info:after { position: absolute; top: calc(50% - 8px); content: ""; border: 8px solid;
}
.waFix.kiri span.info:after { right: 100%; border-color: transparent #fff transparent transparent ;
}
.waFix.kanan span.info:after { left: 100%; border-color: transparent transparent transparent #fff ;
}
.waFix span.info i { display: inline-block; font-size: 140%; margin-right: 5px; vertical-align: middle; color: #4FC3F7;
} <a href="#whatsapp" class="poptamv-btn btn block" data-nomor="087864904554" data-title="
Order
Landing Page Elementor ">
Order Sekarang
$('.poptamv-btn, .tombol-wa').on('click', function() { var title = $(this).attr('data-title'); var nomorWA = $(this).attr('data-nomor'); var target = $(this).attr('href'); $(target).addClass('open'); $(target).find('.title-content').html(title); $(target).find('input.nomor').val(nomorWA); if($(this).attr('data-img') != null) { var img = $(this).attr('data-img'); $(target).find('.content img').show(); $(target).find('.content img').attr('src',img); } if($(this).attr('data-width') != null) { var width = $(this).attr('data-width'); $(target).find('.wrap').attr('style','max-width:'+width+'px!important;') } if($(this).attr('data-tooltip') != null) { var tooltip = $(this).attr('data-tooltip'); $(target).find('.poptamv-wrap').show(); $(target).find('.poptamv-wrap').html(tooltip) }
});
$('.poptamv .closeTamv').on('click', function() { $(this).parents('.poptamv').removeClass('open');
});
var web_title = $('title').text();
$(document).on('click','.waFix', function(){ $(this).removeClass('show'); $('title').text(web_title);
});
$(document).on('keypress','.formWA input, .formWA textarea', function() { if (event.keyCode === 13) { $(this).parents(".formWA").find('.submit').trigger('click'); }
});
$('.formWA .wajib').each(function() { title = $(this).attr('placeholder'); label = $(this).parents('label'); $('' + title + ' (wajib diisi) 
