@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'Signatie';
    src: url('Signatie.woff2') format('woff2'),
        url('Signatie.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.white{color:#fff;}


.green{color:#009661;}
.strikeout, .strikeout2{ 
  position: relative;
}
.strikeout::after, .strikeout2::after{
  border-bottom: 0.1em solid #ff0202;
  content: "";
  left: 0;
  margin-top: calc(0.120em / 2 * -1);
  position: absolute;
  right: 0;
  top: 54%;  
}
.strikeout::after{transform:rotate(-10deg);-webkit-  transform:rotate(-10deg);}
.pulsate-img{
	animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.s4btn{width:400px;margin:40px auto 0 auto;height:60px;line-height:60px;font-size:28px;box-shadow:0 4px 6px #e7e7e7;}
@media only screen and (max-width: 767px){
.s4btn{width:350px;height:54px;line-height:54px;margin:34px auto 0 auto;font-size:26px;}
}
@media only screen and (max-width: 389px){
.s4btn{width:100%;}
}
/*===============================*/
.show-479, .show-tab, .show-767, .show-400, .show-340, .show-359, .show-389{display:none;}
@media only screen and (max-width: 1200px){
.hide-desk{display:none;}	
}
@media only screen and (max-width: 1030px){
.show-tab{display:block;}
.hide-tab{display:none;}
}
@media only screen and (max-width: 767px){
.hide-767{display:none;}
.show-767{display:block;}
}
@media only screen and (max-width: 479px){
.show-479{display:block;}
.hide-479{display:none;}
}
@media only screen and (max-width: 400px){
.show-400{display:block;}
.hide-400{display:none;}
}
@media only screen and (max-width: 389px){
.hide-389{display:none;}
.show-389{display:block;}
}
@media only screen and (max-width: 359px){
.hide-359{display:none;}
.show-359{display:block;}
}

/*===============================
	footer info modal
===============================*/
.footer-modal-link{cursor:pointer;}
/* Kept in the layout but hidden, rather than display:none — display can't be
   transitioned, and visibility:hidden + pointer-events:none still keeps it
   out of the tab order and unclickable. */
.modal{
	position:fixed;inset:0;z-index:9999;
	display:flex;align-items:center;justify-content:center;
	padding:22px;
	background:rgba(0,0,0,.62);
	visibility:hidden;opacity:0;pointer-events:none;
	transition:opacity .18s ease, visibility 0s linear .18s;
}
.modal.is-open{
	visibility:visible;opacity:1;pointer-events:auto;
	transition:opacity .18s ease, visibility 0s linear 0s;
}
.modal-box{
	position:relative;
	width:min(980px,96vw);height:min(82vh,840px);
	background:#fff;border-radius:10px;
	overflow:hidden;
	box-shadow:0 24px 70px rgba(0,0,0,.32);
	transform:scale(.96);transition:transform .18s ease;
}
.modal.is-open .modal-box{transform:none;}
.modal-head{
	height:52px;
	display:flex;align-items:center;justify-content:space-between;
	padding:0 15px 0 20px;
	border-bottom:1px solid #e4e8ee;
}
.modal-title{margin:0;font-size:17px;font-weight:800;}
.modal-close{
	width:40px;height:40px;
	border:0;background:transparent;
	font-size:30px;line-height:1;color:#333;cursor:pointer;
}
.modal-frame{width:100%;height:calc(100% - 52px);border:0;display:block;}
.modal-fallback{
	position:absolute;left:0;right:0;bottom:0;
	margin:0;padding:16px 20px;
	background:#fff;border-top:1px solid #e4e8ee;
	font-size:14px;line-height:20px;text-align:center;
}
.modal-fallback a{color:#009661;font-weight:700;}
@media only screen and (max-width: 767px){
.modal{padding:12px;}
.modal-box{height:min(88vh,840px);}
.modal-title{font-size:15px;}
}

/*===============================
	vturb player in the video box
===============================*/
/* .video carries a fixed height per breakpoint for the old static
   placeholder. The smartplayer sets its own aspect ratio, so drop the height
   when it is in. Two classes out-specifies the single-class .video rules in
   media.css, so the media-query heights lose regardless of viewport — and
   common.css is loaded after media.css anyway. */
.video.has-player{height:auto;min-height:0;background:#000;font-size:0;cursor:default;}
.video.has-player vturb-smartplayer{display:block;width:100%;margin:0 auto;}
