/***************************************************************
*                                                              *
*                             #########.                       *
*                              ###########                     *
*                              ##########*                     *
*                              #########                       *
*                             .##########.                     *
*                            *############                     *
*                            ##########*        #              *
*                            ##########.  .##. .#              *
*                           #############  ######              *
*                          .########* ... .######              *
*              .     ....###########. *##########              *
*              ##################**##  *########               *
*              ###OPPAI#WORKS###   ....######*                 *
*              #############**###  *########                   *
*              ############*   *    .######                    *
*              **####   *##      ...#######                    *
*                 *#*            ##########*                   *
*                                  *########                   *
*                                                              *
*   Sourcecode by: Christian Deutschland, Oppai Works          *
*   On behalf of: Oppai Works                                  *
*                                                              *
/**************************************************************/

html, body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color: #FFFFFF;
	font-size: 100%;
}
a:visited {}
a:hover,
a:focus {}
a {}

/* custom paddings and margins */
.margin_min {margin: 2px !important;}
.margin_min_r {margin-right: 2px !important;}
.margin_min_l {margin-left: 2px !important;}
.margin_min_t {margin-top: 2px !important;}
.margin_min_b {margin-bottom: 2px !important;}

.margin_neg {margin: -10px !important;}
.margin_neg_r {margin-right: -10px !important;}
.margin_neg_l {margin-left: -10px !important;}
.margin_neg_t {margin-top: -10px !important;}
.margin_neg_b {margin-bottom: -10px !important;}

.padding_min {padding: 2px !important;}
.padding_min_r {padding-right: 2px !important;}
.padding_min_l {padding-left: 2px !important;}
.padding_min_t {padding-top: 2px !important;}
.padding_min_b {padding-bottom: 2px !important;}

.padding_neg {padding: -10px !important;}
.padding_neg_r {padding-right: -10px !important;}
.padding_neg_l {padding-left: -10px !important;}
.padding_neg_t {padding-top: -10px !important;}
.padding_neg_b {padding-bottom: -10px !important;}

/* custom bg colors */
.bg_0 {background-color: transparent !important;}
.bg_1 {background-color: #22292b !important;}
.bg_2 {background-color: #37b0c0 !important;}
.bg_3 {background-color: #2ec0ca !important;}
.bg_4 {background-color: #315d63 !important;}

/* custom button colors */
.btn_1 {background-color: #1e2e40; color: #FFFFFF;}
.btn_1:hover {background-color: #2a7ac4; color: #FFFFFF;}
.btn_1_rev {background-color: #2a7ac4; color: #FFFFFF;}
.btn_1_rev:hover {background-color: #1e2e40; color: #FFFFFF;}
.btn_2 {background-color: #62b6ff; color: #FFFFFF;}
.btn_2:hover {background-color: #65afff; color: #FFFFFF;}

/* main structure */
.main {
	height: 100%;
	width: 100%;
}
.header {
	z-index: 100;
}
.header_sub {}
.nav-item > a {color: #FFFFFF;}
.content {
	z-index: 50;
	width: 100%;
	height: 100vh;
}
.content_sub {
	display: flex !important;
	align-items: stretch !important;
	padding: 160px 0;
	min-width: 80%;
	min-height: 100vh;
	text-align: center;
}
.content_sub > div {
	display: flex;
	align-items: center !important;
	font-size: 1.2em;
}
.content_sub > div > p {}

.divider {
	align-self: stretch;
}
.divider > div {
	position: relative;
	height: 100%;
}
.divider > div > a {}
.divider > div > a > div {}
.divider_string {
	display: flex;
	width: 2px !important;
	background-color: #1e2e40 !important;
	margin: 0 auto;
	height: 100%;
}
.divider_circle {
	width: 20px !important;
	height: 20px !important;
	background-image: url(../img/sigs/Divider.png);
	background-position: center;
	background-repeat: no-repeat;
	margin: 0 auto;
}
.divider_arrow_down {
	z-index: 60;
	width: 20px !important;
	height: 20px !important;
	border: 2px solid transparent;
	border-radius: 12px;
	background-image: url(../img/sigs/Site_Down.png);
	background-position: center;
	background-repeat: no-repeat;
	margin: 0 auto;
}
.divider_arrow_down:focus,
.divider_arrow_down:hover {
	border: 2px solid #1e2e40;
	border-radius: 12px;
}
.divider_arrow_up {
	z-index: 60;
	width: 20px !important;
	height: 20px !important;
	border: 2px solid transparent;
	border-radius: 12px;
	background-image: url(../img/sigs/Site_Up.png);
	background-position: center;
	background-repeat: no-repeat;
	margin: 0 auto;
}
.divider_arrow_up:focus,
.divider_arrow_up:hover {
	border: 2px solid #1e2e40;
	border-radius: 12px;
}
.footer {
	z-index: 100;
	min-height: 25px;
	width: 100%;
	bottom: 0;
	margin: 0 auto;
}
@media(max-width: 499px) {
	#grid_desktop {}
	#grid_mobile {}
}
@media(min-width: 500px) {
	#grid_desktop {}
	#grid_mobile {}
}
@media(max-width: 575px) {
}
@media(min-width: 576px) {
}

/* Alignments ----------------------------------------------------------------------------------- */
.absolute_center {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

/* Parallax Scroll ----------------------------------------------------------------------------------- */

/* FullPage Scroll ----------------------------------------------------------------------------------- */

@media(max-height: 600px) {
	#hello_graphic_index {}
	#hello_text_index {}
}
@media(min-height: 601px) {
	#G_Logo_Index {}
}
@media(max-width: 767px) {
	.content_sub_left {display: none;}
	.content_sub_right {display: none;}
}
@media(min-width: 768px) {
	.content_sub > div {width: 100%;}

}

/* Box buttons ----------------------------------------------------------------------------------- */
/*  Used only once ----------------------------------------------------------------------------------- */
/*  --- Index --- */
.fp_bg_1_top {
	background-image: url(../img/bg_top.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: -10;
	position: fixed;
	min-width: 100%;
	height: 50vh;
	top: 0;
}
.fp_bg_1_bottom {
	background-image: url(../img/bg_bottom.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: -11;
	position: fixed;
	min-width: 100%;
	height: 50vh;
	bottom: 0;
}
.hello {
	position: relative;
	background-color: rgba(255,255,255,0.7) !important;
	max-height: 100vh;
	height: 100vh;
	width: 100%;
	padding: 150px 0;
}
.hello > div {
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.icon_scroll {
    width: 50px;
    height: 50px;
}
/*  --- ??? --- */


/*  Graphics ----------------------------------------------------------------------------------- */
.g_center {
	margin: 0 auto;
	vertical-align: center;
}
#G_Logo_Header {max-height: 35px;}
#G_Logo_Index {
	display: absolute;
	max-width: 55%;
	max-height: 40%;
	animation-name: Pantsu_Breathing;
	animation-duration: 4s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in-out;
	
}
#G_Top {height: 1rem;}
#G_Btn_Scroll {width: 50px;}

@media(max-width: 575px) {}
@media(min-width: 576px) {}

/*  CSS Animations ----------------------------------------------------------------------------------- */
@keyframes Pantsu_Breathing {
	from {max-width: 55%;	max-height: 40%;}
	to {max-width: 60%;	max-height: 45%;}
}