/* LOGOS IN FOOTER - MOBILE */

@media (max-width: 768px) {

	.logo-list {

	  	width: 100%;

		margin: 0;

	}

	.logo-list li {

	  	display: inline-block;

	  	width: auto;

	  	margin: 0 0.6em;

	}

}



/* REVIEWER DETAILS */



@media (min-width: 769px) {

	.about-block .about-row p {

		margin-left: 135px;	

		font-size: 17px;

		line-height: 24px;

		margin-bottom: 7px;

	}

	.about-block .about-row p a {

		font-size: 20px;

		line-height: 28px;	

	}

	.about-block .about-row .col-sm-6.col-xs-12 {

		min-height: 180px;

	}

}



@media (min-width: 769px) and (max-width: 1208px) {

  	.about-block .about-row .col-sm-6.col-xs-12 {

		width: 100%;	

		min-height: none;

	}

}

@media (max-width: 768px) {

	.about-block .about-row p {

		margin-left: 135px;	

		font-size: 19px;

		line-height: 26px;

		margin-bottom: 7px;

	}

	.about-block .about-row p a {

		font-size: 22px;

		line-height: 30px;	

	}

}







/* TAGS AT THE BOTTOM OF TOPICS */

.tag-section .content-tags li a {

  margin-right: 7px;

}



/* HIGHCHARTS */

.highcharts-container tspan {

	font-family: walsheim-light,"Helvetica Neue",Helvetica,Arial,sans-serif;

}



.highcharts-container .highcharts-title tspan {

	font-family: walsheim-bold,"Helvetica Neue",Helvetica,Arial,sans-serif;

}





 .tags-section {

	padding-bottom: 0px !important; 

 }

 

 .quiz-slide .true_false .col-wrap {

 }

 

 .quiz-slide .col-wrap {

	border-radius: 20px; 

	padding: 15px 15px 15px 0 !important;

 }

 

 .quiz-slide .success-message,  .quiz-slide .error-message, .quiz-slide p.question-area {

	outline: none !important;

	cursor: default;

 }



/* A 'FIGURE' STYLE FOR WHEN IMAGES CANNOT GO AT THE END OF SECTIONS */





.article-section figure {

	width: 100%;

}



.article-section figure img {

	width: 77.5%;

	float: right;

	height: auto;

}



.article-section figcaption {

	width: 22.5%;

	float: left;

	height: auto;

	font-size: 0.65em;

	line-height: 1.3em;

	text-align: right;

	padding: 25px 22px 15px 10px;

	background: #f8f8f8;

}





.article-section .accordion figcaption {

	background: none;	

}



.article-section figcaption a {

	border-bottom: 1px solid #00a68e !important;

	text-decoration: none !important;

	color: #222;

}



.article-section figcaption a:hover, .article-section figcaption a:focus {

	border-color: #222 !important;

}



.article-section figcaption p {

	margin-bottom: 25px;

}



.article-section figure:after {

	content: '';

	display: block;

	clear: both;

	margin-bottom: 30px;

}







/* VERTICALLY CENTER TOP MENU BAR */



.top-bar {

margin: 17px 0 0 45px;

}





.node-type-page #header.affix .search-opener .fa-search {

color: #ffffff;

}

/* REMOVE BLUE LINES + LARGE BOTTOM PADDING ON FOOTER MENU AREA */



.bottom-bar {

border-top: none;

padding: 25px 0 25px;

}



.bottom-line {

border-top: none;

}



.bottom-line .sun-nav {

margin: 8px 10px 8px;

}



/* DECREASE TRANSPARENCY TO HEADER */



#header {

  background: rgba(255, 255, 255, 0.9);

}



/* FIX WATCH BUTTON HOVER STATE */



.slide-wrap:hover .btn-watch {

  padding: 0 18px 0 32px;

  color: #fff;

}

.slide-wrap:hover .btn-text {

  max-width: 100px;

  margin: 0 12px 0 0;

}



/* Change subscribe colour area - All colours are accessible */



.subscribe-row {

  background: #1680A5;

}



.content-form .submit {

background: #189BC8;

}



.royalblue-theme .subscribe-row {

  background: #3F50BE;

}



.royalblue-theme .subscribe-row .content-form .submit {

background: #4256d9;

}



.pink-theme .subscribe-row {

  background: #D32E76;

}



.pink-theme .content-form .submit, .pink-theme .back-to-top {

background: #FA3189;

}



.green-theme .subscribe-row {

  background: #00837D;

}



.green-theme .subscribe-row .content-form .submit {

background: #019B93;

}



.purple-theme .subscribe-row {

  background: #72297a;

}



.purple-theme .subscribe-row .content-form .submit, .purple-theme .back-to-top {

background: #993CA3;

}



.orange-theme .subscribe-row {

  background: #CF4916;

}



.orange-theme .subscribe-row .content-form .submit {

background: #f54a09;

}



/* VERTICALLY CENTER ALIGN LOGOS */



.sub-holder .logo-list {

width: 200px;

margin: 18px -15px 20px 0;

}



/* VERTICALLY CENTER TEXT IN FOOTER AREA */

.bottom-line p {

  margin: 8px 0 8px;

}



.follow-links {

margin-top: 0;

}



#footer .social li {

margin: 3px 17px 0px 0;

}



.sun-nav .updated-by {

margin: 8px 0 8px;

}



/* INCREASED LINE-HEIGHT OF "ALL INFOGRAPHICS" LINK TO PREVENT LETTERS BE CUT OFF AT THE BOTTOM */



.section-heading .link-holder {

line-height: 1.3;

}



/* PREVENTS TEXT STARTING UNDER CHECKBOX IF TEXT IS TOO LONG */



.step-section .radio-form .title {

 max-width: 618px;

 }

 

 /* FIXES HOVER VISUAL GLITCH */

 

 .visual-gallery a, .video-slider a {

 overflow: initial;

 }

 

 /* YOUTUBE VIDEO STYLES */

 

 .video-container {

position: relative;

}

.video-caption {

font-size: 14px;

padding-top: 10px;

}

.video-wrapper {

float: none;

clear: both;

width: 100%;

position: relative;

padding-bottom: 56.25%;

padding-top: 25px;

height: 0;

}

.video-wrapper iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

.video-container a {

color: #222;

border-bottom: 1px solid #00a69e !important;

}

.video-container a:hover, .video-container a:focus {

color: #00a69e;

border-bottom: none;

}



.video-icon, .infographic-icon {

display: inline-block;

padding-right: 2px;

font-family: FontAwesome;

}



/* NICE TABLE STYLES */



th, td {

padding: 3px 6px;

border: 1px solid #ccc;

font-size: 0.8em;

}

th {

background-color: #efefef;

vertical-align: top;

}

table.mv {

margin-bottom: 40px;

width: 120%;

margin-left: -10%;

}





.width-50 {

width: 50%;	

}

.width-20 {

width: 20%;	

}

.width-25 {

width: 25%;	

}

.width-14 {

width: 14%;

}

.width-16 {

width: 16%;	

}



/* CHEMISTRY INTERACTIVE CSS 

#container {

width: 670px;

margin: 0 auto;

}

*/ 



#chemContainer {

width: 690px;

height: 335px; 

padding: 0 15px 0 15px ;

border-left: 10px solid #e22c7b;

border-right: 10px solid #e22c7b;

box-sizing: border-box;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

}



.chemical {

float: left;

margin: 3px;

cursor: pointer;

}



.chemical:nth-child(7) {

margin-right: 0;

}



.chemical:nth-child(n+8) {

margin-top: 8px;

}



.chemical:nth-child(14) {

margin-right: 0;

}



.chemical label {

margin-top: 3px;

display: block;

text-align: center;

text-transform: uppercase;

font-size: 13px;

width: 85px;

}



.selectedChem {

margin: 1px;

}



.selectedChem:nth-child(n+8) {

margin-top: 6px;

}

.selectedChem img {

border: 2px solid #000;

}



.imageCheckbox {

   position: absolute !important;

   top: -9999px !important;

   left: -9999px !important;

}



.chemical .jcf-checkbox {

   position: absolute !important;

   top: -9999px !important;

   left: -9999px !important;

}



#submitBlack, #resetBlack {

display: inlineblock;

margin-top: 30px;

padding: 20px;

background-color: #000000;

color: #fff;

font-size: 17px;

text-decoration: none;

float: left;

cursor: pointer; 

border:none;

}



#resetBlack {margin-left: 10px;}



#productTotal {

float: right;

margin: 30px -20px 0 0;

width: 200px;

height: 63px;

padding-left: 10px;

line-height: 59px;

background-color: #e22c7b;

color: #fff;

font-size: 18px;

text-transform: uppercase;

}



#chemTotal {

float: right;

margin: 10px -20px 0 0;

width: 200px;

height: 63px;

padding-left: 10px;

line-height: 59px;

background-color: #e22c7b;

color: #fff;

font-size: 18px;

text-transform: uppercase;

}



@media (max-width: 725px) {

#chemContainer {

width: 100%;

}

}



@media (max-width: 1210px) {

#venture-space img {

display: none;

}

#sputnikIcon {

display: none;

}





.chemical:nth-child(7) {

margin-right: 3px;

}



.chemical:nth-child(n+8) {

margin-top: 3px;

}



.chemical:nth-child(14) {

margin-right: 3px;

}



.selectedChem:nth-child(n+8) {

margin: 1px;

}





}



/* EARTH VS MARS INTERACTIVE */



.earthvsmars {

    float: left;

    margin: 3px;

    cursor: pointer;

}



.earthvsmars .jcf-radio {

    position: absolute !important;

    top: -9999px !important;

    left: -9999px !important;

}



.earthvsmars label {

    margin-top: 3px;

    display: block;

    text-align: center;

    text-transform: uppercase;

    font-size: 13px;

    width: 85px;

}



.selectedEM {

margin: 1px;

}





.selectedEM img {

border: 2px solid #FFB900;

}



#earthvsSubmit {

    background-color: #000000;

    color: #fff;

    font-size: 20px;

    text-decoration: none;

    float: left;

    cursor: pointer;

    height: 86px;

    width: 118px;

    border: none;

	margin: 3px;

}



.earthResults, .marsResults {

	width: 332px;

    display: inline-block;

	vertical-align: top;

}



.earthLabel {

    background: rgb(112,180,160);

    height: 66px;

}



.marsLabel {

    background: rgb(227,154,87);

    height: 66px;

}



.earthLabel img, .marsLabel img {

	float: left;

}



.earthLabel h2, .marsLabel h2 {

    float: left;

    text-align: center;

    width: 77%;

    color: #fff;

    line-height: 67px;

    font-size: 30px;

    text-transform: uppercase;

    font-family: walsheim-bold,"Helvetica Neue",Helvetica,Arial,sans-serif;

}



.earthData {

	border: 1px solid #70B4A0;

	border-top: none;

}



.marsData {

	border: 1px solid #E39A57;

	border-top: none;

}



.resultsArea p {

	text-align: center;

	font-size: 20px;

	margin: 0 5px 39px 5px;

}



.resultsArea {

    border-bottom: 10px solid #72297A;

    padding-bottom: 45px;

}



.resultsArea span {

    font-size: 14px;

    text-align: center;

    margin-top: -30px;

    margin-bottom: 9px;

    display: block;

}





/* Noise pollution interactive */



#commonSounds {

	width: 475px;

	float: left;

	margin-top: 10px;

}



#commmonSoundsSubmit {

    background-color: #000000;

    color: #fff;

    font-size: 20px;

    text-decoration: none;

    float: right;

    cursor: pointer;

    height: 49px;

    width: 118px;

    border: none;

    margin-top: 10px;

	margin-bottom: 20px;

}



.page-node-234 .jcf-optgroup-caption {

    background-color: #00A69E;

    text-align: center;

    font-size: 1.1em;

    color: #fff;

    line-height: 35px;

    margin-bottom: 6px;

}



.jcf-focus span {background: #fff!important; }



.page-node-234 .jcf-list .jcf-option {

	border-bottom: 2px solid #00a69e!important;

}





input[type=range].noisePol {

  -webkit-appearance: none;

  width: 100%;

  margin: 10.4px 0;

}

input[type=range].noisePol:focus {

  outline: none;

}

input[type=range].noisePol::-webkit-slider-runnable-track {

  width: 100%;

  height: 12px;

  cursor: pointer;

  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;

  background: #000000;

  border-radius: 0px;

  border: 0px solid #010101;

}

input[type=range].noisePol::-webkit-slider-thumb {

  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;

  border: 0px solid #000000;

  height: 32px;

  width: 16px;

  border-radius: 0px;

  background: #308559;

  cursor: pointer;

  -webkit-appearance: none;

  margin-top: -10.4px;

}

input[type=range].noisePol:focus::-webkit-slider-runnable-track {

  background: #000000;

}

input[type=range].noisePol::-moz-range-track {

  width: 100%;

  height: 12px;

  cursor: pointer;

  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;

  background: #000000;

  border-radius: 0px;

  border: 0px solid #010101;

}

input[type=range].noisePol::-moz-range-thumb {

  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;

  border: 0px solid #000000;

  height: 32px;

  width: 16px;

  border-radius: 0px;

  background: #308559;

  cursor: pointer;

}

input[type=range].noisePol::-ms-track {

  width: 100%;

  height: 12px;

  cursor: pointer;

  background: transparent;

  border-color: transparent;

  color: transparent;

}

input[type=range].noisePol::-ms-fill-lower {

  background: #000000;

  border: 0px solid #010101;

  border-radius: 0px;

  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;

}

input[type=range].noisePol::-ms-fill-upper {

  background: #000000;

  border: 0px solid #010101;

  border-radius: 0px;

  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;

}

input[type=range].noisePol::-ms-thumb {

  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;

  border: 0px solid #000000;

  height: 32px;

  width: 16px;

  border-radius: 0px;

  background: #308559;

  cursor: pointer;

  height: 9.2px;

}

input[type=range].noisePol:focus::-ms-fill-lower {

  background: #000000;

}

input[type=range].noisePol:focus::-ms-fill-upper {

  background: #000000;

}





.noiseLabel {

    position: absolute !important;

    top: -9999px !important;

    left: -9999px !important;

}



#outputRange {

    font-size: 1.08em;

}



.intData {

  float: left;

  line-height: 52px;

  font-size: 18px;

  text-transform: uppercase;

  background-color: #308559;

  color: #ffffff;

  text-align: center;

  width: 305px;

  margin-top: 5px;

}



.amberNoise {

  background-color: #a66900;	

}



.dangerNoise {

  background-color: #BB2D2D;

}



#noiseContainer {

  width: 100%;

  padding: 0 15px 0 15px;

  border-left: 10px solid #000000;

  border-right: 10px solid #000000;

  margin-top: 5px;

  padding-top:1px;

  text-align: center;

  box-sizing: border-box;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

}





/* EXPERIMENTAL */







.f-notification {

  position: fixed;

  bottom: 20px;

  left: 20px;

  text-align: left;

  font-size: 2rem;

  width: 429px;

  min-height: 20px;

  padding: 20px 40px 20px 18px;

  z-index: 10;

  border-radius: 5px;

  color: rgba(255, 255, 255, 1.95);

}



.f-error {background: #B33A2D;}

.f-error .c-not-close {background: #9E1406;}

.f-success {background: #00893a;}

.f-success .c-not-close {background: #064C23;}



.c-not-close {

    position: absolute;

    top: -10px;

    right: -10px;

    width: 33px;

    height: 33px;

    background-color: #3B7955;

    text-align: center;

    font-size: 3rem;

    line-height: 2.6rem;

	cursor: pointer;

}



.f-show {

  animation-name: animSlideElastic;

  animation-duration: 1s;

  animation-timing-function: linear;

}



.f-hide {

  animation-name: animSlideElastic;

  animation-duration: 0.5s;

  animation-direction: reverse;

}



@keyframes animSlideElastic {

  0% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1000, 0, 0, 1);

  }

  3.333333% {

    transform: matrix3d(1.96989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 521.82545, 0, 0, 1);

  }

  6.666667% {

    transform: matrix3d(1.4235, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 218.3238, 0, 0, 1);

  }

  10% {

    transform: matrix3d(1.08167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 57.59273, 0, 0, 1);

  }

  13.333333% {

    transform: matrix3d(0.99057, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -11.12794, 0, 0, 1);

  }

  16.666667% {

    transform: matrix3d(0.98719, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -30.40503, 0, 0, 1);

  }

  20% {

    transform: matrix3d(0.99541, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -28.10141, 0, 0, 1);

  }

  23.333333% {

    transform: matrix3d(0.99936, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -19.40752, 0, 0, 1);

  }

  26.666667% {

    transform: matrix3d(1.00021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -11.08575, 0, 0, 1);

  }

  30% {

    transform: matrix3d(1.00016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -5.23737, 0, 0, 1);

  }

  33.333333% {

    transform: matrix3d(1.00005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -1.84893, 0, 0, 1);

  }

  36.666667% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.22079, 0, 0, 1);

  }

  40% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.37284, 0, 0, 1);

  }

  43.333333% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.46116, 0, 0, 1);

  }

  46.666667% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.35963, 0, 0, 1);

  }

  50% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.22487, 0, 0, 1);

  }

  53.333333% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.11734, 0, 0, 1);

  }

  56.666667% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.04909, 0, 0, 1);

  }

  60% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.01295, 0, 0, 1);

  }

  63.333333% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.0025, 0, 0, 1);

  }

  66.666667% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00684, 0, 0, 1);

  }

  70% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00632, 0, 0, 1);

  }

  73.333333% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00436, 0, 0, 1);

  }

  76.666667% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00249, 0, 0, 1);

  }

  80% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00118, 0, 0, 1);

  }

  83.333333% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00042, 0, 0, 1);

  }

  86.666667% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.00005, 0, 0, 1);

  }

  90% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00008, 0, 0, 1);

  }

  93.333333% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0001, 0, 0, 1);

  }

  96.666667% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.00008, 0, 0, 1);

  }

  100% {

    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);

  }

}





/* ABOVE IS NEW */



#rowSuccess {

display: none;

margin-top: -75px;

height: 1px;

}



#rowSuccess h2 {

text-align: center;

}



.slideOutSub {

    left:0;

    width:100%;    

    -webkit-animation-name: slideOut;

    -webkit-animation-iteration-count: once;

    -webkit-animation-timing-function: ease-out;

    -webkit-animation-duration: 1.5s;   

    animation-name: slideOut;

    animation-iteration-count: once;

    animation-timing-function: ease-out;

    animation-duration: 1.5s;

    -webkit-animation-fill-mode: forwards;

    animation-fill-mode: forwards;

}



@keyframes slideOut {

    0% {

        margin-left: 0;

    }

    100% {

        margin-left: -9999px;

		position: absolute !important;

        top: -9999px !important;

        left: -9999px !important;

    }

}



@-webkit-keyframes slideOut {

    0% {

        left: 0;

    }

    100% {

        left: -9999px;

		position: absolute !important;

        top: -9999px !important;

    }

}



.slideInSub {

	display: block!important;

    left:-9999px;

	margin-left: -9999px;

    width:100%; 

	height: 1px;

    -webkit-animation-name: slideIn;

    -webkit-animation-iteration-count: once;

    -webkit-animation-timing-function: ease-out;

    -webkit-animation-duration: 1.5s;   

    animation-name: slideIn;

    animation-iteration-count: once;

    animation-timing-function: ease-out;

    animation-duration: 1.5s;

    -webkit-animation-fill-mode: forwards;

    animation-fill-mode: forwards;

}



@keyframes slideIn {

    0% {

        margin-left: -9999px;

		height: 1px;

    }

    100% {

        margin-left: 0;

    }

}



@-webkit-keyframes slideIn {

    0% {

        left: -9999px;

    }

    100% {

        left: 0;

    }

}



/* Custom search message */ 



#venture-space p {

float: left;

}



#venture-space p:first-child {

padding-top: 14px;

}



#venture-space img {

float: right;

margin-top: -73px;

}





/* Improve general search page */



.search-result-title a {

color: #222;

font: normal 26px/33px tisa-semibold,"Times New Roman",Times,serif;

}



.search-result-infographic {

  font-family: walsheim-bold, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  font-size: 14px;

  color: #1680A5;

  text-transform: uppercase;

}



.search-result-video {

  font-family: walsheim-bold, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  font-size: 14px;

  color: #1680A5;

  text-transform: uppercase;

}



.search-result-topic {

  font-family: walsheim-bold, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  font-size: 14px;

  color: #1680A5;

  text-transform: uppercase;

}



.all-topic-surround {

    margin-top: 25px;

    border-bottom: 1px solid #e1e1e1;

}



/* Improvements to basic page template */



.page-node-24 .region-belowcontent { background-color: #f6f5f5; }



.basic-page {

  background-color: #f6f5f5;

 }

 

 .basic-content-area {

 padding: 28px 25px 50px;

 position: relative;

 background: #fff;

 border: 1px solid #eaebeb;

 }

 

/* Road map page */





.roadMapItem {

  width: 48%;

  display: block;

  float: left;

  margin-bottom: 20px;

}



.roadMapItem:nth-child(odd) {

  margin-right: 4%;

}



.roadMapItem img {

 width: 100%;

}



.roadCaption {

  height: 180px;

  color: #fefefe;

  font-size: 18px;

  line-height: 26px;

  letter-spacing: 0.6px;

  padding: 19px 17px 15px;

}



.roadCaption p {

  margin: 0 0 18px;

}





.roadMapItem strong {

  font: normal 26px/30px tisa-bold,"Times New Roman",Times,serif;

}



.roadCat {

  width: 50%;

  float: left;

  text-transform: uppercase;

  color: #fff;

  font: 14px/1.2 walsheim-medium,"Helvetica Neue",Helvetica,Arial,sans-serif;

  padding: 7px 5px 3px 13px;

}



.purple .roadCat {

  background: #422558;

}



.green .roadCat {

  background: #00958e;

}



.orange .roadCat {

  background: #da4209;

}



.royalblue .roadCat {

  background: #2F3E99;

}



.pink .roadCat {

  background: #C91362

}



.roadDate {

  width: 50%;

  float: left;

  text-align: right;

  text-transform: uppercase;

  color: #fff;

  font: 14px/1.2 walsheim-medium,"Helvetica Neue",Helvetica,Arial,sans-serif;

  padding: 7px 5px 3px 13px;

}



.purple .roadDate {

 background: #3a214e;

}



.green .roadDate {

 background: #00857e;

}



.orange .roadDate {

 background: #c23b08;

}



.royalblue .roadDate {

 background: #2B378B;

}





/* FRONT PAGE SNEAK PEEK SECTION */



#featured-sneakpeek .bar img {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 37px;

  height: 37px;

  transform: translate(-50%,-50%);

  -webkit-transform: translate(-50%,-50%);

  -ms-transform: translate(-50%,-50%);

}



#featured-sneakpeek a, .view-featured-infographic a {

  text-decoration: none;

}

#featured-sneakpeek .caption {

  min-height: 77px !important;

  border-width: 1px;

}



#featured-sneakpeek .title {

  font: normal 22px/30px tisa-semibold,"Times New Roman",Times,serif;

}



/* OCEAN ACIDIFICATION INTERACTIVE */



#acidContainer {

  width: 100%;

  padding: 0 15px 0 15px;

  border-left: 10px solid #00A69E;

  border-right: 10px solid #00A69E;

  margin-top: 5px;

  text-align: center;

  box-sizing: border-box;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

}



#acidContainer img {

  display: block;

  margin: 0 auto;

  height: 400px;

  width: auto;

}



.specButton.pHLow, .specButton.pHNormal {

  float: none;

  text-align: center;

  width: auto;

  padding: 0 10px 0 10px;

  margin-top: 10px;

  margin-bottom: 0;

}



#captionAcid {

  margin-top: 10px;

  padding: 10px;

  width: 100%;

  background-color: #f4f4f4;

}



#captionAcid p span {

font-size: 12px;

margin-bottom: 0;

}



#acidContainer .selectedAcid span {

  margin-top: -26px;

}



.blackHeader {

  margin-top: 0;

  font-size: 1.0em;

  font-family: walsheim-bold,"Helvetica Neue",Helvetica,Arial,sans-serif;

  color: #222;

  text-transform: uppercase;

  letter-spacing: 0.9px;

}



.specButton{

  float: left;

  width: 200px;

  height: 63px;

  line-height: 52px;

  margin-right: 10px;

  margin-bottom: 10px;

  color: #fff;

  font-size: 18px;

  text-transform: uppercase;

  border: none;

  outline: none;

}



.pHNormal, .pHLow {

text-transform: none;

}



.specButton span {

  margin-top: -33px;

  display: block;

  font-size: 12px;

}



#acidContainer .specButton:nth-child(3) {

  margin-right: 0;

}



.selectedAcid {

  background-color: #00A69E!important;

  border: 3px solid #005A56;

  line-height: 45px;

}

.selectedAcid.pHLow,.selectedAcid.pHNormal {

  line-height: 46px;

}



.interactiveNot{

  text-transform: uppercase;

  font-size: 0.6em;

  text-align: right;

  font-family: walsheim-medium,"Helvetica Neue", Helvetica,Arial,sans-serif;

  padding: 4px;

  line-height: 35px;

  background: #000000;

  color: #fff;

  display: inline-block;

  float: right;

}



.interactiveNot img {

  width: 24px;

  margin-top: -4px;

}



@media (max-width: 480px) {

#featured-sneakpeek .col {

  width: 100% !important;

}

.f-notification {

width: 100%;

left: 0;

}



.c-not-close {

right: 0;

}

}



@media (max-width: 700px) {



#commonSounds {

width: 100%;

}



#commmonSoundsSubmit {

width: 100%;

margin-bottom: 13px;

}



}



@media (max-width: 992px) {

.roadCaption {

height: 255px;

}

.roadMapItem strong {

  font: normal 20px/30px tisa-bold,"Times New Roman",Times,serif;

}

}



/* MISC TWEAKS (unsure where original code is) */

@media only screen and (max-width:768px){

	.glossary .glossary-popup:after {

		border: 0	

	}

	.glossary-popup{

		top: 30px !important;	

	}

	.glossary:hover {

		color: #FFF;	

	}

	.article-section figure img {

		width: 100%;

	}

	.article-section figcaption {

		width: 100%;

		text-align: left;

		padding: 8px;

		font-size: 0.9em;

	}

	.roadMapItem {

	  width: 100%;

	  margin-bottom: 25px;

	}

	.roadCaption {

	  height: auto;

	}

	

}

@media only screen and (min-width:768px){

	.glossary-popup{

		left:100% !important;

		right:auto !important;



		-webkit-transform: translateX(0%) !important;

		-moz-transform: translateX(0%) !important;

		-ms-transform: translateX(0%) !important;

		-o-transform: translateX(0%) !important;

		transform: translateX(0%) !important;

	}

	

}





@media (max-width: 875px) {

table.mv {

margin-bottom: 20px;

width: 100%;

margin-left: 0;

}

}



.bloodLabels {

float: left;

margin-right: 10px;

}

#bloodAnimation {

margin-top: 40px;

border-left: 10px solid #e22c7b;

padding-left: 20px;

background-color: #f6bfd7;

}

#bloodResults {

border-left: 10px solid #e22c7b;

padding-left: 20px;

margin-top: 20px;

min-height: 174px;

}



#bloodInt {

border-left: 10px solid #e22c7b;

padding-left: 20px;

margin-top: 20px;

}



.page-node-534 .jcf-list .jcf-option {

    border-bottom: 2px solid #7a1215!important;

}



.bloodType {

   visibility: hidden;

    padding: 25px 40px 25px 40px;

    color: #fff;

display: none;

    margin-top: 5px;

    max-width: 100px;

    background-color: #7a1215;

}

        .bounce-in {

            visibility: visible;

            -webkit-animation: cd-bounce-1 .6s;

            animation: cd-bounce-1 .6s;

        }

        @-webkit-keyframes cd-bounce-1 {

            0% {

                opacity: 0;

                transform: scale(0.5)

            }

            60% {

                opacity: 1;

                transform: scale(1.2)

            }

            100% {

                transform: scale(1)

            }

        }

        @keyframes cd-bounce-1 {

            0% {

                opacity: 0;

                transform: scale(0.5)

            }

            60% {

                opacity: 1;

                transform: scale(1.2)

            }

            100% {

                transform: scale(1)

            }

        }

		

		

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

Class Definitions

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





.sb {

  display: none;

  position: fixed;

  top: 50%;

  left: 50%;

  margin-left: -250px;

  margin-top: -150px;

  width: 500px;

  height: 200px;

  background: white;

  padding: 25px;

  box-shadow: 0 2px 3px rgba(0,0,0,0.5);

  -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.5);

  -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.5);

  z-index: 11999;

  opacity: 0;

}



.sb h2 {

  margin-top: 0;

}



.sb p {

  font-size: 20px;

}



.sb form input[type='text'], .sb form input[type='password'], .sb form input[type='email'], .sb form textarea{

  margin: 0;

  border: none;

  background: #f7f7f7;

  padding: 18px 10px;

  font-size: 16px;

  width: 79%;

  box-sizing: border-box;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

}



.sb form input[type='submit']{

  padding: 18px 10px;

  background: none;

  font-size: 16px;

  text-transform: uppercase;

  border: none;

  background: black;

  color: white;

  width: 20%;

  margin: 0;

}



.sb .sb-close-btn {

  position: absolute;

  right: 10px;

  top: 10px;

  color: #ccc;

}



.sb.sb-withoverlay {

  position: absolute;

  top: 200px;

  left: 50%;

  margin-left: -250px;

}





.sb-open.sb-open-with-overlay {

  overflow: hidden;

}



.sb-open .sb-overlay {

  opacity: 1;

}



.sb-open .sb {

  opacity: 1;

}



.sb-overlay {

  height: 100%;

  width: 100%;

  background: rgba(0, 0, 0, 0.58);

  opacity: 0;

  position: fixed;

  left: 0;

  right: 0;

  top: 0;

  z-index: 100;

  -webkit-transition: all 0.5s ease-in-out;

  -moz-transition: all 0.5s ease-in-out;

  -o-transition: all 0.5s ease-in-out;

  transition: all 0.5s ease-in-out;

  overflow: auto;

}



.sb-close-backdrop {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  cursor: pointer;

}



[class^="sb-animation-"], [class*=" sb-animation-"] {

  -webkit-animation-duration: 500ms;

  -moz-animation-duration: 500ms;

  -o-animation-duration: 500ms;

  animation-duration: 500ms;

}



.sb-animation-flyInRight {

  -webkit-animation-name: flyInRight;

	-moz-animation-name: flyInRight;

	-o-animation-name: flyInRight;

	animation-name: flyInRight;

}



.sb-animation-flyOutRight {

  -webkit-animation-name: flyOutRight;

	-moz-animation-name: flyOutRight;

	-o-animation-name: flyOutRight;

	animation-name: flyOutRight;

}



.sb-animation-flyInLeft {

  -webkit-animation-name: flyInLeft;

	-moz-animation-name: flyInLeft;

	-o-animation-name: flyInLeft;

	animation-name: flyInLeft;

}



.sb-animation-flyOutLeft {

  -webkit-animation-name: flyOutLeft;

	-moz-animation-name: flyOutLeft;

	-o-animation-name: flyOutLeft;

	animation-name: flyOutLeft;

}



.sb-animation-flyInUp {

  -webkit-animation-name: flyInUp;

	-moz-animation-name: flyInUp;

	-o-animation-name: flyInUp;

	animation-name: flyInUp;

}



.sb-animation-flyOutUp {

  -webkit-animation-name: flyOutUp;

	-moz-animation-name: flyOutUp;

	-o-animation-name: flyOutUp;

	animation-name: flyOutUp;

}



.sb-animation-flyInDown {

  -webkit-animation-name: flyInDown;

	-moz-animation-name: flyInDown;

	-o-animation-name: flyInDown;

	animation-name: flyInDown;

}



.sb-animation-flyOutDown {

  -webkit-animation-name: flyOutDown;

	-moz-animation-name: flyOutDown;

	-o-animation-name: flyOutDown;

	animation-name: flyOutDown;

}

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

Animation Library

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



@-webkit-keyframes flyInRight {

	0% {

		opacity: 0;

		-webkit-transform: translateX(3000px);

	}



	100% {

		-webkit-transform: translateX(0);

	}

}



@-moz-keyframes flyInRight {

	0% {

		opacity: 0;

		-moz-transform: translateX(3000px);

	}



	100% {

		-moz-transform: translateX(0);

	}

}



@-o-keyframes flyInRight {

	0% {

		opacity: 0;

		-o-transform: translateX(3000px);

	}



	100% {

		-o-transform: translateX(0);

	}

}



@keyframes flyInRight {

	0% {

		opacity: 0;

		transform: translateX(3000px);

	}



	100% {

		transform: translateX(0);

	}

}



@-webkit-keyframes flyOutRight {

	0% {

		-webkit-transform: translateX(0);

	}



	100% {

	  opacity: 0;

		-webkit-transform: translateX(3000px);

	}

}



@-moz-keyframes flyOutRight {

	0% {

		-moz-transform: translateX(0);

	}



	100% {

	  opacity: 0;

		-moz-transform: translateX(3000px);

	}

}



@-o-keyframes flyOutRight {

	0% {

		-o-transform: translateX(0);

	}



	100% {

	  opacity: 0;

		-o-transform: translateX(3000px);

	}

}



@keyframes flyOutRight {

	0% {

		transform: translateX(0);

	}



	100% {

	  opacity: 0;

		transform: translateX(3000px);

	}

}



@-webkit-keyframes flyInLeft {

	0% {

		opacity: 0;

		-webkit-transform: translateX(-3000px);

	}



	100% {

		-webkit-transform: translateX(0);

	}

}



@-moz-keyframes flyInLeft {

	0% {

		opacity: 0;

		-moz-transform: translateX(-3000px);

	}



	100% {

		-moz-transform: translateX(0);

	}

}



@-o-keyframes flyInLeft {

	0% {

		opacity: 0;

		-o-transform: translateX(-3000px);

	}



	100% {

		-o-transform: translateX(0);

	}

}



@keyframes flyInLeft {

	0% {

		opacity: 0;

		transform: translateX(-3000px);

	}



	100% {

		transform: translateX(0);

	}

}

@-webkit-keyframes flyOutLeft {

	0% {

		-webkit-transform: translateX(0);

	}



	100% {

		opacity: 0;

		-webkit-transform: translateX(-3000px);

	}

}



@-moz-keyframes flyOutLeft {

	0% {

		-moz-transform: translateX(0);

	}



	100% {

		opacity: 0;

		-moz-transform: translateX(-3000px);

	}

}



@-o-keyframes flyOutLeft {

	0% {

		-o-transform: translateX(0);

	}



	100% {

		opacity: 0;

		-o-transform: translateX(-3000px);

	}

}



@keyframes flyOutLeft {

	0% {

		transform: translateX(0);

	}



	100% {

		opacity: 0;

		transform: translateX(-3000px);

	}

}



@-webkit-keyframes flyInUp {

	0% {

		opacity: 0;

		-webkit-transform: translateY(-2000px);

	}



	100% {

		-webkit-transform: translateY(0);

	}

}



@-moz-keyframes flyInUp {

	0% {

		opacity: 0;

		-moz-transform: translateY(-2000px);

	}



	100% {

		-moz-transform: translateY(0);

	}

}



@-o-keyframes flyInUp {

	0% {

		opacity: 0;

		-o-transform: translateY(-2000px);

	}



	100% {

		-o-transform: translateY(0);

	}

}



@keyframes flyInUp {

	0% {

		opacity: 0;

		transform: translateY(-2000px);

	}



	100% {

		transform: translateY(0);

	}

}



@-webkit-keyframes flyOutUp {

	0% {

		-webkit-transform: translateY(0);

	}



	100% {

		opacity: 0;

		-webkit-transform: translateY(-2000px);

	}

}



@-moz-keyframes flyOutUp {

	0% {

		-moz-transform: translateY(0);

	}



	100% {

		opacity: 0;

		-moz-transform: translateY(-2000px);

	}

}



@-o-keyframes flyOutUp {

	0% {

		-o-transform: translateY(0);

	}



	100% {

		opacity: 0;

		-o-transform: translateY(-2000px);

	}

}



@keyframes flyOutUp {

	0% {

		transform: translateY(0);

	}



	100% {

		opacity: 0;

		transform: translateY(-2000px);

	}

}





@-webkit-keyframes flyInDown {

	0% {

		opacity: 0;

		-webkit-transform: translateY(2000px);

	}



	100% {

		-webkit-transform: translateY(0);

	}

}



@-moz-keyframes flyInDown {

	0% {

		opacity: 0;

		-moz-transform: translateY(2000px);

	}



	100% {

		-moz-transform: translateY(0);

	}

}



@-o-keyframes flyInDown {

	0% {

		opacity: 0;

		-o-transform: translateY(2000px);

	}



	100% {

		-o-transform: translateY(0);

	}

}



@keyframes flyInDown {

	0% {

		opacity: 0;

		transform: translateY(2000px);

	}



	100% {

		transform: translateY(0);

	}

}



@-webkit-keyframes flyOutDown {

	0% {

		-webkit-transform: translateY(0);

	}



	100% {

		opacity: 0;

		-webkit-transform: translateY(2000px);

	}

}



@-moz-keyframes flyOutDown {

	0% {

		-moz-transform: translateY(0);

	}



	100% {

		opacity: 0;

		-moz-transform: translateY(2000px);

	}

}



@-o-keyframes flyOutDown {

	0% {

		-o-transform: translateY(0);

	}



	100% {

		opacity: 0;

		-o-transform: translateY(2000px);

	}

}



@keyframes flyOutDown {

	0% {

		transform: translateY(0);

	}



	100% {

		opacity: 0;

		transform: translateY(2000px);

	}

}





.gauge-container {

	position: relative;

	

}

.gauge-needle {

  background: url("/curious/sites/default/files/gauge-needle.svg") 0 0 no-repeat;

  width: 17px;

  height: 94px;

  display: block;

  margin-left: -4px;

  margin-bottom: -8px;

  position: absolute;

  left: 50%;

  bottom: 23%;

  /* top: 1px; */

  animation: all 4s 0s infinite;

  -webkit-transform-origin: 8px 84px;

  -moz-transform-origin: 8px 84px;

  -ms-transform-origin: 8px 84px;

  transform-origin: 8px 84px;

  -webkit-transition: all 1s infinite;

  -moz-transition: all 1s infinite;

  -ms-transition: all 1s infinite;

  transition: all 1s infinite;

}



@-webkit-keyframes all {

    0% {

        transform:rotate(-90deg);

    }

    50% {

        transform:rotate(90deg);

    }

    100% {

        transform:rotate(-90deg);

    }

}



@keyframes all {

    0% {

        transform:rotate(-90deg);

    }

    50% {

        transform:rotate(90deg);

    }

    100% {

        transform:rotate(-90deg);

    }

}



.black-bg {

	background: #000000;

}



.filter-guidelines {

display: none;

}



.node-type-article #header {

	position: static!important;

}



.wrap-for-search {

  position: relative;

}



aside {

    font-size: 30px;

    padding: 41px 0 0;

    margin: 0 0 67px 82px;

    border: 0;

    position: relative;

    font-family: tisa-semibold,"Times New Roman",Times,serif;

    line-height: 38px;

}





aside:after {

    content: "";

    position: absolute;

    left: 16px;

    top: 0;

    width: 195px;

    height: 10px;

    background: #00a69e;

}



aside cite, aside small, aside .small {

    display: block;

    font-style: normal;

    font-size: 65%;

    line-height: 2rem;

    color: #222;

    margin-top: 2rem;



}



aside cite:before, aside small:before, aside .small:before {

    content: '\2014 \00A0';

}



/*****Hide Recaptcha surrounding box*****/

.captcha.form-wrapper {

  background-color: transparent;

  -webkit-box-shadow: none;

  box-shadow: none;

}



  .captcha.form-wrapper .panel-heading {

    display: none;

  }

  .captcha.form-wrapper .panel-body .help-block {

    display: none;

  }







/* Add heart as pseudoelement to donate item in header nav, adjust logo and item placement */

#header .logo {

  width: 14%

}

  .logo img#logo-img {

    max-width: 130px;

  }

@media only screen and (max-width: 767px) {

  .logo img#logo-img {

    width: 90px;

  }

}

.top-bar .second-line {

  display: flex;

  justify-content: flex-end;

}

  .top-bar .second-line .follow {

    margin-right: 16px;

  }

.top-nav .menu-2122 a {

  position: relative;

}

.top-nav .menu-2122 a:before {

  content: "\e143";

  position: absolute;

  top: 3px;

  left: -20px;

  display: inline-block;

  font-family: 'Glyphicons Halflings';

  font-style: normal;

  font-weight: normal;

  line-height: 1;

  -webkit-font-smoothing: antialiased;

}



/* moving frontpage header to outside the hero image div, for neater markup. Changing margin and padding to fit properly and still overlap. */
/* added z-index and defined position to allow overlap with hero section and hero search function */

.region.region-front-header {
	margin-top: -65px;
	margin-bottom: 51px;
	z-index: 2;
	position: relative;
}



/* adjusting margin of front header */

.front .hero {

  margin-top: 11.3rem;

}

@media only screen and (max-width: 767px) {

  .front .hero {

    margin-top: 9.3rem;

  }

}



.logged-in.front .hero {

  margin-top: unset;

}

.article-block .grey-box.full-size-font {
    font-size: inherit;
}
}