@charset "UTF-8";
/* CSS Document */

XXXhtml {
	background-color: #002b74;
}
body:before {
	content:"";
	display: block;
	position: absolute;
	inset:0;
	background-color: #00457f;
	background-color: rgba(0,69,127,0.8);
	/* backdrop-filter: contrast(1.5) brightness(0.5); */
}

.dialog {
	position: fixed;
	top: calc(50% - 5vh);
	left: 50%;
	transform: translate(-50%,-50%);
	padding: 25px 40px;
	border-radius: 15px;
	background-color: #FFE501;
	background-color: rgba(255,229,1,0.9);
	background-color: rgba(255,255,255,0.5);
	border: 5px solid #FFE501;
	border: 5px solid #0059e4;
	box-shadow: 0 10px 15px 0 rgba(0,0,0,0.6), inset -50px -50px 100px 30px rgba(255,255,255,0.85);
	backdrop-filter:blur(10px);
	opacity: 0;
}
.dialog,
.dialog * {
	user-select: none;
}
.dialog .close-button {

}
.dialog .buttons {
	text-align: right;
}
.dialog .buttons .cta-button {
	font-family: Lato, sans-serif;
	font-weight: 700;
	font-style: normal;
	text-rendering: optimizeLegibility;
	font-size: 1.7rem;
	line-height: 1.5;
	color: #fff;
	text-transform: inherit;
	display: inline-block;
	background-color: #0059e4;
	border-radius: 2px;
	text-align: center;
	padding: 9px 22px;
	border: 2px solid #0059e4;
	height: auto;
	cursor: pointer;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	max-width: 100%;
	text-decoration: none;
	transition: background-color 150ms;
}
.dialog .buttons .cta-button:hover {
	background-color: #002b74;
}

.dialog .cta-button i {

}
.dialog .cta-button em {
	font-style: normal;

}

.dialog h2.main-title {
	font-size: 4rem;
	line-height: 1.1;
	margin-top: 0;
	margin-bottom: 30px;
}
.dialog p.bigger {
	font-weight: bold;
	font-size: 2.1rem;
	line-height: 1.2;
	text-wrap:balance;
	color: #25408e;
}
.dialog p.bigger i {
	display: block;
	position: relative;
	width:       50px;
	height:      50px;
	margin: 0 0 -50px 0;
	line-height: 50px;
	font-size:   50px;
	text-align: center;
	color: rgba(44,151,44,1.00);
	color: #0059e4;
	color: #25408e;
}


.dialog[data-template="no-record-found"      ] p.bigger i:before { content:"\EA78"; }
.dialog[data-template="invalid-email-address"] p.bigger i:before { content:"\EA74"; }
.dialog[data-template="success"              ] p.bigger i:before { content:"\EBA1"; }
.dialog[data-template="database-error"       ] p.bigger i:before { content:"\EBAC"; }
.dialog[data-template="already-unsubscribed" ] p.bigger i:before { content:"\EA78"; }
.dialog[data-template="failed"               ] p.bigger i:before { content:"\EBA1"; }

.dialog p.bigger em {
	display: block;
	position: relative;
	margin: 0 0 0 63px;
	font-style: normal;
}




.dialog {
    animation: pop 0.3s ease-out forwards;
    animation-delay: 4.5s;
}

@keyframes pop {
    0%   { opacity:0; transform:translate(-50%,-50%) scale(0.95,0.95);}
    100% { opacity:1; transform:translate(-50%,-50%) scale(1,1);}
}



.stripes-container {
    display: flex;
    position: fixed;
    width:  100vw;
    height: 100vh;
    overflow: hidden;
	flex-direction: column; 
}
.stripe {
    flex: 1;
	flex-direction: column;
    width: 100%;
    background: rgba(0, 0, 0, 0);
	transform-origin: left bottom;
    animation: move 6s ease-out forwards;
}

.blur1  { backdrop-filter: blur(1px); }
.blur2  { backdrop-filter: blur(2px); }
.blur3  { backdrop-filter: blur(3px); }
.blur4  { backdrop-filter: blur(4px); }
.blur5  { backdrop-filter: blur(5px); }
.blur6  { backdrop-filter: blur(6px); }
.blur7  { backdrop-filter: blur(7px); }
.blur8  { backdrop-filter: blur(8px); }
.blur9  { backdrop-filter: blur(9px); }
.blur10 { backdrop-filter: blur(10px); }
.blur11 { backdrop-filter: blur(11px); }
.blur12 { backdrop-filter: blur(12px); }
.blur13 { backdrop-filter: blur(13px); }
.blur14 { backdrop-filter: blur(14px); }
.blur15 { backdrop-filter: blur(15px); }

@keyframes move {
    0%   { transform: scale(5) translateY(0); }
    100% { transform: scale(1) translateY(100vw); }
}


.loader-container {
	position: fixed;
	left: 50%;
	top: calc(50% - 5vh);
	transform:translate(-50%,-50%);
	animation: hide 0.5s linear forwards;
    animation-delay: 4s;
}
.loader-container .loader {
	width: 72px;
	height: 72px;
	border: 10px solid transparent;
	border-bottom-color: white;
	border-top-color: white;
	border-radius: 50%;
	animation: spin 2s infinite steps(12);
	animation: spin 1.5s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes hide {
  to {
    opacity:0;
  }
}