@charset "utf-8";
body{
	background-image: url("../Images/Portal_bg.png");
	background-size: cover;
	font-size: 18px;
}
.Portal_toplink{
	position: absolute;
	right: 10px;
	top:10px;
	display: flex;
	column-gap: 10px;
}
.Portal_toplink > a{
	background-color: #FFF;
	border-radius: 999em;
	padding: 2px 10px;
}
.Portal_logo{
	margin: 50px auto 0 auto;
	text-align: center;
	width: 400px;
}
.Portal_logo > img{
	width: 100%;
	height: auto;
}
.Portal_wrapper{
	position: relative;
	height: calc(100vh - 150px);
}
.Portal_wrapper_inner{
	width: 95%;
	display: flex;
	padding-top: 4%;
	margin: auto;
}
.Portal_wrapper_inner > div{
	border-radius: 10px;
	background-color: #FFF;
	box-shadow: 2px 2px 20px 1px rgba(0, 0, 0, 0.2);
	margin: 10px;
	width: 33.33%;
}
.Portal_wrapper_inner > div > h2{
	text-align: center;
	font-weight: 600;
	height: 80px;
	padding: 20px;
	padding-top: 140px;
}
.Portal_wrapper_inner > div > p{
	text-align: center;
	font-weight: 600;
	padding-top: 4px;
	margin-top: 20px;
	font-size: 1.4rem;
}
.iocean_div{
	background-image: url("../Images/logo_iocean.svg");
	background-position: center top 20px;
	background-repeat: no-repeat;
	background-size: 120px auto;
	position: relative;
}
.iocean_div > div > a > p{
	color: #a3a3a3;
	font-size: 1.2rem;
	margin: 10px 20px;
	text-align: justify;
	padding-bottom: 50px;
}
.iocean_div > span{
	font-size: 1.2rem;
	display: block;
	margin: auto;
	text-align: center;
	color: #FFF;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0px;
	background-color: #3361cc;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	padding: 10px 0;
}
.iocean_div > span > a{
	color: #FFF;
}
.iocean_div > span > a > img{
	width: 20px;
	height: auto;
	margin-right: 4px;
	vertical-align: middle;
}
.iocean_div_h2{
	color: #3361cc;
}
.mpa_div{
	background-image: url("../Images/logo_mpa.svg");
	background-position: center top 20px;
	background-repeat: no-repeat;
	background-size: 120px auto;
	position: relative;
}
.mpa_div > div > a > p{
	color: #a3a3a3;
	font-size: 1.2rem;
	margin: 10px 20px;
	text-align: justify;
	padding-bottom: 50px;
}
.mpa_div > span{
	font-size: 1.2rem;
	display: block;
	margin: auto;
	text-align: center;
	color: #FFF;
	position: absolute;
	right: 0;
	left: 0;
	bottom:0px;
	background-color: #815799;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	padding: 10px 0;
}
.mpa_div > span > a{
	color: #FFF;
}
.mpa_div > span > a > img{
	width: 20px;
	height: auto;
	margin-right: 4px;
	vertical-align: middle;
}
.mpa_div_h2{
	color: #815799;
}
.data_div{
	background-image: url("../Images/logo_data.svg");
	background-position: center top 20px;
	background-repeat: no-repeat;
	background-size: 120px auto;
	position: relative;
}
.data_div > div > a > p{
	color: #a3a3a3;
	font-size: 1.2rem;
	margin: 10px 20px;
	text-align: justify;
	padding-bottom: 50px;
}
.data_div > span{
	font-size: 1.2rem;
	display: block;
	margin: auto;
	text-align: center;
	color: #fff;
	position: absolute;
	left: 0;
	right: 0;
	bottom:0px;
	background-color: #61bcba;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	padding: 10px 0;
}
.data_div >  span > a{
	color: #fff;
}
.data_div >  span > a > img{
	width: 20px;
	height: auto;
	margin-right: 4px;
	vertical-align: middle;
}
.data_div_h2{
	color: #61bcba;
}

.link_box{
	display: flex;
	justify-content: center;
	margin: 20px 0 20px 0;
	column-gap: 20px;
}
.link_box > a{
	border-radius: 999em;
	padding: 4px 8px;
}
.iocean_link_box > a{
	background-color: #3361cc;
	color: #FFF;
}
.mpa_link_box > a{
	background-color: #815799;
	color: #FFF;
}
.data_link_box > a{
	background-color: #61bcba;
	color: #FFF;
}
.Portal_footer{
	position: absolute;
	bottom:0;
	text-align: center;
	width: 100%;
	padding: 10px 0;
	font-size: 0.9rem;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+27,ffffff+27,ffffff+38,ffffff+50,ffffff+65,ffffff+76,ffffff+100&0+0,0.5+27,1+38,1+50,1+65,0.5+76,0+100 */
	background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 27%, rgba(255,255,255,1) 38%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 65%, rgba(255,255,255,0.5) 76%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 27%,rgba(255,255,255,1) 38%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 65%,rgba(255,255,255,0.5) 76%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 27%,rgba(255,255,255,1) 38%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 65%,rgba(255,255,255,0.5) 76%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */

}
.Portal_footer > p{
	margin-bottom: 0;
}
.carousel-control-prev, .carousel-control-next {
    width: auto; 
}
.carousel-control-prev-icon {
	background-image: url("../Images/circle-arrow-left-solid.svg");
}
.carousel-control-next-icon {
  background-image: url("../Images/circle-arrow-right-solid.svg");
}
.carousel-txt{
	text-align: center;
	margin-top: 20px;
}

@media(min-width:1601px) {
	.Portal_wrapper_inner{width: 1400px;margin: auto;}
}
@media (min-width: 768px) and (max-width: 1366px) {
	.Portal_footer{position: inherit;margin-top: 50px;}
}
@media (max-width: 1480px) {.link_box{margin: 20px 0 20px 0;}}
@media (max-width: 980px) {
	.Portal_logo{width: 200px;}
	.Portal_wrapper_inner{flex-direction: column;}
	.Portal_wrapper_inner > div{margin-bottom: 20px;width: 100%;}
	.mpa_div > div > a > span, .data_div > div > a > span, .mpa_div > div > a > span {margin: 10px 20px 10px 20px;}
	.Portal_footer{position: inherit;margin-top: 50px;}
	.Portal_footer > p{margin-bottom: 0;}
	
}