/*!
 * SEAFISH CSS COMBINED WITH BOOTSTRAP
 * Copyright 2011-2018 BRAINSTORM CREATIVE STUDIO.
 */
body {
	font-family: 'Heebo', sans-serif;
        overflow: hidden;
		background-color:#2d4772;
		width:100%;
		overflow:hidden;
		overflow-y:scroll;
}

#animation_container{
        left:-50%;
		right:-50%;
		overflow:hidden;
		overflow-x:hidden;
		width: 100%!important;
		margin-top:-13vh!important
}
.clr {
	clear:both;
}
/* Fullscreen overlay for modal background */
#active-popup {
  background-color: rgba(52,73,94, 0.7);
  position: absolute;
  width: 100%;
  heighT: 100% !important;
  top: 0;
  left: 0;
  z-index: 999;
  color:#fff;
}
.warning {
	display:none;
}
/* Modal container */
#popup-container {
  width:90%; max-width:420px; padding: 4% 3%;
  margin:10% auto;
  position:fixed;
  left:0; right:0;
  z-index:999;
  top: 0;
  display:none;
  background:#e30613;
  color:#fff;
}

.modal-content {
  position: relative;
  text-align: center;
  color:#fff;
}

#popup-window { position: relative; }

.modal-content h1, .modal-content h2,
.modal-content p { color: #fff; }

.modal-content p { padding: 20% 5% 0 5%; }

/* Close button */
#popup-container a.close {
  position:absolute;
  top:-8px;right:-8px;
  z-index:99;
  font-weight:bold;
  font-size:18px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
  width:25px; height:25px;
  text-align:center;
  background:transparent;
  border:4px solid #fff;
  cursor:pointer;
  color:#fff;background:#e30613
 
}
#employment-top { height:37vw }
#closemobile {
	display:none;
}
#chartjs-tooltip {
  opacity: 1;
  position: absolute;
  color: white;
  border-radius: 3px;
  -webkit-transition: all .1s ease;
  transition: all .1s ease;
  pointer-events: none;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.chartjs-tooltip-key {
  display: inline-block;
  width: 10px;
  height: 10px;
}
.hiddendata-button {
	z-index:10;
    width: 8vw;
    height: 8vw;
    position: absolute;
    left: 2.2vw;
    top: 4vw;
	cursor:pointer;
}

#mobile-nav-lower{
	display:none;

}
/*  */
.seafood-center-top .uparrow{
    margin-left: 19vw;
    margin-top: 1vw;
}
.demersal-donut .hiddendata-button {
    z-index: 10;
    width: 9vw;
    height: 9vw;
    position: absolute;
    left: 3vw;
    top: 3.2vw;
}
.shellfish-donut .hiddendata-button {
    z-index: 10;
    width: 10.2vw;
    height: 12vw;
    position: absolute;
    left: 4.4vw;
    top: 3.4vw;
}
.aquaculture-donut .hiddendata-button {
	z-index: 10;
    width: 9vw;
    height: 8.5vw;
    position: absolute;
    left: 3vw;
    top: 3.2vw;
}
.eggs-juvenile-donut .hiddendata-button {
    z-index: 10;
    width: 8vw;
    height: 8vw;
    position: absolute;
    left: 3vw;
    top: 3vw;
}
.pelagic-image{
	position: relative;
    top: -1vw;
    width: 8vw;
    left: 7vw;
    z-index: -1000;
}
.demersal-image{
    position: relative;
    top: -1vw;
    width: 8vw;
    left: -11vw;
}
.shellfish-image{
    position: relative;
    top: -13vw;
    left: 11vw;
    width: 6vw;
}
.aquaculture-image{
    position: relative;
    left: 8.8vw;
    top: -11vw;
    width: 5vw;
    z-index: -1000;
}
.cockles-image{
    width: 5vw!important;
    left: -20vw;
    position: relative;
    top: -8vw;
}
.eggs-image{
    position: relative;
    top: 2vw;
    left: 8vw;
    width: 8vw;
}
.seafood-left{
	float:left;
	width:21vw;
	margin-top: 1vw;
}
.seafood-left h2{
	position: absolute;
    border-color: #518936!important;
	top:-2vw;
}
.seafood-right h2{
	position: absolute;
    top: -2vw;
    border-color: #c0136b!important;
}
.seafood-center-bottom h2{
	position: relative;
    top: 1vw;
    border-color: #ffcc00!important;
    left: 6vw;
}
.seafood-center {
	float:left;
	width:33vw;
	margin-left:-3vw;
	margin-top: 1vw;
	z-index:12
}

.seafood-center-top h2{
	margin-top: -3vw;
	position: absolute;
	left:16vw;
	margin-left:9vw
}


.pelagic-title {
	margin-left: 9vw!important;
}
.demersal-title{
	margin-left: 8.3vw!important;
}
.shellfish-title{
    margin-left: 8vw!important;
}
.aquaculture-title{
	margin-left: 8.5vw!important;
}
.eggs-title{
	margin-left: 10.5w!important;
}
.cockles-title{
	margin-left: 9.5vw!important;
}

.refresh {
    position: relative;
    font-size: 2vw;
    top: -3.2vw;
    height: 0vw;
    left: 0vw;
}

.refresh1 {
    position: relative;
    font-size: 2vw;
    top: -1.2vw;
    height: 0vw;
    left: 0vw;
}
.seafood .year-small {
    font-size: 0.9vw;
    margin-top: -1vw;
}

.cockles-map .year-small {
    font-size: 0.9vw;
    margin-top: 0vw;
}
.seafood-right{
	/* float:right; */
	/* margin-top: 1vw; */
	position:absolute;
	right:0;
	width:16vw;
}
.pelagic-donut{
    margin-bottom: 1vw;
    margin-left: -1vw;
    background-image: url(../images/circle.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
	width:20vw;
}
.demersal-donut{
    margin-bottom: 1vw;
    margin-left: 4vw;
    background-image: url(../images/circle.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 16vw;
}
.shellfish-donut{
    margin-top: 16vw;
    margin-left: -1vw;
    background-image: url(../images/circle.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 16vw;
}
.aquaculture-donut{
    background-image: url(../images/circle.png);
    background-size: contain;
    background-repeat: no-repeat;
	position:absolute;
	top:1vw; right:0;
	width:15vw
}
.eggs-juvenile-donut{
    background-image: url(../images/circle.png);
    background-size: contain;
    background-repeat: no-repeat;
	position:absolute;
	top:17.7vw;
	right:4.8vw;
	width:14vw;
}
.data-demersal-donut {
	position: absolute;
    top: 1vw;
    left: 1.2vw;
    height: 12.6vw;
    width: 12.6vw;
    text-align: center;
    color: #878787;
}
.data-pelagic-donut {
    position: absolute;
    top: 0.7vw;
    left: 0.7vw;
    height: 12.6vw;
    width: 12.6vw;
    text-align: center;
    color: #878787;
}
.data-shellfish-donut {
    position: absolute;
    top: 3.2vw;
    left: 3.3vw;
    height: 12.6vw;
    width: 12.6vw;
    text-align: center;
    color: #878787;
}
.data-aquaculture-donut {
    position: absolute;
	top: 1.3vw;
    right: 1.2vw;
    height: 12.6vw;
    width: 12.6vw;
    text-align: center;
    color:#878787;
}
.data-eggs-juvenile-donut {
    position: absolute;
    top: .8vw;
    right: .8vw;
    height: 12.6vw;
    width: 12.6vw;
    text-align: center;
    color:#878787;
}

.data-demersal{
	padding:2vw;
}

.data-demersal h3{
	font-size: 1vw;
    font-weight: 100;
    line-height: 1vw;
}
.data-demersal .number{
    font-size: 2.5vw;
    font-weight: 600;
    margin: -1.5vw;
}

.data-demersal-img {
    width: 6vw;
    position: absolute;
    z-index: -20;
    left: 3.5vw;
    top: 1vw;
}

.data-demersal-text{
    position: relative;
    top: 0.5vw;
}

.data-pelagic{
	padding: 2vw 1.6vw;
}

.data-pelagic h3{
	font-size: 1vw;
    font-weight: 100;
    line-height: 1vw;
}
.data-pelagic .number{
    font-size: 2.5vw;
    font-weight: 600;
    margin: -1.5vw;
}

.data-pelagic-img {
    width: 6vw;
    position: absolute;
    z-index: -20;
    left: 3.5vw;
    top: 1vw;
}

.data-pelagic-text{
    position: relative;
    top: 0.5vw;
}


.data-shellfish{
	padding:1.75vw;
}

.data-shellfish h3{
	font-size: 1vw;
    font-weight: 100;
    line-height: 1vw;
}
.data-shellfish .number{
    font-size: 2.5vw;
    font-weight: 600;
    margin: -1.5vw;
}

.data-shellfish-img {
    width: 6vw;
    position: absolute;
    z-index: -20;
    left: 3.5vw;
    top: 1vw;
}

.data-shellfish-text{
    position: relative;
    top: 0.5vw;
}


.data-aquaculture{
	padding:1.3vw;
}

.data-aquaculture h3{
	font-size: 1vw;
    font-weight: 100;
    line-height: 1vw;
}
.data-aquaculture .number{
    font-size: 2.5vw;
    font-weight: 600;
    margin: -1.5vw;
}

.data-aquaculture-img {
    width: 6vw;
    position: absolute;
    z-index: -20;
    left: 3.5vw;
    top: 1vw;
}

.data-aquaculture-text{
    position: relative;
    top: 0.8vw;;
}

.data-eggs-juvenile{
	padding:1.5vw;
}

.data-eggs-juvenile h3{
	font-size: 1vw;
    font-weight: 100;
    line-height: 1vw;
}
.data-eggs-juvenile .number{
    font-size: 2.5vw;
    font-weight: 600;
    margin: -1.5vw;
}

.data-eggs-juvenile-img {
	width: 4vw;
    position: absolute;
    z-index: -20;
    left: 4.5vw;
    top: 1vw;
}

.data-eggs-juvenile-text{
    position: relative;
    top: 0.5vw;
}

.cockles-map{
    text-align: center;
    height: 25vw;
    margin-top: 2vw;
}
.cockles-map img{
    width: 16vw;
    margin-left: -6vw;
    margin-top: -1vw;
}
.cockles-map .datacirclecockles {
	top: -15vw;
    left: 28vw;
}

.cockles-map .number {
	font-size: 2.5vw;
    font-weight: 600;
    margin-top: -0.4vw;
    margin-bottom: 0.8vw;
}
.cockles-map h3{
    line-height: 1.3vw;
    margin-top: -1.5vw;
    margin-bottom: 0vw;
}

.cockles-map .year {
    color: #878787;
    width: auto;
    border-color: #ffcc00;
}

.datacirclecockles1{
	position: relative;
	cursor: pointer;
    top: -17vw;
    left: 15vw;
}
.dee-estuary {
	position: relative!important;
	top: 1vw!important;
    left: 16vw!important;
}
.burry-inlet {
	position: relative!important;
	top: 18vw!important;
    left: -1vw!important;
}
.economic-processing{
    margin-left: -8vw;
    margin-top: 14vw;
}
.economic-processing h2{
    position: relative;
    top: 3vw;
    border-color: #82c6d4!important;
	left:6vw
}
.economic-processing img{
	width: 23vw;
    margin-top: 2vw;
	margin-left:7vw
}
.economic-processing .data-circle{
	position: relative;
    top: 3vw;
    left: 10vw;
}
.economic-processing h3{
	/* font-weight: 100!important; */
    /* font-size: 1.5vw!important; */
    margin-top: 0.4vw;
}
.economic-processing .counter{
	font-weight:600;
}
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
a {
	color:white;
}

.pl, .ajax-link {
	cursor:pointer;
}

body.chart section {
	width:70vw;
	position:relative;
	color:#fff;
	font-family: 'Heebo', sans-serif;
	max-width:1280px;
    margin-bottom: 9vmin;
}

.seafood {
		margin-top:5vw;
}

.sf-header {
	position:fixed;
	height:8vmin;
	left:0;
	right:0;
	top:0;
	background:#e30613;
	z-index:1000;
}

.iframe-safety {
	position: relative;
    overflow: hidden;
    padding-top: 64%;
    margin-left: 9vw;
	width: 68vw;
}

.safety-wrapper{
	color:white;
}

.safety-content{
    background: #82c6d4;
    border-radius: 29px;
	margin-bottom:15vw;
}

.safety-info-left{
	float: left;
    padding: 3vw 1vw;
}
.safety-info-middle{
    width: 24vw;
    float: left;
    padding: 1.9vw 1vw 0vw 2vw;
}
.safety-info-middle h3{
    font-size: 1.4vw;
    font-weight: 600;
    line-height: 1.5vw;
}
.safety-info-middle p{
    font-size: 1.4vw;
    line-height: 1.5vw;
}
.safety-info-right{
	float: right;
    width: 24vw;
    padding: 2vw 2vw 0 0;
}

.safety-folder-image{
	width: 12.3vw;
}
.sf-header-container, .sf-content-container, .sf-footer-container {
	position:initial; top:0;height:100%;width:70vw; max-width:1280px; margin:0 auto;
}

.sf-header-container h1{
	color:white;float:left;font-size: 2.2vmin;font-weight:700;overflow:hidden;margin:2.5vmin 0 0 2.5vmin;
}

.sf-header-container img{
	float:right;height:80%; padding-top:0.9vh;
}

.sf-main-content{
	margin-top:10vmin;
	    overflow: hidden;
}
.sf-main-content, .sf-header{
}
.sf-footer{
	position:relative;min-height:9vmin;left:0;right:0;bottom:0;background:#837e77;
	z-index:999;
	color:white;
}
.sf-footer p{
}
.sf-footer a, .sf-footer p{
	text-decoration:none;
	color:white;
	font-size:1.8vmin!important;
}

.sf-footer-container {
	text-align:center;
	padding-top: 1vw;
}

.footer-logo {
    right: 2vmin;
    position: absolute;
    bottom: 2vmin;
    width: 22vmin;
}

.iframe-button {
    position: relative;
    overflow: hidden;
    padding-top: 130%;
	width:100%
}
	.iframe-button iframe {
		height: 0;
		max-height: 100%;
		max-width: 100%;
		min-height: 100%;
		min-width: 100%;
		width: 0;
	}

.resp-iframe-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.home-title {
	padding: 2.5vmin 0 1vmin 2.5vmin;
}
.home-buttons {
	max-width:300px;
	max-height:390px;
	margin-right:0.66vw;
	width:17vw;
	float:left;
	margin-top:4vmin;
}

.last-button {
	margin-right:0!important;
}

.home-content {
	display:flex;
	width:100%;
}

.home-info-left {
	margin-top:2.5vh;
	flex:1;
	padding:0 1.6vmin 0 2.6vmin;
	min-width:35vmax;
	border-right:1px solid white;
}
.home-info {
	margin-bottom:2vmin;
}
.home-info h3 {
	font-size:2vmin;
	font-weight:600;
	line-height:2.5vmin;
}

.home-info p{
	font-size:2vmin!important;
	line-height:2.5vmin;
}

.home-info-top{
	margin:-1vmin 2vmin 0vh 0.7vmin;
	padding-bottom:3vmin;
	text-align:justify;
}

.home-info-bottom{
	padding:1vmin 1.7vmin 0vmin 0.7vmin;
}

.logo {
	position: relative;
    width: 23vmax;
    margin-top: 1.5vh;
	padding:0 3vmin;
}

.logo p{
	line-height:3.5vmin;
}

.logo img{
	position:absolute;
	bottom:0;
	right:0;	
}
.definitions-small {
	width: 18vw;
    margin-left: -4vw;
    position: relative;
    bottom: -14vw;
}
.definitions-small p{
	font-size:1vw;
}
#menu { 
	transition: all .122s ease-in-out;
	height: 100%;
	width: 208px;
	padding: 4px 13px 20px;
	background-color: #06395b;
	color: #fff;
	display: block;
	overflow-y: auto;
	position: fixed;
	top: 0;
	z-index: 11111;
	right:-326px;
}
#menu.menu-on { right:0 }
#menu .close { font-size: 6.5vh;color:#fff!important; opacity:.9!important;
/* right:-134px; */
top: -1vmin;position:relative; cursor:pointer}
#home-button i { color:#fff; position:fixed; font-size:5vmin; margin: 1.45vmin 1.3vmin}
#help-button i { color:#fff; position:fixed; font-size:4vmin; margin: 2vmin 7.3vmin}
#menu-button i{ font-size:4.2vmin; color:#fff; position:fixed; top:0vmin; right:1.5vmin; padding:2vmin; z-index:1111; cursor:pointer }
#timeline-button {left:32vw!important}
.back { position:absolute; left:12px; top:12px; z-index:321!important; width:48px; height:48px; content:" "; background:url('img/bub.png') no-repeat center center / 100% auto; margin:0 auto; cursor:pointer; text-align:center; font-size:16px; padding:13px 0; text-transform:uppercase }

.slider .mob-nav.left { position:absolute; top:45vh; left:0; font-size:88px; line-height:0; z-index:13; cursor:pointer; margin:0 20px  }
.slider .mob-nav.right { position:absolute; top:45vh; right:0; font-size:88px; line-height:0; z-index:13; cursor:pointer; margin:0 20px }
.safety-wrapper {
	position: relative;
    top: 1vw;
}
/*
body.chart.quad::after {
	background:url('img/footer-seafood.png') no-repeat bottom center;
	background-size:100% auto
}
*/
/* viewport typography */

p { margin:0; font-size:1.1vw }

h1 { font-size: 2.8vmin;
    line-height: 3.2vmin;
    margin: 0vmin 2vmin 0vmin 0vmin;
    font-weight: 600; }

h2 { font-size: 1.7vw; line-height: 2.2vw; font-weight: 600; }
h3 { font-size: 1.4vw; line-height: 2vw; font-weight: 600; }

h2 .small { font-size:1.5vmin }

h3.target { font-size:2vmin }

.clipboard h3 { font-size:1.5vmin }

body.chart.quad { width:100vw }

#quad-wrapper {
	position:relative;
	z-index:13;
	top:0; left:0;
	-webkit-transition:top 222s, left 222ms!important;
	-moz-transition:top 222ms, left 222ms!important;
	transition:top 222ms, left 222ms!important;
	}

body.chart section > div { z-index:11 }
body.chart section canvas { cursor: pointer }
body.chart section .overlay { position:absolute; top:0; }
body.chart section .overlay.center { left:0; right:0; margin:0 auto }
body.chart section .overlay.left { top:8vh; left:0; width:33% }
body.chart section .overlay.right { right:0 }

.w100 { width:100% }
.h100 { height:100% }
.h85 { height:80% }
.h75 { height:75% }
.h60 { height:60% }
.h50 { height:50% }
.h45vh { height:45vh }
.h40 { height:40% }
.h25 { height:25% }
.h15 { height:15% }
.h10 { height:10% }


.chart-header { height:8vh; position:relative; z-index:1232!important; cursor:pointer }
.chart-header .bottom { position:absolute; bottom:0 }

.front-header { height:15vh }
.front-footer { height:5vh }

.front-header h1 { position:relative; height:100%; margin:0; font-size:3.4vmin; padding:5vmin 20vmin; font-weight:bold }
.front-header h1::before { content:" "; position:absolute; top:9px; left:14px; display:inline-block; width:80%; height:80%; background:url('img/dragon.png') no-repeat top left / contain }


section #infobox { position:absolute; top:0; right:0 }

h2 { margin-top:0 }

	.vam td { vertical-align:middle }
	.vab td { vertical-align:bottom }
	.vat td { vertical-align:top }
	td h1 { margin:1vh 0 }


.nm { margin:0!important }
.nw { white-space:nowrap  }

.navblock { width:50%; height:48%; display:inline-block; float:left; cursor:pointer; padding:2% }

.navblock .text { width:60%; height:100%; display:flex; align-items:center; vertical-align: middle; float:left }
.navblock .bub { width:40%; height:100%; padding-bottom:40%; position:relative;  display:inline-block; float:left; text-align:center }
.navblock .text h2  { padding:0 5%; text-transform:uppercase }
.navblock .text.right  { justify-content:flex-end; text-align:right }

.navblock.seafood .bub img { width:77.972%; height:auto; margin-top:11.71%}
.navblock.employment .bub img { width:75.524%; height:auto; margin-top:13.6365% }
.navblock.safety .bub img { width:68.182%; height:auto; margin-top:24.4755%  }
.navblock.economic .bub img { width:57.342%; height:auto; margin-top:12.5%  }

.seafood .bub::after { content:" "; position:absolute; top:0; left:0; width:100%; height:100%; background:url('img/bub1.png') no-repeat center center / 100% auto }
.employment .bub::after { content:" "; position:absolute; top:0; left:0; width:100%; height:100%; background:url('img/bub2.png') no-repeat center center / 100% auto }
.safety .bub::after { content:" "; position:absolute; top:0; left:0; width:100%; height:100%; background:url('img/bub3.png') no-repeat center center / 100% auto }
.economic .bub::after { content:" "; position:absolute; top:0; left:0; width:100%; height:100%; background:url('img/bub4.png') no-repeat center center / 100% auto }

.back { position:absolute; left:0; right:0; bottom:1vmin; z-index:321!important; width:64px; height:64px; content:" "; background:url('img/bub.png') no-repeat center center / 100% auto; margin:0 auto; cursor:pointer; text-align:center; font-size:20px; padding:18px 0; text-transform:uppercase }

.clipboard {     position: relative;
    background: #024a93;
    padding: 37px 17px 0px;
    border-radius: 16px;}
.clipboard::before1 { content:" "; position:absolute; top:-15%; left:0; right:0; height:25%; background:url('img/clip.png') no-repeat top center / 40% auto; z-index:11 }
.clipboard .inner {    background: #ededed;
    height: 96%;
    position: relative;}

.clipboard .inner h2 { text-transform:uppercase }
.clipboard .inner h4 { margin:0; font-weight:bold }
.clipboard .inner h2.top { padding:1em 0; text-align:center; font-weight:bold; color:#044a93 }
.clipboard .inner .grey { color:#707070 }
.clipboard .inner ul { color:black }
.clipboard .inner p.bottom { position:absolute; bottom:0; padding:1em }
.clipboard .inner.oy { overflow-y:hidden }
.clipchart {
    width: 100%;
}
section.safety h3 { font-size: 1.37vw }
h3 .safety-img { width:4.7vw; height:4.7vw; display:inline-block; text-align:center }
h3 .safety-img.crew img {height:100%; width:auto }
h3 .safety-img.vessel img {width:100%; height:auto; margin:10.884% 0 }
h3 .safety-img.folder img {height:100%; width:auto }

#employment-left{
	float:left;
	width:46%;
}

#employment-graph{
	width:48%;
	padding:2%;
	float:left;
}
#employment-cockle_fisheries{
    margin-bottom: 2vmin;
    width: 32%;
	float:left;
}

#employment-sea_fisheries {
    margin-bottom: 2vmin;
    width: 24%;
	float:left;
}

.businessesemployment{
	position: relative;
    left: 3vw;
}
#employment-processing {
    height: 20vmin;
    margin-bottom: 7vmin;
	width:63%;
	float:right;
}

#employment-aquaculture{
    margin-bottom: 2vmin;
    width: 24%;
	float:right;
}

#employment-cockle_fisheries .uc.ul, #employment-cockle_fisheries .year{
    border-color: #ffcc00;
}

#employment-sea_fisheries .uc.ul, #employment-sea_fisheries .year, .pelagic-donut .year, .demersal-donut .year, .shellfish-donut .year, .seafood-left h2{
	border-color:#518936;
}

#employment-processing .uc.ul, #employment-processing .year, .economic-processing .year{
	border-color:#82c6d4;
}

#employment-aquaculture .uc.ul, #employment-aquaculture .year, .aquaculture-donut .year, .eggs-juvenile-donut .year{
	border-color:#c0136b;
}
.uparrow {
    width: 17vw;
    position: absolute;
	margin-left: 21vw;
    margin-top: -1vw;
	font-size: 0.8vw;
    opacity: 0.7;
}

.uparrow img {
    width: 7vw;
    margin-left: 2.5vw;
}
.year {color: #878787;}
.year1 {
    background: white;
    z-index: 10000000;
    border: 2px solid;
    padding: 0.4vw 1.2vw 0.2vw 1vw;
    font-size: 0.8vw;
    width: 3vw;
    -moz-border-radius: 70px;
    border-radius: 70px;
}
.cockles-map .year1 {
	color: #878787;
    width: auto;
    border-color: #ffcc00;
    left: 24vw;
    position: absolute;
    width: 8vw;
	margin-top:5vw;
}
 .pelagic-donut .year {
	top: 0vw!important;
    left: 3.87vw!important;
}
 .demersal-donut .year {
	top: 0vw!important;
    left: 4.87vw!important;
}
 .shellfish-donut .year {
	top: 0vw!important;
    left: 6.87vw!important;
}
 .aquaculture-donut .year {
	top: 0vw!important;
    left: 4.87vw!important;
}
 .eggs-juvenile-donut .year {
	top: 0vw!important;
    left: 3.87vw!important;
}
.fisheries1 .year{
	top: 3vw!important;
    left: 2.87vw!important;

}
.economic-processing .year {
	top: 20vw!important;
    left: 5vw!important;
}
.cockles1 .year{
	top: 10.2vw;
    left: 2.8vw;
}
.aqua1 .year{
    top: 0;
    left: -4vw;
}
.aqua2 .year, .seaemployees1 .year, .fishermen1 .year{
    top: 12.1vw;
    left: 4vw;
}
.businesses1 .year{
    top: 0.4vw;
    left: 2.8vw;
}
.column-left{
	float:left;
	width:49%;
}

.column-right{
	float: right;
    width: 39%;
    margin-top: 2vw;
    right: 0vw;
    position: relative;
}

.column-left-inner{
	float:left;
	width:49%;
}

.column-right-inner{
	float:right;
	width:auto;
}

.column-left-inner .small, .column-right-inner .small {
	margin-top: -0.5vmin;
    margin-bottom: 2vmin;
}

.totalanim {
	text-align: center;
    font-weight: 300!important;
    background-repeat: no-repeat;
    background-size: contain;
    color: #878787!important;
	width: 12vw;
    height: 13vw;
    text-transform: uppercase;
    vertical-align: middle;
    display: flex;
	justify-content: center;
	align-items: center;
    padding-bottom: 1vmin;
}

.circlegreen{
    background-image: url(../images/greencircle.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.circleyellow{
    background-image: url(../images/yellowcircle.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.circleblue{
    background-image: url(../images/bluecircle.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.circlepurple{
    background-image: url(../images/purplecircle.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.totalanimlarge{
    width: 13vw;
    height: 15vw;
}

.totalanim h2{
    font-size: 1.1vw;
    font-weight: 300;
    line-height: 1.3vw;
}

.totalanim h3{
    font-size: 0.9vw;
    font-weight: 300;
    line-height: 1.3vw;
}
.totalanimlarge h2{
	font-size: 1.3vw;
}

.totalanimlarge .counter{
	font-size: 3.6vw;
}

.newsplitdata {
	margin-top:-2vw;
}
	

.newdata {
}

.year {
	top: -2vw;
    position: relative;
}

.aquapic1 {
	position: relative;
    top: -9vw;
    left: 11.7vw;
}

.aquapic2 {
    position: relative;
    top: -23vw;
    right: 1vw;
}

.aquapic3 {
	position: relative;
    top: -14vw;
    left: -1.5vw;
}

.seaemp1{
	width: 70%;
    position: absolute;
    left: -11vw;
    top: -7.8vw;
}

.seaemp2{
	width: 74%;
    position: absolute;
    left: 3vw;
    top: -7.5vw;
}

.empmin {
	width: 56%;
    position: absolute;
    top: 10vw;
    left: -3vw;
}

.seaemp3{
	width: 59%;
    position: absolute;
    left: 3vw;
    top: -1vw;
}

.aquafinpic1{
    width: 86%;
	position: absolute;
    right: -0.5vw;
    top: -9vw;
}

.aquafinpic2{
	position: absolute;
    right: -0.5vw;
    top: 2.5vw;
}

.aquafinpic3{
    width: 100%;
    position: absolute;
    right: 9vw;
    top: -2vw;
}

.seafishpic1{
	width: 40%;
    position: absolute;
    left: 0vw;
    top: -1vw;
}

.seafishpic2 {
	width: 40%;
    position: absolute;
    left: -27vw;
    top: -1vw;
}


.seafishpic3{
	width: 40%;
    position: absolute;
    left: -27vw;
    top: -1vw;
}

.counter{
	font-size: 2.8vw;
    font-weight: 300;
    padding: 0;
    display: inline-table;
    margin-bottom: -1vw;
    margin-top: -2.4vw;
}

.boat-image-employee {
	width: 50%;
    margin-top: -5.5vw;
    margin-left: 2vw;
    position: absolute;
}

.producers-image-employee {
    width: 43%;
    margin-top: -5vw;
    margin-left: 5vw;
}
.data-circle{
	margin-top:1vw;
	cursor: pointer;
}

.hidden {display:none;}#

.hiddenbuttonvessels1, .hiddenbuttonvessels2 {
	position: absolute;
    height: 12vw;
    width: 12vw;
    top: 8vw;
    left: 0vw;
	z-index:1000000;
}
.chartCont			{ min-height: 26vw }
.chartCont canvas	{ position:relative; z-index:123 }

.hiddenbuttonvessels1, .hiddencocklesbutton1, .hiddencocklesbutton2, .hiddenbusinessesbutton1, .hiddenbusinessesbutton2,.hiddenbuttonfishermen1, .hiddenbuttonfishermen2, .hiddenbuttonaqua1, .hiddenbuttonaqua2, .hiddenbuttonaqua3, .hiddenbuttonaqua4, .hiddenprocessingbutton1, .hiddenprocessingbutton2 {
	position: absolute;
    height: 12vw;
    width: 12vw;
    top: 0vw;
    left: 0vw;
	z-index:1000000;
}

.datacirclefishermen{
    left: 3vw;
    position: relative;
	cursor: pointer;
	top:1vw;
}

.datacircleaquaprod{
    left: 3vw;
    position: relative;
	cursor: pointer;
}

.datacircleemployees{
	right: 3vw;
    position: absolute;
	cursor: pointer;
	margin-top: 4vw;
}
.datacirclecockles{
	position: relative;
	cursor: pointer;
    left: 2vw;
    top: 1vw;
}
.fisherman-image-employee {
    width: 30%;
    margin-top: -13vw;
    margin-left: 11vw;
}
.cockles-image-employee{
	width: 28%;
    margin-top: -12vw;
    margin-left: -2vw;
}
.business-image-employee {
    width: 43%;
    margin-top: -6vw;
    margin-left: 6vw;
}
.aquaemployeeimage, .producers-image-employee{
    width: 47%;
	position: absolute;
}
.seafoodemployeeimage{
    width: 39%;
    margin-top: -6vw;
    right: -8vw;
    position: relative;
}

.fishermen1pad {
	padding:0 3vw;
	margin-top:-1vw;
}

 .seaemployees1, .businesses1-2 {
	padding:0 3vw;
}

.aqua2-1, .aqua1-2, .fisheries1-2, .fisheries1-3{
	display:none;
    padding: 0vw 3vw;
    margin-top: -1vw;
}

.year {
    position: absolute;
    background: white;
    z-index: 100000;
    border: 2px solid;
    display: table-cell;
    padding: 0.4vw 1.2vw 0.2vw 1vw;
    font-size: 0.8vw;
	-moz-border-radius: 70px;
    -webkit-border-radius: 70px;
    border-radius: 70px;
	text-transform:uppercase
}
.reset {
    position: relative;
    font-size: 2vw;
    top: -1.5vw;
    height: 0vw;
    left: 0vw;
}
.year-small{
	font-size: 0.9vw;
}
.empgraph {
    left: 7vw;
    position: relative;
    top: -1.4vw;
}
.empgraphemp {
    left: 9vw;
    position: relative;
    top: -1.4vw;
}
.processingemployees1-2 .circle-top {
	margin-top:-1vw;
}
.fishermenChartcont h2{
	left: 8vw;
}
.cocklesChartcont h2{
	left: 5vw;
}

.processingChartcont h2{
	left: 7vw;
}

.businessesChartcont h2{
	left:6vw;
}

.aquaempChartcont h2{
	left: 6vw;
}
.producersChartcont h2 {
	left: 6vw;
}

.hidden1 {
	display:none;
}
.aquaemployeeimage2, .producers-image-employee1, .boat-image-employee1, .boat-image-employee2{
	display:none;
    width: 47%;
    margin-top: -5vw;
    right: 8vw;
    position: absolute;
}
.circle-number-top{
	font-size: 2vw;
    margin-top: 0.6vw;
}
.circle-number-bottom{
	font-size: 2vw;
    margin-bottom: 0.5vw;
}
.circle-top {
	border-bottom: 2px solid #878787;
    height: 3.5vw;
}
.circle-bottom{
	height: 3vw;
    padding-top: 0.8vw;
}

.definitions {
    font-size: 1vw;
	text-align:center;
}
.definitions p{
    font-size: 0.8vw!important;
    line-height: 1vw;
	text-align:center;
}

ul.tick {
	list-style: none;
	text-align: left;
	padding: 0;
}

ul.tick li::before {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 64px;
	height: 64px;
	content: " ";
	position: absolute;
	left: 0;
	display: inline-block;
	vertical-align: middle;
	background: transparent no-repeat center center;
}
ul.tick li.fat::before { background-image:url('img/crewman.png'); background-size: auto 100% }
ul.tick li.ves::before { background-image:url('img/lostvessel.png'); background-size: 100% auto }
ul.tick li {
	vertical-align: middle;
	position: relative;
	padding-left: 48px;
	height: 48px;
	display: table;
	width: 50%;
	float:left
}

ul.list-tabled			{ list-style:none; padding:0 }
ul.list-tabled li		{ margin:6px 0; display:table; padding:4px }
ul.list-tabled li > div	{ display:table-cell; vertical-align:middle; padding:4px }

ul.list-tabled.flx li	{ display:flex!important; align-items:center!important; }

#news li { border-bottom:3px solid #024a93; padding:0; margin: 5px 9px 0px;padding-bottom:10px;}
#news li { border-bottom:3px solid #024a93; padding:0; margin: 5px 9px 0px;padding-bottom:10px;}
#news li .col-sm-4 { width: 11vw; height:11vw; overflow:hidden;}
#news li .col-sm-4 img { min-height: 100%; max-height:150%; min-width:100%; max-width:150%; margin-left: -4%;}
#news li .col-sm-6 {  height:11vw; overflow:hidden;margin-left:5px;width:46%;}
#news li .col-sm-6 h5 { font-size:1.8vmin;font-weight:bold;margin-top: -3px; margin-bottom: 3px;}
#news li .col-sm-6 p { font-size:1.4vmin}

.clipcont{
    width: 21vw;
    height: 37vw;
    position: relative;
    float: right;
    top: 2vw;
}
.clip {height:0; text-align:center;}
.clip img {    width: 7vw;
    min-width: 90px;
    margin-top: -113px;
    position: relative;
    z-index: 123; }
/* DONUT SVG */

.donut { position:relative }
.donut svg {
	max-width:190%; max-height:190%;
	position:absolute; top:-999px; left:-999px; bottom:-999px; right:-999px; margin:auto!important
}

#donut-pelagic			{ height:25vh; margin-left:-10vw }
#donut-pelagic	svg		{  }

#donut-demersal			{ height:30vh; margin-left:-5vw }
#donut-demersal	svg		{  }

#donut-shellfish		{ height:35vh; }
#donut-shellfish svg	{  }

#donut-aquaculture		{ height:32vh; position:relative; left:-30% }

#donut-eggs_juveniles	{ height:22vh; position:absolute; right:-5%; top:3vmin }

#donute-pelagic			{ height:28vh; }
#donute-demersal		{ height:32vh; }
#donute-shellfish		{ height:36vh; }
#donute-aquaculture		{ height:32vh;  }

#seafood-intertidal { position:absolute; bottom:0 }
#economic-intertidal { position:absolute; bottom:0 }

.donut svg path.slice{
	stroke-width:2px;
}

.donut svg polyline{
	opacity: .3;
	stroke: #fff;
	stroke-width: 2px;
	fill: none;
}
.donut svg text
{
	color:#fff
}

svg.cocklemap {
	max-width:100%; max-height:100%; width:auto; height:auto;
	position:absolute;
	top:-999px; left:-999px; bottom:-999px; right:-999px;
	margin:auto!important
}
svg.cocklemap .labels #total 	{ display:block; font-size:167% }

/* custom image sizes */

.ir { width:100%; height:auto; display:block; margin:0 auto }

.vessels-under10	{ max-width:101px }
.vessels-over10		{ max-width:212.5px }
.employment-regular	{ max-width:116px }
.employment-parttime{ max-width:126px }

.prod-maj	{ max-width:94px }
.prod-min	{ max-width:98.5px }

.prod-shell	{ max-width:115px }
.prod-fin	{ max-width:100.5px }

.crewman 	{ max-width:34.5px }
.emp-m1 	{ max-width:48.5px }
.emp-f1 	{ max-width:41px }
.emp-f2 	{ max-width:44.5px }

.emp-coc1 	{ max-width:52.5px }
.emp-coc2 	{ max-width:74.5px }
.permit		{ max-width:102px }

.seasonal	{ max-width:70px }


/* gradient boxes */




.flex {
	-webkit-box-orient: vertical;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
	-moz-justify-content: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.fl { height:100%; display:flex; justify-content: center; align-items:center }

.uc { text-transform:uppercase }
.nuc { text-transform:none }
.nuc { text-transform:none }
.small { color:inherit!important; /* font-size:16px!important */ }
.large { font-size:267% }
.small.wrap,
.large.wrap { display:block }
.uc.ul { border-bottom:2px solid; padding-bottom:0.1vh;display:table-cell; }


@media only screen 
and (orientation : portrait)
{
	.safety-info-middle{
		width: 44vw;
		float: left;
		padding: 3.2vw 1vw 0vw 2vw;
	}
	
	body.chart section {
		width:90vw;
	}
	.sf-header-container, .sf-content-container, .sf-footer-container {
		position:initial; top:0;height:100%;width:90vw;
	}

	.sf-header-container img{
		position:absolute; right:3vw; height:70%; padding-top:1.4vmin; padding-right:5vw;
	}
	.home-info-left {
		padding:0 1.6vmin 0 1.4vmin;
	}

	.logo {
		width: 23vmax;
	}
	
	.home-buttons {
		width:22vw;
	}
	
	#help-button i {
		color: #fff;
		position: fixed;
		font-size: 4vmin;
		margin: 10vmin 2vmin;
	}
	#quad-wrapper {
		position:relative;
		z-index:13;
		top:0; left:0;
		-webkit-transition:top 222s, left 222ms!important;
		-moz-transition:top 222ms, left 222ms!important;
		transition:top 222ms, left 222ms!important
		}

	#quad-wrapper.west-nav	{ top:200vh; left:0 }
	#quad-wrapper.north-nav	{ top:400vh; left:0 }
	#quad-wrapper.south-nav	{ top:600vh; left:0 }
	#quad-wrapper.east-nav	{ top:800vh; left:0 }
	
	.h85 { height:auto }
	
	.navblock { display:flex; align-items:center; width:100%; height:20vh; float:none }
	.navblock h2 { margin-bottom:0; font-size:5vmin }
	.navblock .bub { width:30%; padding-bottom:30% }
	
	.front-content .h85 { margin-bottom:10vh }
	
	/* employment */
	section.employment .green	{ height:auto }
	section.employment .blue	{ height:auto }
	section.employment .purple	{ height:auto }
	section.employment .yellow	{ height:auto }
	section.employment .row		{ clear:both }
	
	section.employment .h45vh	{ height:auto }
	
	#employment-sea_fisheries img.h50,
	#employment-processing img,
	#employment-aquaculture img,
	#employment-cockle_fisheries img
	{ max-height:80px }
	
	section .mob-nav.left { position:absolute; top:21vh; left:0; font-size:88px; line-height:0; z-index:13; cursor:pointer;  }
	section .mob-nav.right { position:absolute; top:21vh; right:0; font-size:88px; line-height:0; z-index:13; cursor:pointer; user-select:none }
	
	
	/* safety */
	section.safety .h85 { height:100vh }
	section.safety h3 { font-size: 2vw }
	h3 .safety-img { width:7vw; height:7vw }
	
	
	/* seafood / economic */
	body.chart section .overlay { position:absolute }
	
	body.chart section .overlay.left,
	body.chart section .overlay.right { width:300vw; top:0; left:0; transition:left 222ms }

	body.chart section .overlay.center { top:50vh; height:50vh; z-index:14 }
	
	body.chart section .donut	{ width:100vw; position:absolute; top:0 }
	body.chart section .donut > svg	{ position:absolute; top:-999px; left:-999px; bottom:-999px; right:-999px; margin:auto!important }
	
	
	#donut-pelagic			{ height:50vh; left:0; margin-left:0 }
	#donut-pelagic	svg		{ max-width:150% }

	#donut-demersal			{ height:50vh; left:100vw; margin-left:0 }
	#donut-demersal	svg		{ max-width:150% }

	#donut-shellfish		{ height:50vh; left:200vw; margin-left:0 }
	#donut-shellfish svg	{ max-width:150% }

	#donut-aquaculture		{ height:50vh; left:300vw; }
	#donut-aquaculture svg	{ }

	#donut-eggs_juveniles		{ height:50vh; left:400vw }
	#donut-eggs_juveniles svg	{  }
	
	#seafood-intertidal		{ height:50vh; width:100vw; position:absolute; top:0; left:500vw }
	#seafood-intertidal .h85	{ height:100%!important }
	

	#donute-pelagic			{ height:50vh; left:0; margin-left:0 }
	#donute-pelagic	svg		{ max-width:150% }
	
	#donute-demersal		{ height:50vh; left:100vw; margin-left:0  }
	#donute-demersal svg	{ max-width:150% }
	
	#donute-shellfish		{ height:50vh; left:200vw; margin-left:0  }
	#donute-shellfish svg	{ max-width:150% }
	
	#donute-aquaculture		{ height:50vh; left:300vw; margin-left:0  }
	#donute-aquaculture	svg	{ max-width:150% }

	#economic-intertidal		{ height:50vh; width:100vw; position:absolute; top:0; left:400vw }
	#economic-intertidal .h85	{ height:100%!important }
	
	h2 .small { font-size:2.5vw }
	.sf-footer{
		position:fixed;
	}
	.home-info {
    margin-bottom: 11vmin;
	}
}


@media only screen
and (max-width : 716px)
and (orientation : portrait)
{
	.clr {
		float:none;
		clear:both;
	}
	#closedesktop {
		display:none;
	}
	#closemobile {
		display:block;
	}
	.definitions p, .warning p, .year1 {
		font-size: 1.8vw!important;
		line-height: 1.8vw;
		text-align: center;
	}
	.warning{
		position: relative;
		top: -13vw;
		width: 93%;
		display:block;
	}
	.economic-processing h2 {
		display:none!important;
	}
	.economic-swiper .aquaculture-donut{
		left: 29vw!important;
	}
	#mobile-donuts {
		position: absolute;
		top: 77vw;
		width: 109%;
		overflow: hidden;
		height: 54vw;
		margin-left: -5vw;
		padding: 0% 4.5%;
	}
	#mobile-fisheries{
	}
	#mobile-cockles{
		top:-16vw
	}
	#mobile-aqua{
		top:8vw;
	}
	#mobile-processing{
	}
	#timeline-button {
		left: 85vw!important;
	}
	#help-button { display:none }
	#home-button i { font-size:4vmin; margin: 1.8vmin 1.3vmin}
	.sf-header-container h1{
		font-size: 3.3vmin;
	}
	h2 { font-size: 3vw; line-height: 3.2vw; font-weight: 600 }
	p { font-size:0.75em }
	.reset,.refresh { font-size:1.5em; position:absolute; top:-1.5em; z-index:11 }
	.refresh { top:0.4em }
	#employment-graph {
		padding: 0;
		position: absolute;
		width: 90vw;
		top: 8vw;
	}
	#employment-sea_fisheries {
		display: none;
	}
	#employment-aquaculture {
		display: none;
	}
	#employment-bottom{
		position: absolute;
		top: 91vw;
		left: 0vw;
		display: none;
	}
	#employment-top .year-small, #employment-bottom .year-small{
		font-size: 1.9vw;
		position: relative;
		top: 1.5vw;
	}
	#employment-top .totalanim h2, #employment-bottom .totalanim h2 {
		font-size: 2.1vw;
		font-weight: 300;
		line-height: 2.3vw;
		margin-bottom:0
	}
	#employment-top .counter, #employment-bottom .counter {
		font-size: 3.8vw;
		font-weight: 300;
		padding: 0;
		display: inline-table;
		margin: 0!important;
		
	}
	#employment-top .totalanim, #employment-bottom  .totalanim{
		height:19vw;
	}
	.fishcircle1{
		left: 19vw;
		position: absolute;
		top: 15vw;
	}
	.fisheries1 .year {
		top: -5vw!important;
		left: -1vw!important;
		width: 10vw;
	}
	.fishermenemployment .year {
		top: -6vw!important;
		left: 0vw!important;
		width: 10vw!important;
	}
	.businesses1 .year {
		top: -0.6vw;
		left: 2.8vw;
	}
	.cockles1 .year {
		top: -1.8vw;
		left: 2.8vw;
	}
	.processingemployment .year {
		top: -0.5vw;
		left: 3vw;
	}
	.aqua1 .year {
		top: 0;
		left: 2.5vw;
	}
	.aqua2employment .year {
		top: -0.5vw;
		left: 2vw;
		width: 15vw;
	}
	.datacirclefishermen{
		position: absolute!important;
		top: 15vw!important;
		left: 49vw!important;
	}
	.fisheries1, .fishermen1{
		margin-top: -4vw;
		position: absolute;
		font-size: 5vw;
	}
	.fishermen1-2{
		margin-top:-3vw;
	}
	.fishermen1-2 .year-small, .aqua1 .year-small, .aqua2 .year-small, .seaemployees1 .year-small {
		margin-top:2vw;
	}
	.datacirclecockles{
		margin-top: 29vw;
	}
	.cockles1, .aqua1, .aqua2, .seaemployees1, .businesses1, .data-eggs-juvenile, .data-aquaculture{
		margin-top: -5vw;
	}
	.datacircleaquaprod{
		left: 19vw;
		top: 5vw;
		position: absolute;
	}
	.datacircleemployees{
		left: 49vw;
		position: absolute;
		cursor: pointer;
		margin-top: -5.5vw!important;
		right: -24vw;
	}
	.businessesemployment {
		position: absolute;
		left: 19vw;
		top: 15vw;
	}
	.businessesbutton1 {
		width: 22vw!important;
		position: absolute;
		top: -8vw;
		left: -1vw;
	}
	.businessbuttonemployment {
		width: 22vw!important;
		position: absolute;
		top: 16vw!important;
		left: 49vw!important;
	}
	.economic-processing .year {
		top: 1vw!important;
		left: 36vw!important;
	}
	.counter {
		font-size: 3.8vw;
		font-weight: 300;
		padding: 0;
		display: inline-table;
		margin-bottom: -1vw;
		margin-top: -2.4vw;
	}
	.totalanim h2 {
		font-size: 2.1vw;
		font-weight: 300;
		line-height: 2.3vw;
	}
	.year-small {
		font-size: 1.9vw;
	}
	.hiddenbuttonvessels1, .hiddenbuttonvessels2 {
		position: absolute;
		height: 20vw;
		width: 20vw;
		top: 3vw;
		z-index: 1000000;
	}
	.hiddencocklesbutton1, .hiddencocklesbutton2, .hiddenbusinessesbutton1, .hiddenbusinessesbutton2, .hiddenbuttonfishermen1, .hiddenbuttonfishermen2, .hiddenbuttonaqua1, .hiddenbuttonaqua2, .hiddenbuttonaqua3, .hiddenbuttonaqua4, .hiddenprocessingbutton1, .hiddenprocessingbutton2 {
		position: absolute;
		height: 21vw;
		width: 22vw;
		top: 0vw;
		left: 0vw;
		z-index: 1000000;
	}
	.producers-image-employee1, .boat-image-employee1, .boat-image-employee2 {
		width: 22%;
		margin-top: -15vw;
		right: 11.5vw;
		position: absolute;
	}
	.aquaemployeeimage2 {
		width: 6%;
		margin-top: -21vw;
		left: 6.5vw;
		position: absolute;
	}
	.aquaemployeeimage{
		width: 23%;
		position: absolute;
	}
	.producers-image-employee {
		margin-top: -21vw;
		margin-left: 5vw;
	}
	.aquafinpic1 {
		width: 86%;
		position: absolute;
		right: -1.5vw;
		top: -9vw;
	}
	.aquafinpic2 {
		position: absolute;
		right: -1.5vw;
		top: 11.5vw;
	}
	.producers-image-employee1{
		display: none;
		width: 47%;
		margin-top: -23vw;
		right: 8vw;
		position: absolute;
	}
	.aquapic1 {
		position: relative;
		top: 4vw;
		left: 11.7vw;
	}
	.aquapic2 {
	    position: relative;
		top: -7vw;
		right: 5vw;
	}
	.aquapic3 {
		position: relative;
		top: -22vw;
		left: 17.5vw;
		width: 36%!important;
	}
	.seaemp1 {
		width: 70%;
		position: absolute;
		left: -10vw;
		top: -5.8vw;
	}
	.seaemp2 {
		width: 74%;
		position: absolute;
		left: 9vw;
		top: -5.5vw;
	}
	.empmin {
		width: 56%;
		position: absolute;
		top: 18vw;
		left: -3vw;
	}
	.businessesbutton1{
		width: 22vw!important;
	}
	.circle-top {
		border-bottom: 2px solid #878787;
		height: 5.5vw;
	}
	.datacirclefishermen {
		left: 20vw;
		position: relative;
		cursor: pointer;
		top: -13vw;
	}
	.fisherman-image-employee {
		width: 18%;
		margin-top: -20vw;
		margin-left: 18vw;
	}
	.boat-image-employee {
		width: 152%;
		margin-top: -13.5vw;
		margin-left: -6vw;
		position: absolute;
	}
	.seafishpic2, .seafishpic3 {
		width: 277%!IMPORTANT;
		position: absolute;
		left: -11vw;
		top: 1vw;
	}
	.seafoodemployeeimage {
		width: 39%;
		margin-top: -16vw;
		right: -8.5vw;
		position: relative;
	}
	.uparrow {
		width: 27vw;
		position: absolute;
		margin-left: 21vw;
		margin-top: -1vw;
		font-size: 1.8vw;
		opacity: 0.7;
		left: 38vw;
		top: 10vw;
	}
	.uparrow img {
		width: 18vw;
		margin-left: 5.5vw;
	}
	.hidden-m { display:none }
	
	.moff { opacity:0!important; transition:opacity .6s } 
	.mon { opacity:1!important }
	
	#mobile-nav-lower{
        display: block;
		position: absolute;
		top: 76vw;
		font-size: 3vw;
	}
	#mobile-nav-lower i.fa { font-size:5vw; vertical-align:bottom }
	.mobile-right{
		position: absolute;
		right: -70vw;
		top: 0vw;
		cursor:pointer;
	}
	.mobile-right i { margin-left:1vw }
	.mobile-left{
		cursor:pointer;
	}
	.mobile-left i { margin-right:1vw }
	.pelagic-donut {
		margin-top: 5vw;
		margin-left: 2vw; 
		background-image: url(../images/circle.png);
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		top: -5vw;
		left: -2vw;
		width:26vw!important;
	}
	.demersal-donut {
		margin-top: 5vw;
		margin-left: 2vw;
		background-image: url(../images/circle.png);
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		top: -5vw;
		left: 61vw;
		width: 26vw!important;
	}
	.shellfish-donut {
		margin-top: 5vw;
		margin-left: 2vw; 
		background-image: url(../images/circle.png);
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		top: 1vw;
		left: 26vw;
		width:32vw!important;
	}
	#shellfish{
	    /* width: 32vw!important; */
		height: 32vw!important;
		margin:0 -7vw!important;
	}
	#pelagic, #demersal{
	    /* width: 32vw!important; */
		height: 26vw!important;
		margin:0 -6vw;
	}
	#aquaculture{
	    /* width: 32vw!important; */
		height: 32vw!important;
		margin:0 -9vw;
	}
	#eggsjuveniles{
	    /* width: 32vw!important; */
		height: 32vw!important;
		margin:0 -9vw;
	}
	.aquaculture-donut {
		margin-top: 5vw;
		margin-left: 2vw; 
		background-image: url(../images/circle.png);
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		top: -8vw;
		left: 8vw;
		width:32vw!important;
	}
	.data-aquaculture-donut {
		position: absolute;
		top: 11.2vw;
		left: 2.8vw;
		height: 26.6vw;
		width: 25.6vw;
		text-align: center;
		color: #878787;
	}
	.data-aquaculture h3 {
		font-size: 2vw;
		font-weight: 100;
		line-height: 2vw;
	}
	.aquaculture-image {
		position: relative;
		left: -18vw;
		top: 2vw;
		width: 14vw;
	}
	.eggs-image {
		position: relative;
		top: 4vw;
		left: 12vw;
		width: 18vw;
	}
	.eggs-juvenile-donut {
		margin-top: 5vw;
		margin-left: 2vw; 
		background-image: url(../images/circle.png);
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		top: -8vw;
		left: 48vw;
		width:32vw!important;
	}
	.data-eggs-juvenile-donut {
		position: absolute;
		top: 11.2vw;
		left: 2.8vw;
		height: 26.6vw;
		width: 25.6vw;
		text-align: center;
		color: #878787;
	}
	.economic-processing img {
		width: 23vw;
		margin-top: 19vw;
		margin-left: 7vw;
	}
	.data-eggs-juvenile h3 {
		font-size: 2vw;
		font-weight: 100;
		line-height: 2vw;
	}
	.data-shellfish h3, .data-demersal h3, .data-pelagic h3 {
		font-size: 1.9vw;
		font-weight: 100;
		line-height: 2.3vw;
	}
	.data-shellfish .number, .data-demersal .number, .data-pelagic .number{
		font-size: 3.5vw;
		font-weight: 600;
		margin: -1.5vw;
	}
	.seafood .year-small {
		font-size: 1.9vw;
		margin-top: -1vw;
	}
	.data-pelagic-donut {
		position: absolute;
		top: 1.7vw;
		left: 3.3vw;
		height: 25.6vw;
		width: 19.6vw;
		text-align: center;
		color: #878787;
	}
	.data-shellfish-donut {
		position: absolute;
		top: 6.2vw;
		left: 2.8vw;
		height: 26.6vw;
		width: 25.6vw;
		text-align: center;
		color: #878787;
	}
	.data-demersal-donut {
		position: absolute;
		top: 1.7vw;
		left: 2.8vw;
		height: 26.6vw;
		width: 19.6vw;
		text-align: center;
		color: #878787;
	}
	.data-demersal-donut-default{
		margin-top:1vw;
	}

.totalanim		{ padding-top:1vw; padding-bottom:2vw }
.column-left	{ width:auto }
.column-right	{ margin-top:3.7vw }

	.economic-processing {
		margin-left: -18vw;
		margin-top: -15vw;
	}
	.pelagic-donut .hiddendata-button {
		z-index: 10;
		width: 21.3vw;
		height: 21.3vw;
		position: absolute;
		left: 2.4vw;
		top: 2.4vw;
		border-radius: 50%;
	}
	.demersal-donut .hiddendata-button {
		z-index: 10;
		width: 21vw;
		height: 21vw;
		position: absolute;
		left: 2vw;
		top: 2.5vw;
		border-radius: 50%;
	}
	.cocklessupply {
		margin-top:0vw!important;
	}
	.shellfish-donut .hiddendata-button {
		z-index: 10;
		width: 19.2vw;
		height: 20vw;
		position: absolute;
		left: 6.4vw;
		top: 6.4vw;
	}
	.aquaculture-donut .hiddendata-button {
		z-index: 10;
		width: 19.2vw;
		height: 20vw;
		position: absolute;
		left: 6.4vw;
		top: 6.4vw;
	}
	.eggs-juvenile-donut .hiddendata-button {
		z-index: 10;
		width: 19.2vw;
		height: 20vw;
		position: absolute;
		left: 6.4vw;
		top: 6.4vw;
	}
	.pelagic-image {
		position: relative;
		top: 3vw;
		width: 15vw;
		left: 8vw;
	}
	.demersal-image {
		position: relative;
		top: 3vw;
		width: 13vw;
		left: 7vw;
	}
	.shellfish-image {
		position: relative;
		top: -26vw;
		left: 14vw;
		width: 12vw;
	}
	.aquaculture-image {
		position: relative;
		left: -20vw;
		top: -23vw;
		width: 14vw;
	}
	.sf-main-content{
		overflow:visible;
	}
	.seafood-center-top h2,
	h2.empgraphemp	{
	    font-size: 1.1en;
		margin:0 auto;
		position: absolute;
		left:0; right:0; top:1em;
		border:none!important;
		text-align:center
	}
	h2.empgraphemp	{ top:-1.6em!important }
	
	
	body.chart section {
		width:89vw;
	}
	.seafood-left {
		float: left;
		width: 50vw;
		margin-top: 1vw;
		position: absolute;
		top: 89vw;
	}
	.seafood-center {
		float: left;
		width: 92vw;
		margin-left: -3vw;
		margin-top: 8vw;
	}
	.seafood-center-bottom h2,	.seafood-left h2,	.seafood-right h2{
		display:none!important;
	}
	.seafood-center-bottom{
		position: absolute;
		top: 87vw;
		left: 30vw;
	}
	.seafood-right {
		float: right;
		margin-top: 1vw;
		position: absolute;
	    left: 0vw;
		top: 90vw;
		width:42vw
	}
	.datacirclecockles1 {
		position: relative;
		cursor: pointer;
		top: -31vw;
		left: 12vw;
	}
	.burry-inlet {
		position: relative!important;
		top: 30vw!important;
		left: -12vw!important;
	}
	.mobile-override{
		left:13vw;
	}
	.cockles-map .totalanim {
		width: 22vw!important;
		height: 22vw!important;
	}
	.totalanim {
		width: 22vw;
		height: 27vw;
	}
	.cockles-map img {
		width: 39vw;
		margin-left: -11vw;
		margin-top: -1vw;
	}
	.seafood .year-small {
		font-size: 1.9vw;
		margin-top: -2vw;
	}
	.cockles1 .year-small {
		font-size: 1.9vw;
		margin-top: 0vw;
	}
	.totalanim h3 {
		font-size: 1.9vw;
		font-weight: 300;
		line-height: 2.5vw;
		margin-botton:1.4vw
	}
	.dee-estuary {
		position: relative!important;
		top: 1vw!important;
		left: 10vw!important;
	}
	.year {
		font-size: 1.5vw;
	}
	.sf-footer{
		position:fixed;
	}
	.iframe-button iframe {
		height: 0;
		max-height: 100%;
		max-width: 100%;
		min-height: 100%;
		min-width: 100%;
		width: 0;
	}
	.iframe-button {
		position: relative;
		overflow: hidden;
		padding-top: 130%;
	}

	.resp-iframe-button {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}
	
	.home-buttons {
		max-width:300px;
		max-height:390px;
		margin-right:5vw;
		width:42vw;
		float:left;
		margin-bottom:5vmin;
		margin-top:0;
	}

	.home-buttons:nth-child(even) {
		margin-right:0;
	}
	
	.last-button {
		margin-right:0!important;
	}
	.home-content {
		display:unset;
	}

	.home-info-left {
		border-right:none;
		margin-top:3.5vh;
		flex:none;
		width:89vw;
		margin-top:4vmin;
	}

	.home-info h3 {
		font-size:3vmin;
		font-weight:600;
		line-height:3.5vmin;
	}

	.home-info p{
		font-size:3vmin!important;
		line-height:3.5vmin;
	}

	.home-info-top{
		border-bottom:1px white solid;
		margin:-1vmin 2vmin 0vh 0.7vmin;
		padding-bottom:3vmin;
	}

	.home-info-bottom{
		padding:1vmin 0.7vmin 3vmin;
	}

	.logo {
		position:relative;
	}

	.logo img{
		position:inherit;
		bottom:0;
		right:0;
		left:1.3vmin;
	}
}
canvas {
		-webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        outline: none;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
    }   
	
	.introjs-overlay{position:absolute;box-sizing:content-box;z-index:999999;background-color:#000;opacity:0;background:-moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));background:-webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:-ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);background:radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1)";-ms-filter:"alpha(opacity=50)";filter:alpha(opacity=50);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-fixParent{z-index:auto!important;opacity:1!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important}.introjs-showElement,tr.introjs-showElement>td,tr.introjs-showElement>th{z-index:9999999!important}.introjs-disableInteraction{z-index:99999999!important;position:absolute;background-color:#fff;opacity:0;filter:alpha(opacity=0)}.introjs-relativePosition,tr.introjs-showElement>td,tr.introjs-showElement>th{position:relative}.introjs-helperLayer{box-sizing:content-box;position:absolute;z-index:9999998;background-color:#fff;background-color:rgba(255,255,255,.5);border:1px solid #777;border:1px solid rgba(0,0,0,.9);border-radius:4px;box-shadow:0 2px 15px rgba(0,0,0,.4);-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-tooltipReferenceLayer{box-sizing:content-box;position:absolute;visibility:hidden;z-index:10000000;background-color:transparent;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.introjs-helperLayer *,.introjs-helperLayer *:before,.introjs-helperLayer *:after{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-ms-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box}.introjs-helperNumberLayer{box-sizing:content-box;position:absolute;visibility:visible;top:13px;left:-16px;z-index:9999999999!important;padding:2px;font-family:Arial,verdana,tahoma;font-size:13px;font-weight:700;color:#fff;text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.3);background:#ff3019;background:-webkit-linear-gradient(top,#ff3019 0%,#cf0404 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ff3019),color-stop(100%,#cf0404));background:-moz-linear-gradient(top,#ff3019 0%,#cf0404 100%);background:-ms-linear-gradient(top,#ff3019 0%,#cf0404 100%);background:-o-linear-gradient(top,#ff3019 0%,#cf0404 100%);background:linear-gradient(to bottom,#ff3019 0%,#cf0404 100%);width:20px;height:20px;line-height:20px;border:3px solid #fff;border-radius:50%;filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0)";filter:"progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000)";box-shadow:0 2px 5px rgba(0,0,0,.4)}.introjs-arrow{border:5px solid #fff;content:'';position:absolute}.introjs-arrow.top{top:-10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#fff;border-left-color:transparent}.introjs-arrow.top-right{top:-10px;right:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#fff;border-left-color:transparent}.introjs-arrow.top-middle{top:-10px;left:50%;margin-left:-5px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:#fff;border-left-color:transparent}.introjs-arrow.right{right:-10px;top:10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:#fff}.introjs-arrow.right-bottom{bottom:10px;right:-10px;border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:#fff}.introjs-arrow.bottom{bottom:-10px;border-top-color:#fff;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}.introjs-arrow.left{left:-10px;top:10px;border-top-color:transparent;border-right-color:#fff;border-bottom-color:transparent;border-left-color:transparent}.introjs-arrow.left-bottom{left:-10px;bottom:10px;border-top-color:transparent;border-right-color:#fff;border-bottom-color:transparent;border-left-color:transparent}.introjs-tooltip{box-sizing:content-box;position:absolute;visibility:visible;padding:10px;background-color:rgba(255,255,255,.9);min-width:200px;max-width:300px;border-radius:3px;box-shadow:0 1px 10px rgba(0,0,0,.4);-webkit-transition:opacity .1s ease-out;-moz-transition:opacity .1s ease-out;-ms-transition:opacity .1s ease-out;-o-transition:opacity .1s ease-out;transition:opacity .1s ease-out}.introjs-tooltipbuttons{text-align:right;white-space:nowrap}.introjs-button{box-sizing:content-box;position:relative;overflow:visible;display:inline-block;padding:.3em .8em;border:1px solid #d4d4d4;margin:0;text-decoration:none;text-shadow:1px 1px 0 #fff;font:11px/normal sans-serif;color:#333;white-space:nowrap;cursor:pointer;outline:none;background-color:#ececec;background-image:-webkit-gradient(linear,0 0,0 100%,from(#f4f4f4),to(#ececec));background-image:-moz-linear-gradient(#f4f4f4,#ececec);background-image:-o-linear-gradient(#f4f4f4,#ececec);background-image:linear-gradient(#f4f4f4,#ececec);-webkit-background-clip:padding;-moz-background-clip:padding;-o-background-clip:padding-box;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em;zoom:1;*display:inline;margin-top:10px}.introjs-button:hover{border-color:#bcbcbc;text-decoration:none;box-shadow:0 1px 1px #e3e3e3}.introjs-button:focus,.introjs-button:active{background-image:-webkit-gradient(linear,0 0,0 100%,from(#ececec),to(#f4f4f4));background-image:-moz-linear-gradient(#ececec,#f4f4f4);background-image:-o-linear-gradient(#ececec,#f4f4f4);background-image:linear-gradient(#ececec,#f4f4f4)}.introjs-button::-moz-focus-inner{padding:0;border:0}.introjs-skipbutton{box-sizing:content-box;margin-right:5px;color:#7a7a7a}.introjs-prevbutton{-webkit-border-radius:.2em 0 0 .2em;-moz-border-radius:.2em 0 0 .2em;border-radius:.2em 0 0 .2em;border-right:none}.introjs-prevbutton.introjs-fullbutton{border:1px solid #d4d4d4;-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em}.introjs-nextbutton{-webkit-border-radius:0 .2em .2em 0;-moz-border-radius:0 .2em .2em 0;border-radius:0 .2em .2em 0}.introjs-nextbutton.introjs-fullbutton{-webkit-border-radius:.2em;-moz-border-radius:.2em;border-radius:.2em}.introjs-disabled,.introjs-disabled:hover,.introjs-disabled:focus{color:#9a9a9a;border-color:#d4d4d4;box-shadow:none;cursor:default;background-color:#f4f4f4;background-image:none;text-decoration:none}.introjs-hidden{display:none}.introjs-bullets{text-align:center}.introjs-bullets ul{box-sizing:content-box;clear:both;margin:15px auto 0;padding:0;display:inline-block}.introjs-bullets ul li{box-sizing:content-box;list-style:none;float:left;margin:0 2px}.introjs-bullets ul li a{box-sizing:content-box;display:block;width:6px;height:6px;background:#ccc;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;text-decoration:none;cursor:pointer}.introjs-bullets ul li a:hover{background:#999}.introjs-bullets ul li a.active{background:#999}.introjs-progress{box-sizing:content-box;overflow:hidden;height:10px;margin:10px 0 5px;border-radius:4px;background-color:#ecf0f1}.introjs-progressbar{box-sizing:content-box;float:left;width:0%;height:100%;font-size:10px;line-height:10px;text-align:center;background-color:#08c}.introjsFloatingElement{position:absolute;height:0;width:0;left:50%;top:50%}.introjs-fixedTooltip{position:fixed}.introjs-hint{box-sizing:content-box;position:absolute;background:0 0;width:20px;height:15px;cursor:pointer}.introjs-hint:focus{border:0;outline:0}.introjs-hidehint{display:none}.introjs-fixedhint{position:fixed}.introjs-hint:hover>.introjs-hint-pulse{border:5px solid rgba(60,60,60,.57)}.introjs-hint-pulse{box-sizing:content-box;width:10px;height:10px;border:5px solid rgba(60,60,60,.27);-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;background-color:rgba(136,136,136,.24);z-index:10;position:absolute;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out}.introjs-hint-no-anim .introjs-hint-dot{-webkit-animation:none;-moz-animation:none;animation:none}.introjs-hint-dot{box-sizing:content-box;border:10px solid rgba(146,146,146,.36);background:0 0;-webkit-border-radius:60px;-moz-border-radius:60px;border-radius:60px;height:50px;width:50px;-webkit-animation:introjspulse 3s ease-out;-moz-animation:introjspulse 3s ease-out;animation:introjspulse 3s ease-out;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-iteration-count:infinite;position:absolute;top:-25px;left:-25px;z-index:1;opacity:0}@-webkit-keyframes introjspulse{0%{-webkit-transform:scale(0);opacity:0}25%{-webkit-transform:scale(0);opacity:.1}50%{-webkit-transform:scale(.1);opacity:.3}75%{-webkit-transform:scale(.5);opacity:.5}100%{-webkit-transform:scale(1);opacity:0}}@-moz-keyframes introjspulse{0%{-moz-transform:scale(0);opacity:0}25%{-moz-transform:scale(0);opacity:.1}50%{-moz-transform:scale(.1);opacity:.3}75%{-moz-transform:scale(.5);opacity:.5}100%{-moz-transform:scale(1);opacity:0}}@keyframes introjspulse{0%{transform:scale(0);opacity:0}25%{transform:scale(0);opacity:.1}50%{transform:scale(.1);opacity:.3}75%{transform:scale(.5);opacity:.5}100%{transform:scale(1);opacity:0}}