@charset "utf-8";

/* Kaisei Decol - Medium 500 Bold 700 */
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@500;700&display=swap');

/* Yuji Syuku - Regular 400 */
@import url('https://fonts.googleapis.com/css2?family=Yuji+Syuku&display=swap');



.cleaner {
	clear: both;
	height: 1px !important;
	background: transparent;
	list-style-type: none;
}



/****************************/
/*** FONT size 1em = 12pt = 16px = 100% ***/


html, body {
	height: 100%;
	font-family: 'Kaisei Decol', sans-serif;
	color: #333;
	font-size: 16px;
	line-height: 1.5rem;
	background-color: #FFFFFF;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.7);
}

.title {
	font-family: 'Yuji Syuku', serif;
	font-size: 32px;
}

header {
	position: relative;
}

.zoom {
	overflow: hidden;
   padding-bottom: 60%;
	background-image: url(../img/bg_01.png);
	background-position: top center;
	background-attachment: fixed;
   background-repeat: no-repeat;
   background-size: cover;
}

 
.logo {
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*background-color: lime;*/
}

.logo img {
	/*max-width: 100%;
	height: auto;*/
	position: relative;
	top: 0%;
	left: 50%;
	transform: translateX(-50%);
}



h1 {
	color: #8e6ab3;
	font-size: 20px;
	position: relative;
	text-align: center;
}

h2 {
	background: -webkit-linear-gradient(#caafdb, #f1db95);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 28px;
	position: relative;
	text-align: center;
	
}

main {
	position: relative;
	background: url(../img/bg_02.jpg) repeat top;
	padding: 40px 0 30px;
}


@media screen and (max-width: 576px) {
	.logo {
		top: 50%;
	}
	
	.logo img {
		max-width: 40%;
		height: auto;
	}
}

@media screen and (max-width: 768px) {
	.logo {
		top: 50%;
	}
	
	.logo img {
		max-width: 60%;
		height: auto;
		
		/*display: block;
		margin-left: auto;
		margin-right: auto;
		background-color: blue;*/
	}
}

@media screen and (max-width: 1024px) {
	.zoom {
		overflow: hidden;
   	padding-bottom: 60%;
	}
	
	.logo {
		top: 50%;
	}
	
	.logo img {
		max-width: 80%;
		height: auto;
		
		/*display: block;
		margin-left: auto;
		margin-right: auto;
		background-color: red;*/
	}
}




.card {
	background-color: rgba(255, 255, 255, 0.7);
}

.list_num {
	list-style: decimal outside;
}

.list_dot {
	list-style: disc outside;
}


/************************************/

/**
.bg_shadow {
	/*padding: 15px 0 15px 0;*/
/*	position: relative;
	background: #fff;
	box-shadow: 0px -10px 60px rgba(0,0,0,0.25);
	margin: 60px 0 60px 0;
}*/

.out_video {
	position: relative;
}

video {
	position: relative;
	min-width: 100%;
	max-height: 100%;
	width: 100%;
	height: auto;
	z-index: -100;
	bottom: 0;
	top: 0;
}

.ovarlay_video {
	position: absolute;
	max-height: 100%;
	max-width: 100%;
	width: 100%;
	height: 100%;
	z-index: 10;
	bottom: 0;
	left: 0;
}


/***************************************/

/*
.row {
	text-align: center;
}

.row-L {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
       flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
	text-align: left;
}*/



.bg_b {
   background-color: #000000;
}





/*****************************************/


.space-50 {
	padding-top: 50px;
}

/******************************************/

.bg-faded {
    background-color: rgba(226, 210, 218, 0.9);
}

.bg-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}


/*******************************************/

.header-title {
	font-size: 3.75vw;
}

.txt-w {
	color: #FFFFFF;
} 

.txt-shadow {
	text-shadow: 0 0 3px #666666, 0 0 5px #666666;
	
	/*** Text-shadow with red and blue neon glow ***
	text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;*/
}

/******************************************/


/*************************************/



a.red, .red {
	color: #FF0000;
	text-decoration: none;
}

a.red:hover {
  color: #FFFFFF;
  filter:alpha(opacity=80);
  opacity:0.8;
  text-decoration: underline;
}


/***************************************/



/* -------------------------------------*/


/******** Font Awesome icon Color *********/

.icon_link, .icon_link_red {
  width:40px;
  margin:auto;
  display: inline-block
  /*height:36px;
  background-color:green;*/
}

.icon_link span, .icon_link_red span {
    text-align:center;
    display: inline-block;
    width:100%;
    height:100%;
    /*padding-top:10px;*/
}

.icon_link a {
   color:#83baff;/*#89c8da*/
    height:100%;
    display:block;
}

.icon_link:hover {
   color:#c8e3ff;
    transition: color .25s, background .25s;
}

/* To use a transition for 'color'. */
.icon_link a {
   transition: color .25s;
}

.icon_link:hover a {
  color: #c8e3ff;
}



/***************************************/



/*** Footer ***/
.col-2foot-l, .col-2foot-r {
	font-family: 'Julius Sans One';
	font-size: 12px;
	text-align: center;
	color: #FFFFFF;
	padding: 20px 20px 20px 20px;
}



/*-- CENTERING A DIV IN A PAGE --*/
.content-in-1, .content-in-2, .content-in-3, .content-in-4, .content-in-5 {
	margin: 0 auto;
}
/*-------------------------------*/



/********** Form Submit Button **********/
.btn-custom {
  color: #fff;
  background-color: #FF0000;
  border-color: #FF0000;
}

.btn-custom:hover {
  color: #FF0000;
  background-color: #FFFFFF;
  border-color: #FFFFFF;
}

.btn-custom:focus, .btn-custom.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-custom.disabled, .btn-custom:disabled {
  background-color: #FF0000;
  border-color: #FF0000;
}

.btn-custom:not([disabled]):not(.disabled):active, .btn-custom:not([disabled]):not(.disabled).active,
.show > .btn-custom.dropdown-toggle {
  color: #FF0000;
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}


/***** Online Form *****/

.col-2form {
	position: relative;
	width: 100%;
	min-height: 1px;
	padding-right: 15px;
	padding-left: 15px;
}



/*==============================
    SPAM Honey-Pot 2 of 3
==============================*/
/* https://elasticemail.com/blog/marketing_tips/how-to-prevent-bots-from-spamming-your-sign-up-forms/ */
.dispnon {
	display: none
}


/*************************************/
