/*
 * Row with equal height columns
 * --------------------------------------------------
 */
/*@import url(//fonts.googleapis.com/earlyaccess/notosanssc.css);
@font-face {
  font-family: 'Noto Sans SC';
  font-style: normal;
  src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansSC-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansSC-Light.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansSC-Light.otf) format('opentype');
}*/

.navbar-collapse {
    /* max-height: 340px; */
    overflow-x: visible;
    padding-right: 0;
    padding-left: 0;
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    -webkit-overflow-scrolling: touch;
}
.flex-container{
	display: -webkit-flex; /* Safari */		
	display: flex; /* Standard syntax */
}

.overlay{
	width:100%;
	height: 100%;
	background: #000;
	opacity: 0.5;
	z-index: 1000;
	position: absolute;
	overflow: hidden;
	
}

.topHeader .container {
	padding: 15px;
}

#mobiletop.topHeader {
	display: none;
}
#desktop.topHeader {
		display: block;
	}
.wrap-sticky nav.navbar.bootsnav.sticked #desktop.topHeader {
	display: none;
}

@media screen and (max-width: 992px){
	#mobiletop.topHeader {
		display: block;
	}
	#desktop.topHeader {
		display: none;
	}
	
	/*.wrap-sticky nav.navbar.bootsnav.sticked #desktop.topHeader {
	display: block;
}*/

}
.brandContentNav .flex-container, #brandContent .flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
}

.brandContentNav .flex-item, #brandContent .flex-item {
    /* background: #fcfcfc; */
    /* padding: 20px; */
    /*width: 25%;*/
    text-align: left;
    cursor: pointer;
}

ul.subNav {
	text-align: left;
	margin-bottom: 10px;
	padding-inline-start: 0;
}

li .navBrand a:hover {
	color: #099EA5;
}

@media screen and (max-width: 1000px) {
	.brandContentNav .flex-item {
		width: 100%;
		text-align: left;
		cursor: pointer;
	}
}
	
.brandImage {
    position: relative;
    /* background-color: #F2F2F2; */
    /* padding-top: 20px; */
}

@media screen and (max-width: 1000px){
	.brandImage {
    	display: none;
	}
}

.brandContentNav .flex-item img {
    max-width: 60%;
    min-width: 150px;
}

.brandContentNav .flex-item label {
    display: none;
}

@media screen and (max-width: 1000px){
	.brandContentNav .flex-item label {
    	display: block;
	}
}
@media screen and (max-width: 1000px){
.brandContentNav .flex-item {
    width: 100%;
    text-align: left;
    cursor: pointer;
}
#dashboard .flex-container .col-1-2{
	-webkit-flex: 1; /* Safari */
	-ms-flex: 1; /* IE 10 */
	flex: 1; /* Standard syntax */
	background: #fff;
}

#dashboard .flex-container .col-1-2:nth-child(odd) {
	margin-right: 20px;
	padding-right:0;
}
}

@media (max-width: 700px){
	.flex-container{
	display: -webkit-block; /* Safari */		
	display: block; /* Standard syntax */
	}
	#dashboard .flex-container .col-1-2:nth-child(odd) {
		margin-bottom:20px;
	}
}
	
#dashboard .col-1-2 .table-responsive .whiteBack table{
	height: 100%;
    max-height: 300px;
	border-collapse: collapse;
    border-spacing: 0;
   display:table;

}
#dashboard .col-1-2:nth-child(odd) .table-responsive .whiteBack table{
	height: 100%;
    max-height: 300px;
	border-collapse: collapse;
    border-spacing: 0;
   display:table;

}

#dashboard .col-1-2 .table-responsive .whiteBacktable td, th {
    text-align: left;
    padding: 0.4em;
    display:table-cell;
    vertical-align:top;
}

#dashboard .col-1-2:nth-child(odd) .table-responsive .whiteBacktable td, th {
    text-align: left;
    padding: 0.4em;
    display:table-cell;
    vertical-align:top;
}


.final {
	text-align: center;
}
.finalTitle {
	margin: 25px auto;
    text-align: center;
	font-family: 'Red Hat Display', 'Noto Sans SC', sans-serif;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #333;
	
}
.final img {
	width:25%;
	text-align: center;
}

.finalText {
	font-family: 'Source Sans Pro', 'Noto Sans SC', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #808080;
    text-align: center;
    margin: 50px auto;
}
/*---------------------------------*/


.padding27{
	padding: 0 27px;
}
.right{
	float:right;
}

.textcenter {
	text-align: center;
}

.loginContainer {
	max-width: 500px;
    width: 40%;
    margin: 0px auto;
	margin-bottom:50px;
	margin-top:100px;
}

.loginContainer .center {
    display: block;
    text-align: center;
    margin-top: 75px;
    margin-bottom: 85px;
    font-size: 17px;
    line-height: 1.4;
}

@media (max-width: 767px){
	.loginContainer {
	
    width: 100%;
    margin: 0px auto;
	margin-bottom:50px;
	margin-top:50px;
	}
}

.registerContainer, .passwordContainer {
	max-width: 80%;
    width: 500px;
    margin: 0px auto;
	margin-bottom:50px;
}


.registerContainer .intro{
	display: block;
	text-align: center;
	margin-top:75px;
	margin-bottom:85px;
	font-size: 17px;
    line-height: 1.4;
}

.registerContainer .buttons{
	display: block;
	text-align: center;
	margin-top:75px;
	margin-bottom:85px;
	font-size: 17px;
    line-height: 1.4;
}

.textSmall {
    font-size: 14px;
}

.textSmallBlue {
	color: #099EA5;
	font-size: 14px;
}

.textSmallGuide {
	color: #c1c1c1;
	font-size: 14px;
	font-weight: 300;
}

.textSmallGrey {
	color: #878787;
	font-size: 85%;
}




.group:after {
  content: "";
  display: table;
  clear: both;
}

.group {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

.topHeader {
	/*position: fixed;*/
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	font-size: 14px;
	font-weight: 300;
	color: #333;
    height: 50px;
	/*background: #f7f7f7;*/ /* Old browsers */
}

.headerRow{
	/*padding-top: 17px;*/
}

.topbar-language .menuselectdiv .ui-button {
	background: url(../images/dropdown2.png) no-repeat right #f7f7f7;
    font-weight: normal;
    color: #333;
	padding: 0 20px;
}

.mobileSide .menuselectdiv .ui-button {
	background: url(../images/dropdown2.png) no-repeat right #f7f7f7;
    font-weight: normal;
    color: #333;
	padding: 0 20px;
}


.topbar-language2 .menuselectdiv .ui-button {
	background: url(../images/dropdown2.png) no-repeat right #f7f7f7;
    font-weight: normal;
    color: #333;
	padding: 0 20px;
}

@media (max-width:992px) {
	nav.bootsnav .container{
		top: -40px;
    width: 10%;
    float: right;
	}
		/*.topbar-language {
			position: relative;
			top: -40px;
		}*/
}

.line{
	position: relative;
	display: block;
	height:1px;
	margin-bottom: 20px;
	top:0;
	width: 100%;
	background: #1d96b9; /* Old browsers */
	background: -moz-linear-gradient(left,  #1d96b9 0%, #57c5c7 74%, #57c5c7 100%, #78ccc6 100%, #57c5c7 100%, #78ccc6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #1d96b9 0%,#57c5c7 74%,#57c5c7 100%,#78ccc6 100%,#57c5c7 100%,#78ccc6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #1d96b9 0%,#57c5c7 74%,#57c5c7 100%,#78ccc6 100%,#57c5c7 100%,#78ccc6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d96b9', endColorstr='#78ccc6',GradientType=1 ); /* IE6-9 */
	/*z-index: 99;*/
	z-index: 1;
}

.dottedline{
	position: relative;
	display: block;
	border-bottom: dotted 1px #d2d2d2;
	margin:10px 0;
	width: 100%;
	
}

.helloMember{
	float: left;
	letter-spacing: 1px;
	font-weight: 600; /*semi-bold*/
	line-height: 1.4;
}
.topMember{
	display: none;
	text-align: center;
	margin: 0 auto;
	font-weight: 600; /*semi-bold*/
	letter-spacing: 1px;
	line-height: 1.4;
}
.plus{
	font-size:30px;
	font-weight: 400;
	line-height: 40px;
	vertical-align: bottom;
}



.logo {
	display: block;
	margin: 0 auto;
	margin-top: 35px;
	margin-bottom: 30px;
	width:132px;
	position: relative;
	/*transition: all 500ms;
    overflow: hidden;*/
	overflow: hidden;
	transition: all 200ms;
}

@media (max-width: 992px) {
	.logo {
		display: none;
	}
	
	#registrationMenu .logo {
		display: block;
	}
}





/*.scrollable {
//  overflow: hidden;
//  position: relative;
//  width: 100%;
//  
//  &.is-scrollable:after {
//		position: absolute;
//		top: 0;
//		left: 100%;
//		width: 50px;
//		height: 100%;
//		border-radius: 10px 0 0 10px / 50% 0 0 50%;
//		box-shadow: -5px 0 10px rgba(0, 0, 0, 0.25);
//		content: '';
//	}
//  
//  // the overflow-er
//  > div {
//		overflow-x: auto;
//    
//    // forces scrollbar for webkit
//    ::-webkit-scrollbar {
//      height: 12px;
//    }
//    
//    ::-webkit-scrollbar-track {
//      background: #f0f0f0;
//      box-shadow: 0 0 2px rgba(0,0,0,0.15) inset;
//    }
//    
//    ::-webkit-scrollbar-thumb {
//      background: #ccc;
//      border-radius: 6px;
//    }
//	}
//}
//*/


/*--------------------------Main Content----------------------------------*/

.subTitle{
	/*margin: 55px auto 70px auto;
	text-align: center;
	font-family: 'Poppins', 'Noto Sans SC', sans-serif;
	font-size: 33px;
	font-weight:600;
	letter-spacing: 2px;
	color:#333;*/
	position: relative;
    padding-top: 135px;
    text-align: center;
    font-family: 'Poppins', 'Noto Sans SC', sans-serif;
    font-size: 60px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #4c4c4c;
    background: transparent;
    /* height: 350px; */
    opacity: 0.9;
}

@media (max-width: 992px) {
	.subTitle{
	margin: 55px auto 40px auto;

	}
}

@media (max-width: 450px) {
	.subTitle{
	margin: 45px auto 30px auto;
	}
}

.contentContainer {
	width: 90%;
	max-width: 1200px;
    margin: 0px auto;
	margin-bottom:50px;
}
@media (max-width: 992px) {
	.contentContainer {
	margin-bottom:20px;	
	}
}

.Contact-form.contentContainer{
    margin-bottom: 0;
}

@media (max-width: 992px) {
	.Contact-form.contentContainer {
        width: 100%;	
	}
}

#ENPCharacter.contentContainer {
	/*display: inline-grid;
    width: 100%;
    max-width: 100%;*/
    margin: 0px auto;
    margin-bottom: 50px;
	background: #f5f5f5;
}

#banner .contentContainer {
	width: 100%;
	max-width: 100%;
	/*max-width: 1600px;*/
	max-height: 600px;
	margin: 0 auto;
	/*margin-bottom: 0;*/
   /* overflow: hidden; */
	}
#banner .contentContainer img {
	width: 100%;
	/*height: 600px;*/
}

#contactbanner .contentContainer {
	width: 100%;
	max-width: 100%;
	max-height: 600px;
	margin: 0 auto;
	}
#contactbanner .contentContainer img {
	width: 100%;
	/*height: 600px;*/
}

#AboutUs .about-founders .contentContainer {
	width: 60%;
	max-width: 870px;
}

@media screen and (max-width: 992px) {
	#AboutUs .about-founders .contentContainer {
		width: 80%;
	}
}

@media screen and (max-width: 700px) {
	#AboutUs .about-founders .contentContainer {
		width: 90%;
	}
}

.bannerBack {
	position: relative;
    display: block;
    width: 100%;
    height: 550px;
    /* background: rgba(0,0,0,0.05); */
    background: #f9f6f4;
    background-image: url(../images/home/SVG/home_back.svg);
    background-size: cover;
    background-position: top left;
    top: -90px;
    background-repeat: no-repeat;
    z-index: 2;
}

.date {
	color: #E3785E;
	font-weight: 700;
	font-family: 'Red Hat Display', 'Noto Sans SC', sans-serif;
	text-transform: uppercase;
}

.overview .bannerBack {
	height: 400px;
	background: #f4edeb;
    background-image: none;
}

#AboutUs .overview .bannerBack {
	height: 100%;
	background: #f4edeb;
    background-image: none;
	display: inline-block;
}

#AboutUs .about-mission-icons .bannerBack, #AboutUs .about-pursuits .bannerBack {
	height: 100%;
	background: #ebe9e2;
    background-image: none;
	display: inline-block;
}

#innerbanner .contentContainer{
	width: 100%;
	max-width: 100%;
	max-height: 350px;
	overflow: hidden;
}
#innerbanner .contentContainer img {
	width: 100%;
}

#BusinessInnerbanner .contentContainer{
	width: 100%;
	max-width: 100%;
}
.Business-banner-img {
	background-image: url(../images/business/banner4.jpg);
	display: block;
	height: 350px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.About-banner-img {
	background-image: url(../images/about/banner2.jpg);
	display: block;
	height: 350px;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

.Brand-banner-img {
	background-image: url("../images/brand/banner.jpg");
	display: block;
	height: 350px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}




	
/*@media screen and (max-width: 699px){
	#banner .contentContainer img {
		height: auto;
    	width: 130%;
	}
}*/
.contentContainer .bottomLink{
	display: block;
	position: relative;
	text-align: center;
	margin-top:70px;
	font-size: 17px;
   /* line-height: 1.4;*/
}
.modal-footer button {
	margin: 0 auto;
}

#SearchModal .contentContainer .bottomLink{
	display: block;
	position: relative;
	text-align: center;
	margin-top:20px;
	font-size: 17px;
   /* line-height: 1.4;*/
}

.groupContainer{
	display: block;
	position: relative;
	width:100%;
	background-color: #f7f7f7;
	padding:40px 0;
	padding-bottom:10px;
}

.subMenu {
	/*width:250px;*/
	width: -webkit-min-content;
 	width: -moz-min-content;
  	width: max-content;
	margin: 0 auto;
}

.legend_container{
	width:40%;
	position: absolute;
	padding-top: 6px;
}

@media (max-width: 992px) {
	.legend_container{
	width:100%;
	position: absolute;
	margin-top: -30px;
}
}

.green_active{
	display: inline-block;
	position: relative;
	width:11px;
	height:11px;
	border-radius: 50%;
	background-color: #a2e261;
	top:0;

}

.orange_inactive{
	display: inline-block;
	width:11px;
	height:11px;
	border-radius: 50%;
	background-color: #ffbc48;
}

.red_terminated{
	display: inline-block;
	width:11px;
	height:11px;
	border-radius: 50%;
	background-color: #ff5f72;
}

.legend_label{
	width:11px;
	height:11px;
	font-size: 14px;
	padding-left: 15px;
	padding-right: 5%;
}

.activity_label{
	padding-left: 15px;
}

.red {
	font-size: 14px;
	color:red;
	line-height: 0;
}

.red a:link,
.red a:visited{
	color: red;
	text-decoration: underline;
}



/*-------------------------End Main Content-------------------------------*/

/*-----------FORM STYLE---------*/
.form-group {
	margin-bottom: 30px;
}

.form-group h4 {
	display: block;
	color:#808080;
	margin-bottom: 10px;
}

.form-check {
	margin-bottom: 30px;
}

.form-check h4 {
	display: block;
	color:#808080;
	margin-bottom: 10px;
}

input[type=text],
input[type=password],
input[type=email],
input[type=search]{
    box-sizing : border-box;
	width: 100%;
}
input[type=radio]{
  position: absolute;
  visibility: hidden;
}
input[type=checkbox]{
  position: absolute;
  visibility: hidden;
}

/*input[type=text]#country,
input[type=text]#area{
	width:80%;
}*/

.groupContainer input[type=checkbox]{
  position: relative;
  /*visibility: visible;*/
  margin-right:5px;
  font-size:11px;
}

.dropdown-menu input[type=checkbox]{
  position: relative;
  visibility: visible;
  margin-right:5px;
  font-size:11px;
}


#reports input[type=checkbox]{
  /*position: relative;*/
  visibility: visible;
  /*margin-right:5px;
  font-size:11px;*/
}

input[type=image]{
 	background: none;
	margin-top:15px;
	padding: 0;
}


input {
	font-family: 'Source Sans Pro', 'Noto Sans SC', sans-serif;
	font-size:15px;
    /*width: 100%;*/
	border:none;
	background: #f7f7f7;
	padding: 12px 10px;
	color:#333;
}

input[type="text"]:disabled {
	/*color: #808080;
	-webkit-color: #808080; 
    -webkit-opacity: 1; */
	opacity: .35;
	filter:Alpha(Opacity=35); /* support: IE8 */
	background-image: none;
}

::-webkit-input-placeholder { /* Chrome */
  font-weight: 300;
  color:#adadad;
}
:-ms-input-placeholder { /* IE 10+ */
  font-weight: 300;
	color:#adadad;
}
::-moz-placeholder { /* Firefox 19+ */
  font-weight: 300;
	color:#adadad;
  opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
  font-weight: 300;
	color:#adadad;
  opacity: 1;
}

.form-group select {
	font-family: 'Source Sans Pro','Noto Sans SC',  sans-serif;
	font-size:15px;
	width:100%;
	padding: 10px 20px;
}
.form-check select {
	font-family: 'Source Sans Pro', 'Noto Sans SC',  sans-serif;
	font-size:15px;
	width:100%;
	padding: 10px 20px;
}

 .text label  {
  
  position: relative;
  padding-left: 0px;
  margin-right: 0px;
  font-size: 15px;
  color: #808080;
	 cursor: none;
}
.text label:before {
  display:none;
  margin-right: 0px;
  left: 0;
  bottom: 1px;
}


.form-check label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  margin-right: 15px;
  font-size: 15px;
  color: #808080;
}

.form-check label:before {
  content: "";
  top:3px;
  display: inline-block;
   width: 16px;
  height: 16px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: #ECECEC;
}

.form-check input[type=checkbox]:checked + label:before {
    /*content: "\2714";*/
	content: url(../images/tick.png);
    font-size: 15px;
    text-align: center;
    line-height: 15px;
}

.form-check ul {
	padding-left:20px;
}

input[type=checkbox]:checked + label:before {
    /*content: "\2714";*/
	content: url(../images/tick.png);
    font-size: 15px;
    text-align: center;
    line-height: 15px;
}

.table-wrapper input[type=checkbox]:checked + label:before {
    /*content: "\2714";*/
	content: "";
    font-size: 15px;
    text-align: center;
    line-height: 15px;
}


input[type=checkbox]:checked + label {
    color: #000000;
    font-size: 15px;
}


.form select {
	font-family: 'Source Sans Pro', 'Noto Sans SC', sans-serif;
	font-size:15px;
	width:100%;
	padding: 10px 20px;
}


.form-radio select {
	font-family: 'Source Sans Pro', 'Noto Sans SC', sans-serif;
	font-size:15px;
	width:100%;
	padding: 10px 20px;
	font-size:15px;
}

.form-radio label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  margin-right: 15px;
  font-size: 15px;
  color: #808080;
}

#step2Div .form-radio label {
  display: inline;
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  margin-right: 15px;
  font-size: 15px;
  color: #808080;
}

.form-radio label:before {
  content: "";
  display: inline-block;
  border-radius: 8px;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: #ECECEC;
}


input[type=radio]:checked + label:before {
    content: "\2022";
    color: #808080;
    font-size: 34px;
    text-align: center;
    line-height: 11px;
}

input[type=radio]:checked + label {
    color: #000000;
    font-size: 15px;
}

.position {
	font-size:17px;
}
/*----------------------End Form Style----------------------*/

/*----------------------HELP TOOLTIP----------------------*/
.help-tip_header{
	float:left;
	margin-top:0;
}
.help-tip{
	float:left;
	position:relative;
    text-align: center;
    border-radius: 50%;
	border: 1px solid #808080;
    width: 13px;
    height: 13px;
    font-size: 11px;
    line-height: 11px;
	margin-top: 25px;
	margin-left: 10px;
    cursor: default;

}

.help-tip:before{
	font-family: 'Source Sans Pro', 'Noto Sans SC', sans-serif;
    content:'?';
    font-weight: 600;
    color:#808080;
}

.help-tip:hover p{
    display:block;
    transform-origin: 100% 0%;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.help-tip p{    /* The tooltip */
    display: none;
    text-align: left;
    background-color: #808080;
    padding: 20px;
    width: 300px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    left: -10px;
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
	cursor: pointer;
}

.help-tip p:before{ /* The pointer of the tooltip */
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-bottom-color:#808080;
    left:10px;
    top:-12px;
}

.help-tip p:after{ /* Prevents the tooltip from being hidden */
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:-40px;
    left:0;
}
/*----------------------END HELP TOOLTIP----------------------*/

/*----------------------INFO TOOLTIP----------------------*/
/*.info_header{
	float:left;
	margin-top:0;
}*/
.info-tip{
	/*float:left;*/
	display: inline-block;
	position:relative;
    text-align: center;
    border-radius: 50%;
	border: 1px solid #808080;
    width: 13px;
    height: 13px;
    font-size: 11px;
    line-height: 11px;
	margin-top: 4px;
    cursor: default;
}

.info-tip:before{
	font-family: 'Source Sans Pro', 'Noto Sans SC', sans-serif;
    content:'i';
    font-weight: 400;
	padding-left: 1px;
    color:#808080;
}

.info-tip:hover p{
    display:block;
    transform-origin: 100% 0%;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;

}

.info-tip p{    /* The tooltip */
    display: none;
    text-align: left;
    background-color: #808080;
    padding: 10px;
    width: 300px;
    position: absolute;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    left: 20px;
    color: #FFF;
    font-size: 13px;
    line-height: 1.4;
	margin-top:-25px;
	cursor: pointer;
	font-weight: normal;
	white-space:normal;
}

.info-tip p:before{ /* The pointer of the tooltip */
    position: absolute;
    content: '';
    width:0;
    height: 0;
    border:6px solid transparent;
    border-right-color:#808080;
    left:-12px;
    top:13px;
}

.info-tip p:after{ /* Prevents the tooltip from being hidden */
    width:100%;
    height:40px;
    content:'';
    position: absolute;
    top:-40px;
    left:0;
}

@media screen and (max-width: 700px){
	.info-tip p{    /* The tooltip */
    white-space: normal;
	}
}
	
/*----------------------END HELP INFO TOOLTIP----------------------*/



/*-----------------------Popover ----------------------------------*/
.container {padding:20px;}
.popover {
	max-width:400px;
	z-index: 999999999;
}

#popover-content-logout > * {
  background-color:#ff0000 !important;
}

/*------------------- end ----------------------------/


/*--------------------------Footer---------------------------*/
.link, .sitemaplink{
	font-family: 'Noto Sans SC', sans-serif;
	color: #2A95BB;
	font-weight: 600;

	padding-left: 5px;
}

.link {
    font-size: 15px;
    letter-spacing: 1px;
}
.buttonlink {
	font-family: 'Source Sans Pro', 'Noto Sans SC', sans-serif;
	display: inline-block;
    font-size: 20px;
    font-weight: 700;
	background: #fff;
    /*letter-spacing: 1px;*/
    /* text-align: center; */
    /*border: 0;*/
    padding: 10px 30px;
    margin-bottom: 50px;
    color: #9E5C57;
    border-radius: 50px;
    /* margin-top: 20px; */
    border: 1px solid #9E5C57;
}

#Product .buttonlink {
	font-family: 'Red Hat Display', 'Noto Sans SC', sans-serif;
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    background: #D7C0B4;
    padding: 10px 20%;
    margin-bottom: 50px;
    color: #004177;
    border-radius: 50px;
    border: none;
}

#AboutUs .buttonlink {
	/*font-family: 'Red Hat Display', 'Noto Sans SC', sans-serif;
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    background: #D7C0B4;
    padding: 10px 20%;
    margin-bottom: 50px;
    color: #004177;
    border-radius: 50px;
    border: none;*/
}

a.buttonlink:hover {
	color: #9E5C57;
}

.content3 .buttonlink {
	margin-top: 30px;
	width: 100%;
}


.sitemaplink {
	font-family: 'Red Hat Display', 'Noto Sans SC', sans-serif;
	color: #004177;
	font-size: 18px;
	font-weight: 700;
	padding-left:0;
	padding-bottom:10px;
	display: inline-block;
	/*letter-spacing: 1px;*/
}

.keySubTitle {
	font-family: 'Red Hat Display', 'Noto Sans SC', sans-serif;
	color: #004177;
	font-weight: 700;
	text-align: center;
	font-size: 18px;
	letter-spacing: 1px;
	display: inline-block;
}
/*------------------End Footer----------------*/


/*----------------------GRID----------------------*/
/*BOX SIZING - necessary with grids*/
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}



/*Basic column dimensions/layout */
[class*='col-'] {
	  float: left;
	}

.col-1 {
  width: 100%;
}
.col-1-3 {
	width: 33.3%;
}
/*OTHER SIZES*/
.col-2-3 {
  width: 66.6%;
}

/*#balance .col-2-3 {
	width: 66.6%;
	float:right;
}*/
.col-1-2 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
/*#registration .col-2-4 {
  width: 50%;
	padding-right: 0;
}*/
.col-3-4 {
  width: 75%;
}
.col-1-8 {
  width: 12.5%;
}
.col-7-8 {
  width: 87.5%;
}
.col-1-10 {
  width: 10%;
}
.col-9-10 {
  width: 90%;
}


.grid{
	margin-bottom: 5px;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}

#dashboard .grid{
	
	text-align: center
}
/* Inside Gutters */
[class*='col-'] {
  padding-right: 20px;
}

[class*='col-']:last-child{
  padding-right: 0;
}

/*.period {
  	float: none;
}*/

.contentContainer .col-1-2 .period {
	padding-right: 20px;
	margin-bottom:-20px;
	float: none;
}

.contentContainer .col-1-2 {
  width: 50%;
	margin-bottom: 5px;
}

.contentContainer .col-1-2:nth-child(even) {
  padding-right: 0;
}

.contentContainer .col-1-2:nth-child(odd) {
  padding-right: 20px;
}

.bottomLink .col-1-2 {
  width: 50%;
	margin-top: 0px;
	margin-bottom: 0px;
}



@media screen and (max-width: 700px) {
	
	.contentContainer .col-1-2 {
 		width: 100%;
		margin-bottom: 5px;
	}
	
	.contentContainer .col-1-2 {
  		padding-right: 0;
	}
	
	.contentContainer .col-1-2:nth-child(even) {
  		padding-right: 0px;
	}
	
	.contentContainer .col-1-2:nth-child(odd) {
  		padding-right: 0px;
	}
}

/*----------------------END GRID----------------------*/
/*----------------------------Footer---------------------------------*/

.mainFooter {
	display:block;
	/*position: relative;*/
	width:100%;
	background: #f9f6f4;
    padding-top: 60px;
	/*margin-top: 150px;*/
}

.sitemap {
	display:block;
	width:90%;
	max-width: 1200px;
	margin: 0 auto;
	position:relative;
	padding:0;
}

.sitemap ul {
	max-width: 100%;
	-webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}

.sitemap ul li {
	list-style: none;
	display:block;
	position:relative;
	left:0;
	padding:10px 0px;
	font-weight:bold;
	font-size:13px;
	/*letter-spacing:2px;*/
	color:#565656;
}

.sitemap ul li a {
	font-family: 'Red Hat Display', 'Noto Sans SC', sans-serif;
	color:#D6785E;
	text-decoration: none;
}


	@media (max-width:740px) {
		.sitemap .col-1-4 {
			width:25%;
		}
	}
	@media (max-width:500px) {
		.sitemap .col-3-4 {
			width: 100%;
			padding-right: 0;
		}
		.sitemap .col-1-4 {
			width:100%;
			margin-bottom:20px;
			text-align: center;
    		margin-top: 40px;
			padding-right: 0;
		}
		.sitemap ul li {
			padding-bottom: 0;
		}
		.sitemap .socialmedia.col-1-4 {
			padding-right: 0;
		}
	}


.socialmedia {
	/*width: 50%;
	height:auto;
	margin: 20px auto;*/
	position: relative;
	text-align: right;
}
	@media (max-width:400px) {
		.socialmedia {
			width:100%;
		}
	}

.socialmedia ul {
	
	max-width: 100%;
	-webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}

.socialmedia ul li {
	list-style: none;
	display: inline-block;
	position: relative;
	padding:0px 10px;
}

.socialmedia ul li:last-of-type {
	padding-right: 0;
}

.footergrey {
	display:block;
	width:100%;
	height:auto;
	background: #f9f6f4; 
	position: relative;
	padding: 30px 0;
}

.footergrey .col-1-2:last-of-type {
	padding-right: 0;
		}

	@media (max-width:560px) {
		.footergrey .col-1-2 {
			width:100%;
			margin-bottom:10px;
		}
		.footergrey .terms,
        .footergrey .terms-ch {
			text-align: left;
		}
	}


.footerRow{
	display:block;
	position: relative;
	
}

.footerRow p, .footerRow a {
	font-size:12px;
	color: #000000;
	margin-bottom: 0px;
	margin-block-start: 0;
    margin-block-end: 0;
}

.copyright {
	font-size: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.terms,
.terms-ch {
	text-align: right;
	font-weight: 600;
}

.terms a {
    text-align: right;
    font-weight: 700;
	font-size: 10px;
    color: #004177;
    font-family: 'Red Hat Display', 'Noto Sans SC', sans-serif;
    position: relative;
    text-transform: uppercase;
}

.terms-ch a {
    text-align: right;
    font-weight: 700;
	font-size: 11px;
    color: #004177;
    font-family: 'Red Hat Display', 'Noto Sans SC', sans-serif;
    position: relative;
    text-transform: uppercase;
}


@media screen and (max-width: 24em) {
	.helloMember{
		display: none;
	}
	.registerShortCut{
		display: none;
	}
	.topMember{
		display: block;
	}
	.loginContainer .logo{
		display: block;
	}
	.logo{
		display: none;
	}
	#registrationMenu .logo {
		display: block;
	}
}

/*-------MEMBER TYPE--------*/

#memberType {
	margin-bottom: 1px;
}

#confirmType .typetitle {
	display: block;
	font-family: 'Poppins', 'Noto Sans SC', "微軟正黑體", "Microsoft JhengHei", sans-serif;
	/*padding: 12px 0;
	padding-bottom: 5px;*/
	
	font-size: 30px;
	font-weight:600;
	color:#3d3d3d;
	letter-spacing: 5px;
	text-decoration: none;
	text-align: center; 
}
.memberType {
	max-width: 550px;
	width:80%;
	-webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
	display: block;
	height: 69px;
}

.memberType nav {
	display: block;
	position: relative;
	margin: 0 auto;
}
.memberType nav ul {
	max-width: 1050px;
	-webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
	margin-right: auto;
	margin-left: auto;

}
.memberType nav ul li {
	list-style: none;
	float: left;
	display: block;
	margin-left: 26%;
	text-align: center;	
}

.memberType nav ul li:first-child {
	margin-left: 0px;
}

#memberType nav ul li {
	display: block;
	font-family: 'Poppins', "微軟正黑體", "Microsoft JhengHei", sans-serif;
	padding: 12px 0;
	padding-bottom: 5px;
	
	font-size: 30px;
	font-weight:600;
	color:#3d3d3d;
	letter-spacing: 5px;
	text-decoration: none;
	text-align: center; 
	cursor: pointer;
	/*font-family: 'Poppins', sans-serif;
	padding-left: 0px;
  	padding-right: 0px;
	font-size: 20px;
	font-weight:400;
	color:#333;
	letter-spacing: 5px;
	text-decoration: none;
	display: inline-block;
  	text-align: center;*/ /* optional, smoother */
}

.memberType nav ul li a:hover {
	font-weight:600;
	color:#000000;
	text-decoration: none;
}

#memberType nav ul li .focus {
	font-weight:600;
	color:#000000;
	text-decoration: none;
	-webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
	padding-left: 0px;
  	padding-right: 0px;
}

.bar {
	position:absolute;
	width: 95%;
	height: 5px;
	bottom: 0;
	/*left:0;*/
	background: #1d96b9; /* Old browsers */
	background: -moz-linear-gradient(left,  #1d96b9 0%, #57c5c7 74%, #57c5c7 100%, #78ccc6 100%, #57c5c7 100%, #78ccc6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #1d96b9 0%,#57c5c7 74%,#57c5c7 100%,#78ccc6 100%,#57c5c7 100%,#78ccc6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #1d96b9 0%,#57c5c7 74%,#57c5c7 100%,#78ccc6 100%,#57c5c7 100%,#78ccc6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d96b9', endColorstr='#78ccc6',GradientType=1 ); /* IE6-9 */
		z-index:99;
	-webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
	}

#memberType nav ul li:hover .bar{
		 display:block;
	-webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
 }

#memberType nav ul li .bar {
	display:none;
	position:absolute;
	width: 95%;
	height: 5px;
	bottom: 0;
	/*left:0;*/
	background: #1d96b9; /* Old browsers */
	background: -moz-linear-gradient(left,  #1d96b9 0%, #57c5c7 74%, #57c5c7 100%, #78ccc6 100%, #57c5c7 100%, #78ccc6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #1d96b9 0%,#57c5c7 74%,#57c5c7 100%,#78ccc6 100%,#57c5c7 100%,#78ccc6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #1d96b9 0%,#57c5c7 74%,#57c5c7 100%,#78ccc6 100%,#57c5c7 100%,#78ccc6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d96b9', endColorstr='#78ccc6',GradientType=1 ); /* IE6-9 */
		z-index:99;
	-webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
	}

.memberType nav ul li.focus a  {
	font-family: 'Poppins', 'Noto Sans SC', sans-serif;
	font-size: 30px;
	font-weight:600;
	color:#000000;
	letter-spacing: 5px;
	text-decoration: none;
	display: inline-block;
	padding-left: 0px;
  padding-right: 0px;
  text-align: center; /* optional, smoother */
	-webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}

#memberType nav ul li.focus .bar{
	display: block;
	position:absolute;
	width: 95%;
	height: 5px;
	bottom: 0;
	/*left:0;*/
	background: #1d96b9; /* Old browsers */
	background: -moz-linear-gradient(left,  #1d96b9 0%, #57c5c7 74%, #57c5c7 100%, #78ccc6 100%, #57c5c7 100%, #78ccc6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #1d96b9 0%,#57c5c7 74%,#57c5c7 100%,#78ccc6 100%,#57c5c7 100%,#78ccc6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #1d96b9 0%,#57c5c7 74%,#57c5c7 100%,#78ccc6 100%,#57c5c7 100%,#78ccc6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d96b9', endColorstr='#78ccc6',GradientType=1 ); /* IE6-9 */
		z-index:99;
	-webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
	}

#navcontainer .bar {
	position:relative;
	width: 100%;
	height: 5px;
	bottom: 0;
	/*left:0;*/
	background: #1d96b9; /* Old browsers */
	background: -moz-linear-gradient(left,  #1d96b9 0%, #57c5c7 74%, #57c5c7 100%, #78ccc6 100%, #57c5c7 100%, #78ccc6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #1d96b9 0%,#57c5c7 74%,#57c5c7 100%,#78ccc6 100%,#57c5c7 100%,#78ccc6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #1d96b9 0%,#57c5c7 74%,#57c5c7 100%,#78ccc6 100%,#57c5c7 100%,#78ccc6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d96b9', endColorstr='#78ccc6',GradientType=1 ); /* IE6-9 */
		z-index:99;
	-webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
	}
#navcontainer{
	width:70%;
    margin: 0 auto;
}

#navcontainer ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}

#navcontainer ul li { 
	display: inline-block; 
	width: 40%;
	font-family: 'Poppins', 'Noto Sans SC', sans-serif;
	padding: 0px 0;
	padding-bottom: 0px;
	
	font-size: 30px;
	font-weight:600;
	color:#3d3d3d;
	letter-spacing: 5px;
	text-decoration: none;
	text-align: center; 
	cursor: pointer;
}

#navcontainer ul li:hover{
	color:#333;
	cursor: pointer;
}

#navcontainer ul li .bar {
	display:none;
	
	width:100%;
	height: 5px;
	bottom: 0;
	/*left:0;*/
	background: #1d96b9; /* Old browsers */
	background: -moz-linear-gradient(left,  #1d96b9 0%, #57c5c7 74%, #57c5c7 100%, #78ccc6 100%, #57c5c7 100%, #78ccc6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #1d96b9 0%,#57c5c7 74%,#57c5c7 100%,#78ccc6 100%,#57c5c7 100%,#78ccc6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #1d96b9 0%,#57c5c7 74%,#57c5c7 100%,#78ccc6 100%,#57c5c7 100%,#78ccc6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d96b9', endColorstr='#78ccc6',GradientType=1 ); /* IE6-9 */
		z-index:99;
	-webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
	}
#navcontainer ul li.focus {
	color:#333;
}
#navcontainer ul li.focus .bar{
	display: block;
	position:relative;
	width: 100%;
	height: 5px;
	bottom: 0;
	/*left:0;*/
	background: #1d96b9; /* Old browsers */
	background: -moz-linear-gradient(left,  #1d96b9 0%, #57c5c7 74%, #57c5c7 100%, #78ccc6 100%, #57c5c7 100%, #78ccc6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #1d96b9 0%,#57c5c7 74%,#57c5c7 100%,#78ccc6 100%,#57c5c7 100%,#78ccc6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #1d96b9 0%,#57c5c7 74%,#57c5c7 100%,#78ccc6 100%,#57c5c7 100%,#78ccc6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d96b9', endColorstr='#78ccc6',GradientType=1 ); /* IE6-9 */
		z-index:99;
	-webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
	}

#navcontainer ul li:hover .bar{
		 display:block;
	-webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 0px;
}

.modal {
	background-color: rgba(0,0,0,0.60);
}

#TermsCondition .modal-dialog, 
#TermsCondition .modal-content, 
#TermsCondition .modal-body, 
#PDPP .modal-dialog, 
#PDPP .modal-content, 
#PDPP .modal-body,
.productvideos-modal .modal-dialog, 
/*.productvideos-modal .modal-content,*/
.productvideos-modal .modal-body,
#RegistrationGuide .modal-dialog, 
#RegistrationGuide .modal-content, 
#RegistrationGuide .modal-body {
    height: 97%;
}

.productvideos-modal .modal-dialog {
	width: 80%;
	margin: 0 auto;
}

.productvideos-modal .modal-content {
	background: none;
	box-shadow: none;
	border: none;
}

.productvideos-modal .modal-body {
    text-align: center;
	background: none;
}

.productvideos-modal .close, .productvideos-modal .close:hover {
	color: #fff;
}

.productvideos-modal .close span {
	position: relative;
    top: 20px;
    background: #000;
	border-radius: 50%;
    padding: 0 11.54px;
}

/*----------Slide Show-------*/

.bannerButton{
	/*position: absolute;
    width: 300px;
    margin-top: 10%;
    right: 70%;
	padding-left: 20px;
    float: left;
    z-index: 99;*/
	position: absolute;
    width: 400px;
    /* display: block; */
    margin-top: 110px;
    left: 13%;
    /*padding-left: 13px;*/
    float: left;
    z-index: 99;
}
.bannerButton h1 {
	font-family: 'Red Hat Display', 'Noto Sans SC', sans-serif;
	display: block;
	line-height: 1.1;
	font-size: 80px;
	font-weight:700;
	color:#004177;
	text-align: left;
	/*margin: 30px auto;*/
	margin-top: 0;
    /*margin-bottom: 20px*/
	  background: none; /* Standard syntax */
    /*-webkit-background-clip: none;
    -webkit-text-fill-color: #565656;*/
}


@media (max-width: 992px) {
	.bannerButton h1 {
		font-size: 70px;
	}
	
}

.bannerContainer {
	float: right;
	width: 75%;
	position: relative;
}
.slideshow {
  list-style-type: none;
}

/** SLIDESHOW **/
.slideshow,
.slideshow:after { 
    position: relative;
	background: #ffffff;
    width: 100%;
    height: 650px;
    z-index: 99;
	overflow: hidden;
	border-radius: 20px 0 0 20px;
}

.slideshow li span { 
	position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    right: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 30s linear infinite 0s; 
}

.slideshow li:nth-child(1) span { 
	/*background-image: url(../images/home/banner1.jpg);*/
	background-image: url(../images/home/app-banner.jpg);

}
.slideshow li:nth-child(2) span { 
    animation-delay: 6s;  
}
.slideshow li:nth-child(3) span { 
    animation-delay: 12s; 
}
.slideshow li:nth-child(4) span { 
    animation-delay: 18s; 
}
.slideshow li:nth-child(5) span { 
    animation-delay: 24s; 
}




@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1; transform: scale(1.05);  }
    25% { opacity: 0 }
    100% { opacity: 0 }
}



@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}

.no-cssanimations .cb-slideshow li span {
	opacity: 1;
}
@media (max-width: 992px) {

	#banner .contentContainer {
		width: 100%;
		margin: 0;
	}
	#banner .contentContainer img {
		width: 100%
	}
	.bannerButton {
		width: 300px;
		margin-top: 15%;
		left: 0;
		padding-left: 30px;
		float: left;
	}
	.bannerBack {
		height: 400px;
		top: 0;
		position: relative;
	}
    #Product .bannerBack {
		height: auto;
        padding-bottom: 10px;
		background: #f9f6f4;
		background-image: none;
		top: 0; 
	}	
	#AboutUs .bannerBack {
		height: auto;
        padding-bottom: 50px;
		background: #f9f6f4;
		background-image: none;
		top: 0; 
	}
	.productOverview.contentContainer {
		width:100%;	
		padding-top: 30px;
	}
	.slideshow, .slideshow:after {
		width: 100%;
		height: 450px;
		top: 30px;
	}
}

@media (max-width:550px){
	#AboutUs .bannerBack {
		padding-bottom: 0;
	}
	#AboutUs .about-pursuits .bannerBack {
		padding-bottom: 50px;
	}
}

@media (max-width:550px){
	
	#banner .contentContainer {
		width: 100%;
		max-width: 100%;
	}
	.latestProduct.contentContainer {
		margin-top: 40px;
		position: relative;
	}
	.bannerContainer {
		float: none;
		width: 100%;
		position: relative;
	}
	.bannerButton {
		position: relative;
		width: 100%;
		margin-top: -60px;
		right: 0;
		padding: 20px;
		float: left;
		z-index: 999;
		}
	.bannerBack {
		display: none;
	}
    #Product .bannerBack {
		display: block;
	}
	#AboutUs .bannerBack {
		display: block;
	}
	.slideshow, .slideshow:after {
		position: relative;
		background: #ffffff;
		width: 100%;
		top:0;
		height: 300px;
		z-index: 99;
		overflow: hidden;
	}
	
}

/* Slider Style
--------------------------------------*/
.cd-slider {
	position: relative;
	width: 100%;
	height: 60rem;
	overflow: hidden;
	margin-bottom: 8rem;
}
.cd-slider li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	visibility: hidden;
	-webkit-transition: visibility 0s 1s;
	transition: visibility 0s 1s;
  will-change: visibility;
}
.image {
	position: absolute;
	top: 0;
	right: 0;
	width: 60%;
	height: 100%;
	background-size: cover;
	background-position: 50% 50%;
	clip: rect(0, 80rem, 60rem, 80rem);
	-webkit-transition: clip .5s cubic-bezier(0.99, 0.01, 0.45, 0.9) .5s;
	transition: clip .5s cubic-bezier(0.99, 0.01, 0.45, 0.9) .5s;
  will-change: clip;
	border-radius: 20px;
}

@media (max-width: 992px){
	.image {
		width: 55%;
		height:80%;
	}
}
.content {
	font-family: 'Source Sans Pro', 'Noto Sans SC', sans-serif;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	line-height: 1.5;
    width: 42%;
    padding-right: 10%;
    vertical-align: top;
	float: left;
}
#chinese-slider .content {
	font-family: 'Source Sans Pro', 'Noto Sans SC', sans-serif;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	line-height: 1.5;
    width: 43%;
    padding-right: 5%;
    vertical-align: top;
	float: left;
}
.content p{
	font-family: 'Source Sans Pro', 'Noto Sans SC', sans-serif;
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-transform: translateY(-30%);
	        transform: translateY(-30%);
	opacity: 0;
	-webkit-transition: opacity .5s, -webkit-transform .5s;
	transition: opacity .5s, -webkit-transform .5s;
	transition: transform .5s, opacity .5s;
	transition: transform .5s, opacity .5s, -webkit-transform .5s;
  will-change: transform, opacity;
}
.content a {
	display: inline-block;
	/*text-transform: capitalize;*/
	font-size: 20px;
    font-weight: 700;
	color: #9E5C57;
	background: #fff;
    /*letter-spacing: 1px;*/
    /* text-align: center; */
    /*border: 0;*/
    padding: 10px 30px;
    margin-bottom: 50px;
    /*margin-top: 20px;*/
    border: 1px solid #9E5C57;
	opacity: 0;
	/*-webkit-transform: translateY(-100%);
	        transform: translateY(-100%);
	-webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;*/
	transition: opacity .5s .1s, -webkit-transform .5s .1s;
	transition: transform .5s .1s, opacity .5s .1s;
	transition: transform .5s .1s, opacity .5s .1s, -webkit-transform .5s .1s;
  will-change: transform, opacity;
}
.content .latestProductLogo{
	opacity: 0;
	/*-webkit-transform: translateY(-30%);
	        transform: translateY(-30%);
	-webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;*/
	transition: opacity .5s .1s, -webkit-transform .5s .1s;
	transition: transform .5s .1s, opacity .5s .1s;
	transition: transform .5s .1s, opacity .5s .1s, -webkit-transform .5s .1s;
  will-change: transform, opacity;
}
/* Current Slide 
-------------------------------------*/
li.current {
	visibility: visible;
	-webkit-transition-delay: 0s;
	        transition-delay: 0s;
}
li.current .image {
	clip: rect(0, 80rem, 60rem, 0);
}
li.current .content p {
	-webkit-transform: translateY(0);
	        transform: translateY(0);
	opacity: 1;
	-webkit-transition-delay: 1s;
	        transition-delay: 1s;
}
li.current .content a {
	-webkit-transform: translateY(0);
	        transform: translateY(0);
	opacity: 1;
	-webkit-transition-delay: 1.1s;
	        transition-delay: 1.1s;
}
li.current .content .latestProductLogo {
	-webkit-transform: translateY(0);
	        transform: translateY(0);
	opacity: 1;
	-webkit-transition-delay: 1.1s;
	        transition-delay: 1.1s;
}
/* Prev Slide 
------------------------------------*/
li.prev_slide .image {
	clip: rect(0, 0, 60rem, 0);
}
.latestProduct nav {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #fff;
	z-index: 2;
}
.prev, .next, .counter {
	vertical-align: middle;
}
.prev, .next {
	position: relative;
	display: inline-block;
	height: 2rem;
	width: 3rem;
  border: 0;
  cursor: pointer;
  background: transparent;
}
.next::before {
	content: '';
	position: absolute;
	    background-image: url(../images/home/right-arrow.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 20px;
    height: 12px;
	top: 50%;
  left: 0;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
	/*border: .4rem solid transparent;
	border-right-width: 0.5rem;
	border-right-color: #000;
	border-left-width: 0;*/
	/*width: 0;
	height: 0;*/
}
.prev::before {
	content: '';
	position: absolute;
	    background-image: url(../images/home/left-arrow.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 20px;
    height: 12px;
	top: 50%;
  left: 0;
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
	/*border: .4rem solid transparent;
	border-right-width: 0.5rem;
	border-right-color: #000;
	border-left-width: 0;*/
	/*width: 0;
	height: 0;*/
}
.prev::after, .next::after {
	content: '';
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%) translateZ(0);
	        transform: translateY(-50%) translateZ(0);
	left: .5rem;
	/*background: #000;
	height: .1rem;
	min-height: 1px;
	width: 2.5rem;
	-webkit-transition: width .3s;
	transition: width .3s;*/
}
.next::before {
	right: 0;
  left: auto;
	/*border-left-width: 1rem;
	border-left-color: #000;
	border-right-width: 0;*/
}
.next::after {
	right: .5rem;
	left: auto;
}
.counter {
	display: inline-block;
	font-size: 2rem;
	color:#333;
	font-weight: 300;
	/*font-family: serif;
	font-style: italic;*/
}
.counter span:last-child::before {
	content: '/';
	margin: 0 1rem;
}
.prev:hover::after, .next:hover::after {
	width: 3.5rem;
}
@media screen and ( max-width: 550px ) {
	.cd-slider {
		position: relative;
		width: 100%;
		height: 65rem;
		margin-bottom: 4rem;
	}
	.image { 
		width: 100%;
    	height: 30%; 
	}
	.content,
	#chinese-slider .content { 
		width: 100%;
		top: 200px;
		padding-right: 0; 
		float: none;
	}
	/*.latestProductLogo img {
		width: 55%;
	}*/
}

/*------------------------ Product Timeline----------------------------*/
.marker {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   border: 2px solid #F5F7FA;
   background: #4FC1E9;
   margin-top: 10px;
   z-index: 9999
}

#iframeStory {
	height: 800px;
}

@media screen and ( max-width: 1024px ) {
	#iframeStory {
		height: 750px;
	}
}

@media screen and ( max-width: 550px ) {
	#iframeStory {
		height: 640px;
	}
}