/*===========================================
 * typo
 *===========================================*/

@font-face {
  font-family:Nexa-ExtraBold;
  src: url('../../typo/v2_woff/Nexa-ExtraBold.woff');
}

@font-face {
  font-family:Nexa-Regular;
  src: url('../../typo/v2_woff/Nexa-Regular.woff');
}

@font-face {
  font-family:Nexa-Book;
  src: url('/../../typo/v2_woff/Nexa-Book.woff');
}


 
 
 /*===========================================
 * Common
 *===========================================*/
html, body {
	height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
	font-family: Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 22px;
	color: #444;
	background-color: #eaeaea;
	overflow: hidden;
}
.wrap-page {
	width:100%;
}
.wrap-header {
	position:relative;
	padding:25px 0 50px;
	background:#fcfcfc url("../images/header-bg.jpg") no-repeat center center; 
	background-size:cover;
	border-bottom:1px solid #fff;
}
.header {
	text-align:center;
}
.header-title h1 {
	margin:0;
	font-size:38px;
	font-weight:900;
	letter-spacing:6px;
	color:#fff;
	text-shadow:0px 0px 5px rgba(0,0,0,0.5);
}
.header-subtitle {
	font-size:14px;
	font-weight:bold;
	letter-spacing:4px;
	text-transform:uppercase;
	color:#fff;
	text-shadow:0px 0px 5px rgba(0,0,0,0.5);
}

.wrap-footer {
	padding:10px 0;
	background:#202020;
	color:#fff;
	font-size:12px;
}
.wrap-footer p {
	margin:0;
}
::-webkit-scrollbar {
	width:5px;
}
::-webkit-scrollbar-track {
	background-color:transparent;
}
::-webkit-scrollbar-thumb {
	background-color:rgba(255,255,255,0.6);
}
/*===========================================
 * Additional
 *===========================================*/
.nopadding {
   padding:0 !important;
   margin:0 !important;
}
/*-------------------------------------------*/

.preview {
	position:relative;
	padding:3px;
	margin:30px auto;
	border:1px solid #fff;
	background:#efefef;
	-webkit-box-shadow:0px 0px 10px 0px rgba(0,0,0,0.3);
	-moz-box-shadow:0px 0px 10px 0px rgba(0,0,0,0.3);
	box-shadow:0px 0px 10px 0px rgba(0,0,0,0.3);
	width:600px;
	height:300px;
	z-index:1000;
}



#customBox1 {
	font-family:Nexa-Book;
	position:absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	height: 420px;
	min-width: 320px;
	z-index:1000;
	width:40vw;
	padding:20px 30px 20px 30px;
	border:1px solid #fff;
	border-radius:12px;
	background:rgba(239, 239, 239, 0.3);
	-webkit-box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);
	-moz-box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);
	box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);
	/* font-size:0; */
	display:flex;
	align-items:center;

}

.btn-hp1{
	background-color: #00d66c!important;
	border-color:#00d66c!important;
}

.btn-hp2{
	background-color:#2800a0!important;
	border-color:#2800a0!important;
}


.btn-hp3{
	background-color:rgb(255, 50, 104)!important;
	border-color:rgb(255, 50, 104)!important;
}

/* .insideContainer, .contentDiv {  */
	/* display: inline-block; */
	/* vertical-align: middle; */
/* } */

/* .contentDiv{ */
	/* font-size:14px; */
/* } */


h1 {
	font-family:Nexa-ExtraBold!important;
}

h2 {
	font-family:Nexa-Regular!important;
	font-size:24px!important;
}

h3 {
	font-family:Nexa-Book!important;
	font-size:16px!important;
}

.btn-hp{
	font-family:Nexa-ExtraBold!important;
	font-size:16px!important;
	/*background-color:#2800a0!important;*/
	/*border-color:#2800a0!important;*/
	/* padding: 16px 48px 16px 16px!important; */
	padding: 8px 16px 8px 16px!important;
	border-radius:12px!important;
	color:#ffffff!important;
}

.btn-hp1{
	background-color:#2800a0!important;
	border-color:#2800a0!important;
	/* padding: 16px 48px 16px 16px!important; */
	
}

/* Disabled state for Connexion button (HTML/CSS only) */
.btn-disabled {
	/*pointer-events: none;  prevent mouse click */
	cursor: not-allowed!important; /* visually indicate disabled */
	opacity: 0.5; /* visually muted */
}
.btn-disabled .btn-hp, .btn-disabled button { /* ensure button inside looks disabled */
	filter: grayscale(20%);
	cursor: not-allowed!important;
}
.btn-disabled:focus, .btn-disabled:active, .btn-disabled:focus-visible {
	outline: none;
}

.btn-hp2{
	margin-left:20px;
	background-color:#00d66c!important;
	border-color:#00d66c!important;
	/* padding: 16px 48px 16px 16px!important; */
}

.btn-hp3{
	margin-left:20px;
	background-color:rgb(255, 50, 104)!important;
	border-color:rgb(255, 50, 104)!important;
	/* padding: 16px 48px 16px 16px!important; */
}

.btn-hp a, .btn-hp1 a, .btn-hp2 a {
color:#ffffff!important;
text-decoration:none!important;;
}

.btn-hp:hover, .btn-hp1:hover, .btn-hp2:hover {
	background-color:#5e40b8!important;
	border-color:#2800a0!important;
	text-decoration:none;
	
}

.btn-hp1:hover {
	background-color:#3851c4!important;
	border-color:#2800a0!important;
	text-decoration:none;
	cursor: not-allowed!important;
}

.btn-hp2:hover {
	background-color:#2cdb84!important;
	border-color:#00d66c!important;
	text-decoration:none;
	cursor: not-allowed!important;
}

.btn-hp3:hover {
	background-color:#fd7095!important;
	border-color:rgb(255, 50, 104)!important;
	text-decoration:none;
	
}


.fullscreen-preview {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	min-height: 100vh;
	z-index: 1;
	background-color: #b2b2b2;
	overflow: hidden;
}
#clouds canvas {
	background:#efefef url('../images/bg_day1.jpg') top center;
	background-size:cover;
}

/*-------------------------------------------*/
i.icon {
	padding-right:5px;
}
/*===========================================
 * Text
 *===========================================*/
.wrap-text {
	color:#222;
	font-size:18px;
	line-height:1.5em;
}
.wrap-text h1, 
.wrap-text h2,
.wrap-text h3 {
	margin:0;
	padding:0;
	font-family:'Droid Serif', Georgia, Times, serif;
	font-weight:normal;
}
.wrap-text h1 {
	font-size:42px;
	margin-bottom:35px;
}
.wrap-text  h2 {
	font-size:26px;
	margin-bottom:15px;
}
.wrap-text  h3 {
	font-size:20px;
	margin-bottom:10px;
}
.bg-white {
	background-color:#fff;
}
/*-------------------------------------------*/

/*-------------------------------------------*/

/*-------------------------------------------*/

/*-------------------------------------------*/
.wrap {
	display:inline-block;
	position:relative;
}
/*===========================================
 * Options
 *===========================================*/
/*===========================================
 * Media
 *===========================================*/
@media only screen and (max-width: 767px) {
	.wrap-text {
		font-size:14px;
	}
	.wrap-text h1 {
		font-size:26px;
	}
	.wrap-text h2 {
		font-size:20px;
	}
}