/* ----------------------------------------------------------------
	CSS Specific to the IOTC: MSE Website
-----------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Flex Slider
-----------------------------------------------------------------*/

.fslider,
.fslider .flexslider,
.fslider .slider-wrap,
.fslider .slide,
.fslider .slide > a,
.fslider .slide > img,
.fslider .slide > a > img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
}

.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  { outline: none; border: none; }
.slider-wrap,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none; border: none;}

.flexslider {position: relative; margin: 0; padding: 0;}
.flexslider .slider-wrap > .slide {display: none; -webkit-backface-visibility: hidden;}
.flexslider .slider-wrap img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

.slider-wrap:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
html[xmlns] .slider-wrap {display: block;}
* html .slider-wrap {height: 1%;}

.no-js .slider-wrap > .slide:first-child {display: block;}

.flex-viewport {
	max-height: 2000px;
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

.flex-control-nav {
	position: absolute;
	z-index: 10;
	text-align: center;
	top: 14px;
	right: 10px;
	margin: 0;
}

.flex-control-nav li {
	float: left;
	display: block;
	margin: 0 3px;
	width: 10px;
	height: 10px;
}

.flex-control-nav li a {
	display: block;
	cursor: pointer;
	text-indent: -9999px;
	width: 10px !important;
	height: 10px !important;
	
	border-radius: 0!important;
	transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
}

.flex-control-nav li:hover a,
.flex-control-nav li a.flex-active { background-color: #FFF; }



/*===============================================================*/


@media (min-width:1000px){
	.slider-title h2 {margin-top: 80px!important;}}	

@media (max-width:999px){
	.slider-title h2 {margin-top: -30%!important;}}	

#fao-logo {
	height:80px;
	background-color:#009FE3; /* 100% C */
	text-align:center;
}

#fao-logo img {
	height:85%!important;
	padding-top:15px;
}

.button100{
	display: inline-block;
	position: relative;
	cursor: pointer;
	outline: none;
	margin: 5px;
	padding: 0 10px;
	font-size: 14px;
	max-height: 80%;
	line-height: 40px;
	background-color: #0BBBEF;
	font-weight: 700;
	border: none;
}

#trajectories-page h4 {
	font-family: 'Noto Serif', serif!important;
	text-transform: none!important;
	letter-spacing: 0;
	text-align: left;
	margin-bottom: 14px;
	padding-left: 40px;
}

#tuning-page h4 {
	font-family: 'Noto Serif', serif!important;
	text-transform: none!important;
	letter-spacing: 0;
	text-align: left;
	margin-bottom: 14px;
	margin-left: 14px;
}

.text-cyan {color:#009FE3!important;}
a.text-cyan:hover, a.text-cyan:focus {
	color: #0BBBEF!important; /* 100% C */}

.text-cyan-light {color:#0BBBEF!important;}
a.text-cyan-light:hover, a.text-cyan:focus {
	color: #009FE3!important; /* 100% C */}

.bg-cyan {background-color: #009FE3 !important; /* 100% C */}
.button-cyan {background-color: #009FE3 !important; /* 100% C */}
.icon-cyan {
	color: #009FE3 !important; /* 100% C */
	position: relative; top: 1px; /* Shifts the icon down by 1 pt (to align to baseline) */
  }

.random {background-color: #009FE3 !important; /* 100% C */}

.intro-h {color: #0BBBEF !important; /* 70%-C */}

.intro {
	font-size: 22px !important;
	font-family: 'Noto Sans display', sans;
	font-weight: 400 !important;
	color: #0BBBEF; /* 70%-C */
	}

.intro a {
	color:#0BBBEF!important;
	text-decoration-line: underline!important;
	text-decoration-thickness: .05em!important;
	text-underline-offset: 3px!important;}

.intro a:hover {
	color: #009FE3!important; /* 100% C */
	text-decoration-thickness: .05em!important;
	text-underline-offset: 3px!important;}

.section-handout {
	position: relative;
	margin: 0;
	padding: 60px 0;
	background-color: #009FE3 !important; /* 100% C */
	color: white!important;
	overflow: hidden;
}

#header .button-home {
	margin: 30px 0 30px 10px;
	-webkit-transition: all .4s ease;
	-o-transition: all .4s ease;
	transition: all .4s ease;
}

#content { overflow: visible; }

.slider-box-wrap {
	position: relative;
	top: -50px;
	margin-bottom: -50px;
	z-index: 2;
}

.heading-block p {
	margin-top: 10px;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.7 !important;
}

/* ============ TUNA ============ */

.tuna-wrapper {
	bottom: 0;
	left: 0;
	padding-top: 50px;
	position: absolute;
	right: 0;
	top: 0;
	overflow: hidden;
	opacity: .12; 
}

.tuna-container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	will-change: transform;
}

.tuna1 {
	background-image: url("images/svg/Yellow-Fin-Tuna.svg");
	background-size: auto;
	background-repeat: no-repeat;
	width: 300px;
	height: 200px;
}

/* KEYFRAMES */
@-webkit-keyframes animateTuna {
	0% { margin-left: -1000px; }
	100% { margin-left: 100%; }
}

@-moz-keyframes animateTuna {
	0% { margin-left: -1000px; }
	100% { margin-left: 100%; }
}

@keyframes animateTuna {
	0% { margin-left: -1000px; }
	100% { margin-left: 100%; }
}

/* ============ TUNA ANIMATIONS ============ */
.t1 {
	-webkit-animation: animateTuna 35s linear infinite;
	-moz-animation: animateTuna 35s linear infinite;
	animation: animateTuna 35s linear infinite;
	-webkit-transform: scale(0.65);
	-moz-transform: scale(0.65);
	transform: scale(0.65);
}

.t2 {
	-webkit-animation: animateTuna 20s linear infinite;
	-moz-animation: animateTuna 20s linear infinite;
	animation: animateTuna 20s linear infinite;
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}

.t3 {
	-webkit-animation: animateTuna 30s linear infinite;
	-moz-animation: animateTuna 30s linear infinite;
	animation: animateTuna 30s linear infinite;
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
}

.t4 {
	-webkit-animation: animateTuna 18s linear infinite;
	-moz-animation: animateTuna 18s linear infinite;
	animation: animateTuna 18s linear infinite;
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
}

.t5 {
	-webkit-animation: animateTuna 25s linear infinite;
	-moz-animation: animateTuna 25s linear infinite;
	animation: animateTuna 25s linear infinite;
	-webkit-transform: scale(0.55);
	-moz-transform: scale(0.55);
	transform: scale(0.55);
}

.tuna {
	background-image: url("images/svg/Yellow-Fin-Tuna.svg");
	height: 140px;
	position: relative;
	width: 350px;
}

.tuna:after, .tuna:before {
	
	position: absolute;
	z-indeX: -1;
}

.tuna:after {
	background-image: url("images/svg/Yellow-Fin-Tuna.svg");
	height: 100px;
	left: 50px;
	top: -50px;
	width: 100px;
}

.tuna:before {
	background-image: url("images/svg/Yellow-Fin-Tuna.svg");
	width: 180px;
	height: 180px;
	right: 50px;
	top: -90px;
}


/* Hotspot */
.hotspot-img { position: relative; }

.hotspot-img img { opacity: .6; }

.hotspot-img .hot-spot {
	position: absolute;
	width: 12px;
	height: 12px;
	top: 5px;
	left: 5px;
	text-align: center;
	background-color: rgba(11, 187, 239, 0.8); /* 70%-C The hotspot-colour */
	border: 1px solid #FFF;
	border-radius: 100%;
	cursor: pointer;
	transition: transform .3s ease;
}

.hotspot-img .hot-spot .circle {
	display: block;
	position: absolute;
	top: 47%;
	left: 47%;
	width: 2em;
	height: 2em;
	margin: -1em auto auto -1em;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	border-radius: 50%;
	background: #BCE4FA; /* 30%-C The "pulse" colour around the hotspots */
	opacity: 0;
	z-index: -1;
	-webkit-animation: pulsate 3.5s ease-out infinite;
	animation: pulsate 3.5s ease-out infinite;
}

.hotspot-img .hot-spot:nth-child(2) .circle { animation-delay: 2s; }
.hotspot-img .hot-spot:nth-child(3) .circle { animation-delay: 3.5s; }
.hotspot-img .hot-spot:nth-child(4) .circle { animation-delay: 5.2s; }
.hotspot-img .hot-spot:nth-child(5) .circle { animation-delay: 6.4s; }
.hotspot-img .hot-spot:nth-child(6) .circle { animation-delay: 8s; }
.hotspot-img .hot-spot:nth-child(7) .circle { animation-delay: 9.2s; }
.hotspot-img .hot-spot:nth-child(8) .circle { animation-delay: 11s; }
.hotspot-img .hot-spot:nth-child(9) .circle { animation-delay: 13s; }
.hotspot-img .hot-spot:nth-child(10) .circle { animation-delay: 15s; }

.hotspot-img .hot-spot .tooltip {
	background-color: rgba(255, 255, 255, 0.9);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	font-size: 14px;
	opacity: 0;
	display: none;
	left: 0;
	padding: 8px 10px;
	position: absolute;
	top: 20px;
	width: auto;
	z-index: 999;
	box-shadow: 0 10px 80px rgba(0,0,0,0.1), 0 10px 50px rgba(0,0,0,0.1);
	-webkit-transform: translateY(3px);
	-ms-transform: translateY(3px);
	-o-transform: translateY(3px);
	transform: translateY(3px);
	-webkit-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear;
}

.hotspot-img .hot-spot.hotspot-tooltip-open .tooltip {
	opacity: 1;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}

.hotspot-img .hot-spot .tooltip.ontop {
	top: auto;
	bottom: 35px;
}

.hotspot-img .hot-spot .tooltip  p {
	font-size: 13px;
	line-height: 1.3rem !important;
	margin-bottom: 0;
	white-space: nowrap;
	color: #666 !important;
	text-transform: capitalize;
}

@-webkit-keyframes
	pulsate {  0% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0.8;
	}
	 45% {
		-webkit-transform: scale(1.75);
		transform: scale(1.75);
		opacity: 0;
	}
}
@keyframes
	pulsate {  0% {
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0.8;
	}
		45% {
		-webkit-transform: scale(1.75);
		transform: scale(1.75);
		opacity: 0;
	}
}

.iconlist li:not(:first-child) { margin-top: 1px; }
.iconlist li img {
	position: relative;
	margin-top: -2px;
	width: 16px;
	margin-right: 5px;
}

.iconlist a {
	font-size: 16px;
	color: #444;
}

.iconlist a:hover { text-decoration: underline !important; }
.text-muted { opacity: 0.5; }


.bg-angle:after,
.section.bg-angle:before {
	content: '';
	overflow: hidden;
	width: 100%;
	position: absolute;
	height: 70px;
	bottom: -70px;
	left: 0;
	-webkit-transform-origin: 0;
	transform-origin: 0;
	-webkit-transform: skewY(-1.5deg);
	-moz-transform: skewY(-1.5deg);
	-ms-transform: skewY(-1.5deg);
	-o-transform: skewY(-1.5deg);
	transform: skewY(-1.5deg);
	background-color: #009FE3;
	z-index: 1;
}

.section.bg-main {
	overflow: hidden;
	width: 100%;
	position: absolute;
	height: 70px;
	bottom: -70px;
	left: 0;
	background-color: #009FE3;
	z-index: 1;
}

.section.bg-angle:before { top: -30px; }

.section.bg-angle:after,
.section.bg-angle:before { background-color: #FFF; }

.dark #primary-menu ul li,
.dark #primary-menu ul li .mega-menu-content ul.mega-menu-column:not(:first-child) { border-top-color: rgba(255, 255, 255, 0.1) }

.footer-menu { margin-bottom: 10px; }

.footer-menu a {
	font-size: 14px;
	margin: 0 10px;
	border-bottom: 0 !important;
}



/* Devices Under 991 Width */
@media (max-width: 991px) {

	#header .button {
		position: absolute;
		top: 50%;
		right: 0;
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		margin: 0;
	}

	.vertical-middle { z-index: 0; }

	.owl-stage-outer:before,
	.owl-stage-outer:after { display: none; }

	.slider-bottom-box { padding: 15px; }

	.img-map { opacity: 0.2; z-index: -1}
}

/* ----------------------------------------------------------------
	Media toggles (show in full/mobile view)
  ---------------------------------------------------------------*/

/* MSE Process on index.html (home) & mse.html */
@media (max-width:577px)
	{#mseMap {display: none;}}

@media (min-width:576px)
	{#mseMap-s {display: none!important;}}


/* Objectives Image on management-procedures.html */
@media (max-width:577px)
	{#Objectives {display: none;}}

@media (min-width:576px)
	{#Objectives-s {display: none!important;}}

/* ----------------------------------------------------------------
	Styling for MSE process S
  ---------------------------------------------------------------*/

.mseMap-s{
	position: relative;
	margin: 0 0 40px 0;
	list-style: none;
	border: 2px solid #0BBBEF;
	float: left;	
}

.mseMap-s li {
	float: left;
	position: relative;
	background-color:white;
	width: 100%;
}

.mseMap-s li a {
	display: block;
	position: relative;
	padding: 12px 18px;
	line-height: 20px;
	font-family: 'Noto Sans display', sans-serif;
	font-size: 16px !important;
	font-weight: 400;
	color: #0BBBEF; /* 70%-C */
	border-bottom: 2px solid #0BBBEF;
}

.mseMap-s li:last-child a {border: none; } /* takes out border from last list item to avoid double-border */

.mseMap-s li a:hover { background-color: #0BBBEF!important; /* 100%-C */color: white!important; }

.mseMap-s li.activeFilter a {
	color: #FFF !important;
	background-color: #009FE3!important; /* 70% C */
	margin: -1px 0;
	padding: 13px 18px;
	font-weight: bold;
}

/* ----------------------------------------------------------------
	Local Styling for "Portfolio" (Sorting in tuning section)
  ---------------------------------------------------------------*/

/* Sans-serif in Filter button nav row */
.portfolio-filter {font-family: 'Noto Sans display', sans-serif!important; }