/* general styles */

.animate { visibility: hidden; }


/*** OC Toggle ***/
#top-oc-toggle button {
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 15;
  width: 142%;
	height: 128.5%;
}
#top-oc-toggle button>i {
  background: #fff;
  height: 2px;
  box-shadow: 0 2px 0 #000;
}
#top-oc-toggle button>i:first-child {
  transform: translate(-50%, -15px);
}
#top-oc-toggle button>i:last-child {
  transform: translate(-50%, 13px);
}
#top-oc-toggle button:hover {
	background: none;
}
#top-oc-toggle button:hover>i:first-child {
	transform: translate(-50%, -16px);
}
#top-oc-toggle button:hover>i:last-child {
	transform: translate(-50%, 14px);
}
@media (max-width:40em) {
  #top-oc-toggle button>i {
    height: 1px;
    box-shadow: 0 1px 0 #000;
  }
}
#top-oc-toggle button[aria-expanded=true] {
	background: none;
  width: 100%;
  height: 100%;
}
#top-oc-toggle button[aria-expanded=true]>i {
  background: #000;
}
#top-oc-toggle button[aria-expanded=true]>i:nth-child(2) {
  display: none;
}
#top-oc-toggle button[aria-expanded=true]>i:first-child {
	transform: translate(-50%, -1px) rotate(135deg)
}
#top-oc-toggle button[aria-expanded=true]>i:last-child {
	transform: translate(-50%, -1px) rotate(225deg)
}

/* bogo */
.bogo-language-switcher {
	top: 28px;
	transform:none;
	right: 100px;
	padding: 4px 2px;
	border-radius: 5px;
	border: solid 1px #fff;
}
.bogo-language-switcher.menu a,
.bogo-language-switcher .lang-nonelink {
	color: #fff;
}
.bogo-language-switcher a:hover {
	background:rgba(62,28,130,.75);
}
.bogo-language-switcher>li.current>.lang-nonelink {
	background: rgba(200,200,200,.4);
}
@media (max-width:40em) {
	.bogo-language-switcher {
		top: 18px;
		right: 71px;
		font-size: 12px;
		padding: 0;
		border: none;
	}
}


/* title */
.sect-head {
	text-align: center;
  padding: 2em 0;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}
.sect-head h2 {
  font-weight: 600;
  font-size: 1.8em;
  color: #3f1b83;
  text-transform: uppercase;
	margin: 0;
}
body.en-US .sect-head h2 {
	font-family: "Times New Roman", Times, serif;
	font-weight: 500;
}
.sect-head p {
  font-size: .85em;
  line-height: 1.4;
  font-family: "Times New Roman", Times, serif;
	margin: 0;
}
.sect-head a {
	text-decoration: none;
	color: #3f1b83;
}
.sect-head a:hover {
	text-decoration: underline;
}

@media (orientation: landscape) {
  .sect-head { padding: 1em 0; }
}
@media (max-width:812px) and (orientation: landscape),
 (max-width:667px) {
  .sect-head { font-size: 1rem; margin-bottom: 1rem; }
  .sect-head { padding: .5em 0 .75rem; }
  .sect-head h2 { margin-bottom: 0; }
}
@media (max-width:667px) and (orientation: landscape),
 (max-width:325px) {
  .sect-head { font-size: .875rem; }
}



/********** 01 ***********/
#sc01 {
  position: relative;
}
#mainvis {
  background-size: cover;
	box-sizing: content-box;
	padding-top: 56.25%;
	height: 0;
	width: 100%;
	position: relative;
	overflow: hidden;
}
#topmovie {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 0;
}
#ytp-overlay {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,.4);
	background-image: url(../images/raster_dot.png);
	z-index: 2;
}

#toplogo {
	position: absolute;
	height: 5.75%;
	width: auto;
	top: 14.5%;
	left: 66%;
	z-index: 10;
}

#topline {
	position: absolute;
	top: 17%;
	left: 0;
	width: 64%;
	height: 1px;
	background: #fff;
	overflow: hidden;
	content: '';
	z-index: 10;
}

#topmes1, #topmes2 {
	position: absolute;
	left: 4%;
  height: 8%;
  width: auto;
	z-index: 10;
}
#toplogo img, #topmes1 img, #topmes2 img {
	display: block;
	height: 100%;
	width: auto;
}
#topmes1 { top: 7%; }
#topmes2 { top: 19%; }

#topcopy {
  position: absolute;
	font-size: 12px;
  right: .6em;
  bottom: .3em;
  color: #fff;
}

@media (max-width:960px) {
  #toplogo { left: 55%; top: 16%; height: 7.2%; }
  #topmes1, #topmes2 { height: 9%; }
  #topmes1 { top: 8%; }
  #topmes2 { top: 21%; }
  #topline { top: 19%; width: 53%; }
}
@media (max-width:639px) {
  #toplogo { top: 75%; left: 5%; height: 10%; }
  #topmes1, #topmes2 { left: 5%; height: 12%; }
  #topmes1 { top: 10%; }
  #topmes2 { top: 25%; }
  #topline { display: none; }
  #topcopy {
    transform-origin: right bottom;
		transform: scale(30%);
  }
}
@media (max-width:380px) {
	#topcopy { font-size: 60%; }
}

/**** TOPICS ****/
#sc-topic {
  padding: 5rem 0;
}
@media (max-width:639px) {
  #sc-topic {
    padding: 2rem 0;
  }
}



/********** 02 ***********/
#sc02 {
	padding: 5rem 0 2.5rem;
	background-color: #ecf4f6;
}
@media (max-width:639px) {
	#sc02 {
		padding: 2rem 0 1rem;
	}
}


/********** 03 ***********/
#sc03 {
	padding: 4rem 0;
	background: #000 url(../images/bg-vision_t.jpg) center center no-repeat;
	background-size: cover;
}
@media (min-width:640px) {
	#sc03 {
		padding: 13.5rem 0 8rem;
		background-position: top center;
		position: relative;
	}
	#sc03:before {
		content: '';
		position: absolute;
		top: 0; left: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 125px 100vw 0 0;
		border-color: #ecf4f6 transparent transparent transparent;
	}
}

#vision-header {
	text-align: center;
}
/*
#vision-header a {
  color: #fff;
}
#vision-header a:hover {
  text-decoration: underline;
}
*/
#vision-header .maintitle {
	font-size: 2.125rem;
	margin: 0 2rem;
}
#vision-header .maintitle .button.thbow {
  margin: 0;
  font-size: 100%;
  font-weight: 500;
  padding: .3em 2.8em;
	white-space: normal;
}
body.en-US #vision-header .maintitle .button.thbow {
	padding: .6em 2em;
}
#vision-header .subtitle {
  font: normal 1.875rem/1.2 "Times New Roman", Times, serif;
  color: rgba(0,0,0,0.6);
  text-transform: uppercase;
	margin: 0.9rem 0 0;
}
@media (max-width:640px) {
  #vision-header .maintitle { font-size: 1.5rem; margin: 0 1rem; }
  #vision-header .maintitle .button.thbow { padding: .5em 1.8em; }
  #vision-header .maintitle .button.thbow:after { width: 14px; height: 14px; right: .5em; }
  #vision-header .subtitle { font-size: 1.4rem;}
}
@media (max-width:400px) {
  #vision-header .maintitle { font-size: 1.25rem; }
}


/********** 04 ***********/
#sc04 {
	padding: 5rem 0 5rem;
}
@media (max-width:639px) {
	#sc04 {
		padding: 2rem 0;
	}
}

/********** sc-support ***********/
#sc-support {
	padding: 4rem 0;
	background: #ecf4f6 url("../images/bg-support.jpg") center center no-repeat;
	background-size: cover;
}
.topsub-index {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.topsub-index>li {
	margin: 0 15px 15px;
}
.topsub-index>li>a {
	display: block;
	padding: 1.1em;
	font-size: 22px;
	border-radius: 6px;
	text-align: center;
	color: #fff;
	background-color: rgba(45,166,203,.5);
}
.topsub-index>li>a:hover {
	background-color: rgba(45,166,203,.8);
}
#tsi2>a {
	background-color: rgba(110,192,67,.5);
}
#tsi2>a:hover {
	background-color: rgba(110,192,67,.8);
}
.topsub-index>li>a>span {
	font-size: 110%;
}
@media (min-width:640px) {
	#sc-support {
		padding: 5rem 0 12rem;
		background-position: center center;
		position: relative;
	}
	#sc-support:before {
		content: '';
		position: absolute;
		bottom: 0; left: 0;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 0 125px 100vw;
		border-color: transparent transparent #ecf4f6 transparent;
	}
	.topsub-index {
		display: flex;
	}
	.topsub-index>li {
		margin: 0 30px;
		flex: 1 50%;
	}
	.topsub-index>li>a {
		font-size: 34px;
		border-radius: 10px;
	}
}

/********** 05 ***********/
#sc05 {
	padding: 3rem 0 5rem;
  background: #ecf4f6;
}
@media (max-width:639px) {
	#sc05 {
		padding: 2rem 0;
	}
}

#coindex {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}
#coindex ul {
	margin: 0; padding: 0; list-style-type: none;
	display: flex;
	align-items: center;
	justify-content: space-around;
  width: 100%;
}
#coindex ul>li {
	margin: 15px;
}
#coindex ul>li>a {
	display: inline-block;
	width: 240px;
  height: 240px;
  border-radius: 50%;
  padding: 50px 0;
	text-align: center;
	background-color: #fff;
	color: #000;
	text-decoration: none;
	font-size: 20px;
  white-space: nowrap;
}
#coindex ul>li>a:hover {
	background-color: #a1fdfa;
}
#coindex ul>li>a>img {
  vertical-align: bottom;
	width: 45%;
	height: auto;
}
body.en-US #coindex ul>li>a {
	font-size: 15px;
}


@media (max-width:1023px) {
  #coindex ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  #coindex ul>li {
    margin: 10px;
  }
  #coindex ul>li>a {
    width: 180px;
    height: 180px;
    padding: 35px 0;
    font-size: 16px;
  }
	body.en-US #coindex ul>li>a {
		font-size: 10px;
	}
}


@media (max-width:480px) {
  #coindex ul>li>a {
    width: 144px;
    height: 144px;
    padding: 30px 0;
    font-size: 14px;
  }
}



/********** 06 ***********/
#sc06 {
	background-color: #5dc0cd;
}
#mapwrapper {
  display: flex;
  align-items: center;
}
#mapbox {
  flex: 1 1 60%;
  height: 525px;
	overflow: hidden;
  align-self: stretch;
}
#mapbox iframe {
  height: calc( 100% + 400px );
  width: 100%;
	margin-top: -200px;
}
#maptex {
  flex: 1 1 40%;
	text-align: center;
	color: #fff;
}
#maptex .sect-head {
  padding: 2rem 0;
}
#maptex .sect-head a {
  color: #fff;
}

#foot-warp {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
#foot-warp {
  background: none;
}
#footlink, #footer {
  width: 100%;
}
#footlink {
  padding: 16px 10px !important;
}
@media (min-width:813px) {
	#maptex .sect-head {
		padding-bottom: 4rem;
	}
}
@media (max-width:667px) {
  #mapbox { display: none; }
}


/**** foot sitemap ***/
#foot-sitemap {
  padding: 2.5rem 0 2rem;
  background: #ecf4f6;
}
#foot-sitemap>.row {
  max-width: 72rem;
  justify-content: space-between;
}
#foot-sitemap #foot-icon {
  margin: 1rem 0;
  justify-content: center;
}
#foot-tsps, #foot-tsmap {
  flex-basis: 100%;
}
#foot-tsmap {
  font-size: .875rem;
}
#foot-tsmap>.row>.columns {
  flex: 1 1 auto;
}
#foot-tsmap .menu a {
  padding: .4em;
}
#foot-tsmap .menu a:hover {
  background: none;
  color: #3f1b83;
  text-decoration: underline;
}
#foot-tsmap .parent.menu>li {
  margin-bottom: .6em;
}
#foot-tsmap .parent.menu>li>a {
  font-weight: 600;
  white-space: nowrap;
}
#foot-tsmap .childpage-list.menu {
  margin-left: 1em;
  margin-bottom: .8em;
}
@media (min-width:813px) {
  #foot-sitemap {
    padding: 3.6rem 0 2.6rem;
  }
  #foot-sitemap #foot-icon {
    margin-top: 3rem;
  }
  #foot-tsps {
    flex: 0 0 25%;
  }
  #foot-tsmap {
    flex: 0 0 68%;
  }
}