/*********************************************************************
generic css for flexbox
***********************************************************************/
*, :before, :after {
	box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
body, html{
	margin: 0;
	padding: 0;
	position: relative;
	/* height: 100%; */ /*animation detection will break */
}
.hide{
    display: none !important;
}

.flex{
	display: flex;
	flex-wrap: wrap;
}
.flex.flex-nowrap{
	flex-wrap: nowrap !important;
}
.flex-vert{
	flex-direction: column;
}
.flex-hcenter{
	justify-content: center;
}
.flex-hbetween{
	justify-content: space-between;
}
.flex-heven{
	justify-content: space-evenly;
}
.flex-hright{
	justify-content: flex-end;
}
.flex-vcenter{
	align-items: center;
}
.flex.flex-vfiller{
	flex: 1;
	flex-direction: row;
}
.flex.flex-hfiller{
	flex: 1;
	/*flex-direction: column;*/
}
.col.col-5{
	flex: 0 5%;
	width: 5%;
}
.col.col-10{
	flex: 0 10%;
	width: 10%;
}
.col.col-15{
	flex: 0 15%;
	width: 15%;
}
.col.col-16{
	flex: 0 16.6%;
	width: 16.6%;
}
.col.col-20{
	flex: 0 20%;
	width: 20%;
}
.col.col-25{
	flex: 0 25%;
	width: 25%
}
.col.col-30{
	flex: 0 30%;
	width: 30%;
}
.col.col-33{
	flex: 0 33.3%;
	width: 33.3%;
}
.col.col-35{
    flex: 0 35%;
    width: 35%;
}
.col.col-40{
	flex: 0 40%;
	width: 40%;
}
.col.col-45{
	flex: 0 45%;
	width: 45%;
}
.col.col-50{
	flex: 0 50%;
	width: 50%;
}
.col.col-55{
    flex: 0 55%;
    width: 55%;
}
.col.col-60{
    flex: 0 60%;
    width: 60%;
}
.col.col-65{
    flex: 0 65%;
    width: 65%;
}
.col.col-66{
	flex: 0 66.6%;
	width: 66.6%;
}
.col.col-70{
	flex: 0 70%;
	width: 70%;
}
.col.col-75{
	flex: 0 75%;
	width: 75%
}
.col.col-80{
	flex: 0 80%;
	width: 80%;
}
.col.col-85{
	flex: 0 85%;
	width: 85%;
}
.col.col-90{
    flex: 0 90%;
    width: 90%;
}
.col.col-95{
    flex: 0 95%;
    width: 95%;
}
.col.col-100{
	flex: 0 100%;
	width: 100%;
}	

@media only screen and (max-width: 600px){
	.flex-xs-hide{
		display: none !important;
	}
	.flex-xs-show{
		display: flex !important;
	}
	.col-xs-show{
		display: block;
	}
	.col-xs-hide{
		display: none;
	}
	.col.col-xs-5{
		flex: 0 5%;
		width: 5%;
	}
	.col.col-xs-10{
		flex: 0 10%;
		width: 10%;
	}
	.col.col-xs-15{
		flex: 0 15%;
		width: 15%;
	}
	.col.col-xs-16{
		flex: 0 16.6%;
		width: 16.6%;
	}
	.col.col-xs-20{
		flex: 0 20%;
		width: 20%;
	}
	.col.col-xs-25{
		flex: 0 25%;
		width: 25%;
	}
	.col.col-xs-30{
		flex: 0 30%;
		width: 30%;
	}
	.col.col-xs-33{
		flex: 0 33.3%;
		width: 33.3%;
	}
	.col.col-xs-35{
		flex: 0 35%;
		width: 35%;
	}
	.col.col-xs-40{
		flex: 0 40%;
		width: 40%;
	}
	.col.col-xs-45{
		flex: 0 45%;
		width: 45%;
	}
	.col.col-xs-50{
		flex: 0 50%;
		width: 50%;
	}
	.col.col-xs-55{
		flex: 0 55%;
		width: 55%;
	}
	.col.col-xs-60{
		flex: 0 60%;
		width: 60%;
	}
	.col.col-xs-65{
		flex: 0 65%;
		width: 65%;
	}
	.col.col-xs-66{
		flex: 0 66.6%;
		width: 66.6%;
	}
	.col.col-xs-70{
		flex: 0 70%;
		width: 70%;
	}
	.col.col-xs-75{
		flex: 0 75%;
		width: 75%;
	}
	.col.col-xs-80{
		flex: 0 80%;
		width: 80%;
	}
	.col.col-xs-85{
		flex: 0 85%;
		width: 85%;
	}
	.col.col-xs-90{
		flex: 0 90%;
		width: 90%;
	}
	.col.col-xs-95{
		flex: 0 95%;
		width: 95%;
	}
	.col.col-xs-100{
		flex: 0 100%;
		width: 100%;
	}
}
/* sm */
@media only screen and (min-width: 600px){
	.flex-sm-hide{
		display: none !important;
	}
	.flex-sm-show{
		display: flex !important;
	}
	.col-sm-show{
		display: block;
	}
	.col-sm-hide{
		display: none;
	}
	.col.col-sm-5{
		flex: 0 5%;
		width: 5%;
	}
	.col.col-sm-10{
		flex: 0 10%;
		width: 10%;
	}
	.col.col-sm-15{
		flex: 0 15%;
		width: 15%;
	}
	.col.col-sm-16{
		flex: 0 16.6%;
		width: 16.6%;
	}
	.col.col-sm-20{
		flex: 0 20%;
		width: 20%;
	}
	.col.col-sm-25{
		flex: 0 25%;
		width: 25%;
	}
	.col.col-sm-30{
		flex: 0 30%;
		width: 30%;
	}
	.col.col-sm-33{
		flex: 0 33.3%;
		width: 33.3%;
	}
	.col.col-sm-35{
		flex: 0 35%;
		width: 35%;
	}
	.col.col-sm-40{
		flex: 0 40%;
		width: 40%;
	}
	.col.col-sm-45{
		flex: 0 45%;
		width: 45%;
	}
	.col.col-sm-50{
		flex: 0 50%;
		width: 50%;
	}
	.col.col-sm-55{
		flex: 0 55%;
		width: 55%;
	}
	.col.col-sm-60{
		flex: 0 60%;
		width: 60%;
	}
	.col.col-sm-65{
		flex: 0 65%;
		width: 65%;
	}
	.col.col-sm-66{
		flex: 0 66.6%;
		width: 66.6%;
	}
	.col.col-sm-70{
		flex: 0 70%;
		width: 70%;
	}
	.col.col-sm-75{
		flex: 0 75%;
		width: 75%;
	}
	.col.col-sm-80{
		flex: 0 80%;
		width: 80%;
	}
	.col.col-sm-85{
		flex: 0 85%;
		width: 85%;
	}
	.col.col-sm-90{
		flex: 0 90%;
		width: 90%;
	}
	.col.col-sm-95{
		flex: 0 95%;
		width: 95%;
	}
	.col.col-sm-100{
		flex: 0 100%;
		width: 100%;
	}
}
/* md */
@media only screen and (min-width: 768px){
	.flex-md-hide{
		display: none !important;
	}
	.flex-md-show{
		display: flex !important;
	}
	.col-md-show{
		display: block;
	}
	.col-md-hide{
		display: none;
	}
	.col.col-md-5{
		flex: 0 5%;
		width: 5%;
	}
	.col.col-md-10{
		flex: 0 10%;
		width: 10%;
	}
	.col.col-md-15{
		flex: 0 15%;
		width: 15%;
	}
	.col.col-md-16{
		flex: 0 16.6%;
		width: 16.6%;
	}
	.col.col-md-20{
		flex: 0 20%;
		width: 20%;
	}
	.col.col-md-25{
		flex: 0 25%;
		width: 25%;
	}
	.col.col-md-30{
		flex: 0 30%;
		width: 30%;
	}
	.col.col-md-33{
		flex: 0 33.3%;
		width: 33.3%;
	}
	.col.col-md-35{
		flex: 0 35%;
		width: 35%;
	}
	.col.col-md-40{
		flex: 0 40%;
		width: 40%;
	}
	.col.col-md-45{
		flex: 0 45%;
		width: 45%;
	}
	.col.col-md-50{
		flex: 0 50%;
		width: 50%;
	}
	.col.col-md-55{
		flex: 0 55%;
		width: 55%;
	}
	.col.col-md-60{
		flex: 0 60%;
		width: 60%;
	}
	.col.col-md-65{
		flex: 0 65%;
		width: 65%;
	}
	.col.col-md-66{
		flex: 0 66.6%;
		width: 66.6%;
	}
	.col.col-md-70{
		flex: 0 70%;
		width: 70%;
	}
	.col.col-md-75{
		flex: 0 75%;
		width: 75%;
	}
	.col.col-md-80{
		flex: 0 80%;
		width: 80%;
	}
	.col.col-md-85{
		flex: 0 85%;
		width: 85%;
	}
	.col.col-md-90{
		flex: 0 90%;
		width: 90%;
	}
	.col.col-md-95{
		flex: 0 95%;
		width: 95%;
	}
	.col.col-md-100{
		flex: 0 100%;
		width: 100%;
	}
	.col.col-md-initial{
		flex: initial;
		width: fit-content;
	}
	.col.col-md-fill{
		flex: 1;
	}
}
/* lg */
@media only screen and (min-width: 992px){
	.flex-lg-hide{
		display: none !important;
	}
	.flex-lg-show{
		display: flex !important;
	}
	.col-lg-show{
		display: block;
	}
	.col-lg-hide{
		display: none;
	}
	.col.col-lg-5{
		flex: 0 5%;
		width: 5%;
	}
	.col.col-lg-10{
		flex: 0 10%;
		width: 10%;
	}
	.col.col-lg-15{
		flex: 0 15%;
		width: 15%;
	}
	.col.col-lg-16{
		flex: 0 16.6%;
		width: 16.6%;
		max-width: 16.6%;
	}
	.col.col-lg-20{
		flex: 0 20%;
		width: 20%;
		max-width: 20%;
	}
	.col.col-lg-25{
		flex: 0 25%;
		width: 25%;
		max-width: 25%;
	}
	.col.col-lg-30{
		flex: 0 30%;
		width: 30%;
	}
	.col.col-lg-33{
		flex: 0 33.3%;
		width: 33.3%;
		max-width: 33.3%;
	}
	.col.col-lg-35{
		flex: 0 35%;
		width: 35%;
		max-width: 35%;
	}
	.col.col-lg-40{
		flex: 0 40%;
		width: 40%;
	}
	.col.col-lg-45{
		flex: 0 45%;
		width: 45%;
	}
	.col.col-lg-50{
		flex: 0 50%;
		width: 50%;
		max-width: 50%;
	}
	.col.col-lg-55{
		flex: 0 55%;
		width: 55%;
	}
	.col.col-lg-60{
		flex: 0 60%;
		width: 60%;
	}
	.col.col-lg-65{
		flex: 0 65%;
		width: 65%;
	}
	.col.col-lg-66{
		flex: 0 66.6%;
		width: 66.6%;
	}
	.col.col-lg-70{
		flex: 0 70%;
		width: 70%;
	}
	.col.col-lg-75{
		flex: 0 75%;
		width: 75%;
	}
    .col.col-lg-80{
        flex: 0 80%;
        width: 80%;
    }
	.col.col-lg-85{
		flex: 0 85%;
		width: 85%;
	}
	.col.col-lg-90{
		flex: 0 90%;
		width: 90%;
	}
	.col.col-lg-95{
		flex: 0 95%;
		width: 95%;
	}
	.col.col-lg-100{
		flex: 0 100%;
		width: 100%;
	}
}
/* xl */
@media only screen and (min-width: 1200px){
	.flex-xl-hide{
		display: none !important;
	}
	.flex-xl-show{
		display: flex !important;
	}
	.col-xl-show{
		display: block;
	}
	.col-xl-hide{
		display: none;
	}
	.col.col-xl-5{
		flex: 0 5%;
		width: 5%;
	}
	.col.col-xl-10{
		flex: 0 10%;
		width: 10%;
	}
	.col.col-xl-15{
		flex: 0 15%;
		width: 15%;
	}
	.col.col-xl-16{
		flex: 0 16.6%;
		width: 16.6%;
	}
	.col.col-xl-20{
		flex: 0 20%;
		width: 20%;
	}
	.col.col-xl-25{
		flex: 0 25%;
		width: 25%;
	}
	.col.col-xl-30{
		flex: 0 30%;
		width: 30%;
	}
	.col.col-xl-33{
		flex: 0 33.3%;
		width: 33.3%;
	}
	.col.col-xl-35{
		flex: 0 35%;
		width: 35%;
	}
	.col.col-xl-40{
		flex: 0 40%;
		width: 40%;
	}
	.col.col-xl-45{
		flex: 0 45%;
		width: 45%;
	}
	.col.col-xl-50{
		flex: 0 50%;
		width: 50%;
	}
	.col.col-xl-55{
		flex: 0 55%;
		width: 55%;
	}
	.col.col-xl-60{
		flex: 0 60%;
		width: 60%;
	}
	.col.col-xl-65{
		flex: 0 65%;
		width: 65%;
	}
	.col.col-xl-66{
		flex: 0 66.6%;
		width: 66.6%;
	}
	.col.col-xl-70{
		flex: 0 70%;
		width: 70%;
	}
	.col.col-xl-75{
		flex: 0 75%;
		width: 75%;
	}
	.col.col-xl-80{
		flex: 0 80%;
		width: 80%;
	}
	.col.col-xl-85{
		flex: 0 85%;
		width: 85%;
	}
	.col.col-xl-90{
		flex: 0 90%;
		width: 90%;
	}
	.col.col-xl-95{
		flex: 0 95%;
		width: 95%;
	}
	.col.col-xl-100{
		flex: 0 100%;
		width: 100%;
	}
}