* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    margin:0;
    padding:0;
}
html {
    font-size: 16px;
}
body {
    font-family: PT Sans, sans-serif;
    background-color: #f4f4f4;
    line-height: auto;
}

h1 {
    font-family: "Pt Sans Narrow", sans-serif;
    color: #3e1d28;
    font-size: 50px;
    display: inline;
    box-shadow: 10px 0 0 #3e1d28, -10px 0 0 #3e1d28;
    -webkit-box-decoration-break: clone;
    -ms-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;
    background: #3e1d28;
    font-weight:300;
    -webkit-animation: 3s ease 0s normal forwards 1 fadein;
        -moz-animation: 3s ease 0s normal forwards 1 fadein;
        -ms-animation: 3s ease 0s normal forwards 1 fadein;
        -o-animation: 3s ease 0s normal forwards 1 fadein;
        animation: 3s ease 0s normal forwards 1 fadein;
}

.title-highlight {
    background-color: #3e1d289f;
    /*padding: 3px;*/
    color: white;
    -webkit-animation: 2s ease 0s normal forwards 1 fadein;
        -moz-animation: 2s ease 0s normal forwards 1 fadein;
        -ms-animation: 2s ease 0s normal forwards 1 fadein;
        -o-animation: 2s ease 0s normal forwards 1 fadein;
        animation: 2s ease 0s normal forwards 1 fadein;
}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

#title{
    margin-top: auto;
    margin-bottom: auto;
}

#stand-first-container{
    width: 17%;
    display: none;
    /* border: 1px solid lightblue; */
    /* padding: 2%; */
    float: left;
    left: 2%;
    position: absolute;
    margin-top: -11%;
    margin-right: 5%;
}

#stand-second-container{
    /* width: 100%; */
    display: none;
    /* border: 1px solid lightblue; */
    /* padding: 2%; */
    /* float: left; */
    position: initial;
    /* top: 250px; */
    margin-left: 20%;
    margin-top: 5%;
    /* margin-right: 1.5%; */
}

#stand-second-container h3{
    font-size: 20px;
    margin-left: 5%;
    margin-top: 5%;
    margin-bottom: 5%;
    font-weight: 700;
}

#stand-second-container p {
    font-size: 14px;
    margin: 0% 5%;
    line-height:30px;
}
#stand-second-container p a{
    font-size: 14px;
    font-style:bold;
    border-bottom:0px;
    text-decoration:underline;
    line-height:30px;
    display: list-item; 
    list-style-type: disc; 
    list-style-position: inside;
}

#inline{
    border: 2px solid #c7432b;
    padding: 5% 10%;
    position: relative;
    margin:auto;
    margin-top:3%;
}

img#ident-inline{
    width:100%;
    max-width:100px;
}

h2 {
    font-family: "PT Sans Narrow", sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.1;
    color: #333333;
    display: block;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    text-align: left;
}

h2:focus{
    outline:none;
}

h2#one{
    padding-top: 30px;
}

h3 {
    font-family: "PT Sans", sans-serif;
    font-weight: 400;
    color: #333333;
    font-size: 14px;
    margin: 0em;
}

h3#headline-container{
    color: #f4f4f4;
    padding: 3% 0;
    font-family: pt sans;
    font-weight: 200;
    font-size: 15px;
    text-shadow: 0px 3px 6px #000;
    -webkit-animation: 4s ease 0s normal forwards 1 fadein;
        -moz-animation: 4s ease 0s normal forwards 1 fadein;
        -ms-animation: 4s ease 0s normal forwards 1 fadein;
        -o-animation: 4s ease 0s normal forwards 1 fadein;
        animation: 4s ease 0s normal forwards 1 fadein;
}

#chart h3 {
    margin-bottom: 0.5em;
}

p, li{
    font-family: "PT Serif", serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 36px;
    font-style: normal;
    color: #333333;
    display: block;
    margin-block-start: 1.5em;
    margin-block-end: 1.5em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

ul#droplinks li a{
    font-size:24px;
    font-weight: 700;
    /* background-color:#ffe3e3; */
}

p#backTop {
    font-size:14px;
}

ul{
    margin:5% 0%;
    list-style-type: circle;
}

.first-par {
    font-size: 28px;
    line-height: 44px;
}

.long-quote {
    margin-left: 2em;
    margin-top: 1em;
    padding-left: 1em;
    border-left: 3px solid #3e1d28;
    font-family: "PT Sans", sans-serif;
    font-size: 18px;
    line-height: 32px;
    color:#333333;
}

.pullquote {
    font-style: italic;
    font-size: 32px;
    font-weight: 300;
    line-height: 48px;
    margin-block-start: 1.2em;
    margin-block-end: 1.2em;
    margin-left: 1.2em;
    margin-right: 1.2em;
}

a {
    color: #3e1d28;
    /* text-decoration: underline;
    text-decoration-color: #FA7268; */
    /* second option */
    text-decoration: none;
    border-bottom: 1.4px solid #e9c0be;
}

a:hover {
    color: #e9c0be;
    text-decoration: none;
    /* border-bottom: 2px solid #e9c0be; */
}

.central {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.full-width {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
}

.figure-wrapper {
    margin-right: auto;
    margin-left: auto;
}

.row {
    /* order important so don't override new syntax with old */
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.large {
    -ms-flex: 2 0 0;
    -webkit-flex: 2 0 0;
    flex: 2 0 0;
}

.small {
    -ms-flex: 1 0 0;
    -webkit-flex: 1 0 0;
    flex: 1 0 0;
}

.photo-container{    
    /* max-height: 800px; */
    width: auto;
    max-width: 1200px;
    margin: 50px auto 20px auto;
}

.photo-container img{
    width: 100%;
    -moz-box-shadow: 10px 10px 0px 0px #3e1d28;
    -webkit-box-shadow: 10px 10px 0px 0px #3e1d28;
    box-shadow: 10px 10px 0px 0px #3e1d28;
}

.inline {
    width: 100%;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    -moz-box-shadow: 10px 10px 0px 0px #3e1d28;
    -webkit-box-shadow: 10px 10px 0px 0px #3e1d28;
    box-shadow: 10px 10px 0px 0px #3e1d28;
}

img.inline{
    max-width: 800px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    margin-top:5%;
    display: block;
}

#highchart-image{
    display: none;
}

#EAT{
    max-width:500px
}

#highchart-image .inline, #EAT{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

h3#animation-header{
    font-family: "PT Sans", sans-serif;
    font-weight: 400;
    color: #f4f4f4;
    font-size: 20px;
    margin: 0em;
    position: absolute;
}



.full-bleed{

    width: 100%;
    height: 950px;
    z-index: -5;
    overflow: hidden;
}
#prawn-farming{
    background: url("../img/prawn-farm.jpg");
    background-size: cover;
}

figcaption p{
    font-family: "PT Sans", sans-serif;
    font-size:13px;
    padding-top:5px;
    margin: 0.8em;
    margin-left:0;
    color: #333333;
    max-width:780px;
    line-height: 24px;
}

figure {
    margin-top: 30px;
    margin-bottom: 30px;
}

#text-container {
    margin: 0px;
    z-index: 6;
    /* border: solid 1px green; */
    margin-right: 5%;
}

#text-container h2 {
    text-align: left;
}

.lancet-header{
                height: 300px;
                position: absolute;
                width: 100%;
                z-index: 1000;
                margin-left:3em;
                margin-top: 15%;
}

.lancet-header-small{
    display:none;
}

#map-container {
    height: 1000px;
    z-index: 4;
    position: sticky;
    position: -webkit-sticky;
    top:0%;
    /* border:solid 1px blue; */

}

/* #map {
    width: 100%;
    height: 1200px;
    margin: 0;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
} */

.text-section {
    opacity: 0.2;
}

.text-section p {
    font-size: 16px;
    line-height: 28px;
}

.padding-section {
    height: 200px;
}

.padding-section-top {
    height: 100px;
}

#chart-wrapper {
    /* fixed width so don't have issues with pointer alignment */
    width: 320px;
    height: 120px;
    margin-left: auto;
    margin-right: auto;
    z-index: 7;
}

.box {
    padding: 10px;
    background-color: #ffffff;
    border: 2px solid #C0C9C9;
    -moz-box-shadow:    4px 4px 0px 0px #C0C9C9;
    -webkit-box-shadow: 4px 4px 0px 0px #C0C9C9;
    box-shadow:         4px 4px 0px 0px #C0C9C9;
}

#chart {
    height: inherit;
    z-index: 999999;
    position: relative;
}

#chart-wrapper {
    position: sticky;
    position: -webkit-sticky;
    top: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.text-key {
    padding: 2px;
    /* border-radius: 4px; */
    background-color: #FA7268;
    color: #FFFFFF;
    font-family: "PT Sans", sans-serif;
}

.text-key a {
    border-bottom: none;
    color: #FFFFFF;
}

p .text-key:hover {
    background-color: rgba(250, 114, 104, 0.6);
}

.axis text {
    color: #333333;
    font-family: "PT Sans", Arial, sans-serif;
}

.axis line {
    stroke: #333333;
}

.axis path {
    stroke: #333333;
}

#triangle {
    stroke: #FA7268;
    stroke-width: 1;
    fill: #FA7268;
    opacity: 0;
}

#rect-1 {
    stroke: #FA7268;
    fill: #FA7268;
}

#rect-2 {
    fill: white;
    stroke: #FA7268;
}

#tooltip text {
    font-family: "PT Sans", sans-serif;
    font-size: 13px;
    fill: #FA7268;
}

.bar {
    stroke: #FFFFFF;
    stroke-width: 0.5;
}

.logo {
    width: 95px;
    height: 30px;
    top: 0%;
    position: fixed;
}

.logo img{
    float: left;
    position: relative;
    display: inline-flex;
    z-index: 1001;
    max-width: 130px;
    padding-left: 5px;
    height: auto;
    opacity: 0.8;
}
.logo img:hover{
    opacity:0.6;
}

#logo-small{
    display: none;
}

.share-icons {
    position: fixed;
    top: 10px;
    right: 10px;
    color: #ffffff;
    font-size: 12px;
    padding: 5px;
    padding-top: 0px;
}

.fa-stack a{
    color: #e9c0be;
}

.share-icons .fa-stack {
    opacity: 1;
}

.share-icons .fa-stack:hover {
    opacity: 0.8;
}

#list-group {
    padding: 0px;
    margin: 0px;
}

.list-group-item {
    font-family: "PT Sans", Georgia, sans-serif;
    font-size: 13px;
    line-height: 22px;
}

#intro-background {
    position: absolute;
    /* border:solid 6px #3e1d28; */
    width: 100%;
    height: 950px;
    z-index: -5;
    overflow: hidden;
    /* background-image: url(/img/poster-min.png);
    background-size: cover; */
}

#intro-vid {
    position: absolute;
    top: 50%; 
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    max-width: 105%;
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto;
}

#section-1 {
    height: 1000px;
}

.info {
    border-top: 1px solid #C0C9C9;
    border-bottom: 1px solid #C0C9C9;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    width: 830px;
    max-width: 100%;
}

.info p {
    font-family: "PT Sans", sans-serif;
    font-size: 17px;
    line-height: 28px;
}

.info i {
    color: #87e1bd;
    font-size: 24px;
}

.large-info {
    -ms-flex: 5 0 0;
    -webkit-flex: 5 0 0;
    flex: 5 0 0;
}

.small-info {
    -ms-flex: 1 0 0;
    -webkit-flex: 1 0 0;
    flex: 1 0 0;
}

.small-info p {
    vertical-align: middle;
    text-align: center;
}

.video {
    width: 1920px;
    max-width: 100%;
    height: auto;
}

/* clearfix for sticky elements */

.sticky:before,
.sticky:after {
    content: '';
    display: table;
}

#scroll-graphic{
    background-color: #c7432b;
    padding-bottom:100px;
    flex-wrap: wrap;
}


/*GLOBE*/

.graticule {
  fill: none;
  stroke: #000;
  stroke-opacity: .3;
  stroke-width: .5px; }

.graticule-outline {
  fill: none;
  stroke: #333;
  stroke-width: 1.5px; }

canvas {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: -1; }

section {
  position: relative;
  display: block;
  padding: 40px;
  /*background: rgba(255, 255, 255, 0.5)*/;
  width: 100%;
  max-width: 500px;
  margin: 40vh auto;
  z-index: 10;
   }
section:first-child{
    margin:15vh;
}

section h2, section p{
    color: #f4f4f4;
}

#animated_globe{
    width:100%;
    height:900px;
    margin: 0;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
   }

#globeContainer {
  position: static;
  top: 0;
  left: 0;
  width: 30vw;
  box-sizing: border-box;
}

svg.globe {
    margin-left:0%;
      -webkit-transform: translate(-30%, 0%);
      -ms-transform: translate(-30%, 0%);
          transform: translate(-30%, 0%);
    }

.globe {
  stroke: #ccc;
  stroke-width: 1px; }

.water {
  fill: #fff3f2; }

.land {
  fill: #3e1d28;
  opacity: 0.5;
  stroke: #ffe3e3;
  stroke-width: 0.5px;
  box-shadow: 2px 4px 8px black; }

.focused {
  fill: #e9c0be;
  opacity: 0.8; }

select {
  position: absolute;
  top: 20px;
  left: 580px;
  border: solid #ccc 1px;
  padding: 3px;
  box-shadow: inset 1px 1px 2px #ddd8dc; }


.marker {
  fill: lime; }

/*.tester {
  stroke: black;
  stroke-width: 2px;
  fill: rgba(0, 0, 150, 0.2); }*/


  /*Column chart*/

  #chart-position {
    height: 60%;
    z-index: 1;
    position: sticky;
    position: -webkit-sticky;
    top:0%;
    /* border: solid blue 1px; */
    display:none;
}

  #chart-container {
    height: 600px;
    /* margin-bottom: 45%; */
    margin-top: 17%;
    z-index: 1;
    position: sticky;
    position: -webkit-sticky;
    top: 30%;
    min-width:auto;

}

  #viz{
    position: sticky;
    position: -webkit-sticky;
    /*height: 600px;
    width: 600px;*/
  }

.axis line, .axis path {
  fill: none;
  stroke: #000;
}


.axis text {
  font-size:10px;
}

.bar {
  opacity:0.8;
  stroke: #e9c0be;
  fill: #e9c0be;
}

form {
  margin-bottom:20px;
}
.line {
    fill: none;
    stroke: #3e1d28;
    stroke-width: 3;
    stroke-dasharray: 10,10;
  stroke-dashoffset: 100;
  animation: dash 20s linear forwards;
  animation-iteration-count: infinite;
}

/* @keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
} */

text.xtitle.title, text.ytitle.title {
    font-family: "PT Sans", sans-serif;
}

#chart-head{
    width:100%;
    height:55px;
    background-color:#c7432b;
    position:absolute;
    top:0%;
    z-index: 10;
}

#excess{
    width: 55%;
    background-color: #c7432b;
    height: 400px;
    position: absolute;
    z-index: 10;
    opacity: 0.5;
    left: 41.5%;
    /* display: none; */
}

#footer{
    height: 100px;
    background-color: #c7432b;
}

img.inline-world{
    display:none;
}

#footer p{
    color:#f4f4f4;
    font-size:13px;
    padding:10 0;
}

#highchart-image{
    display: inline-block;
}