/* ================================
// Description: Custom CSS for The Climate Clock (climateclock.net)
// Version: 1.1
// Author: Jonathan Gallivan @ GallivanMedia.com
// Author URI: https://gallivanmedia.com
// Date created: Jan 04, 2016
// Date revised: Dec 05, 2018
*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css 
    _   __                           ___          
   / | / /___  _________ ___  ____ _/ (_)___  ___ 
  /  |/ / __ \/ ___/ __ `__ \/ __ `/ / /_  / / _ \
 / /|  / /_/ / /  / / / / / / /_/ / / / / /_/  __/
/_/ |_/\____/_/  /_/ /_/ /_/\__,_/_/_/ /___/\___/ 

*/button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

/* Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html { height: 100%; }
body { height: 100%; margin: 0; font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; -webkit-text-size-adjust: none; -webkit-font-smoothing: subpixel-antialiased; color: #fff; background-color: #000; letter-spacing: 0.05rem; }
#controls-left { position: fixed; top: 10px; left: 10px; z-index: 500; }
#controls-right { position: fixed; top: 10px; right: 10px; z-index: 500; }
#video { display: none; position: fixed; z-index: -100; top: -25%; left: -25%; width: 150%; height: 150%; }
#CCHIL img { width: 350px; max-width: 80%; height: auto; margin-top: 60px; }
#container { width: 100%; height: 100%; text-align: center; }
#container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
#clock { display: inline-block; vertical-align: middle; }
#playlist, audio { display: none; }
#start { display: none; text-align: center; }
#start:hover { cursor: pointer; text-decoration: underline; }
#settings-trigger, #info-trigger, #share-trigger { text-decoration: none; outline: none; }
h3 { margin: 9% 0 15px 0; }
select { width: 100%; max-width: 250px; margin: 0 0 9% 0; color: #000; padding: 7px; }
.black-popup-block h3 { margin: 60px auto 30px auto; max-width: 450px; }
.black-popup-block p { text-align: left; font-size: 1em; }
.black-popup-block p.center { text-align: center; }
.black-popup-block p.bold { font-weight: bold; text-transform: uppercase; }
.addthis_inline_share_toolbox { margin-top: 30px; }

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a { color: #fff; text-decoration: underline; }
a.popup-modal-dismiss { display: block; font-weight: 900; margin: 40px 0; }
a:hover { color: #47a1be; }
strong { font-weight: 900; }

/* Clock Elements
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#introduction-one, #introduction-two { display: none; text-align: center; text-transform: uppercase; }
.animation { display: none; position: absolute; z-index: -100; width: 100%; height: 100%; text-align: center; }
.animation img { position: relative; width: 80%; max-width: 540px; height: auto; top: 47%; -webkit-transform: translateY(-47%); -ms-transform: translateY(-47%); transform: translateY(-47%); }
#global-temp { display: none; margin: 0; padding: 0; text-align: center; text-transform: uppercase; font-weight: 400; }
#global-temp-container { display: none; margin: 0; padding: 0; text-align: center; font-weight: 900; }
.grad { width: auto; display: inline; text-align: left; -webkit-mask-image: -webkit-gradient(linear, right top, left top, from(rgba(255,255,255,0)), color-stop(90%, rgba(0,0,0,1)), to(rgba(0,0,0,1))); opacity:1; }
#time-to-two { display: none; margin: 0; padding: 9% 0 0 0; text-align: center; text-transform: uppercase; font-weight: 400; }
#timecountdown, #timecountdown-static { display: none; margin: 0; padding: 0; text-align: center; font-weight: 900; opacity: .9; }
#timecountdown-labels{ display: none; margin: 0; padding: 0; text-align: center; font-weight: 400; }
#timecountdown-labels span, #timecountdown-static span { padding: 0 .7em; }
#timecountdown-static { display: none; letter-spacing: 0.05rem; }
#carbontonnes { display: none; margin: 9% 0 0 0; padding: 0; text-align: center; font-weight: 900; opacity:.9; }
#tonnes { display: none; margin: 0; padding: 0; text-align: center; font-weight: 400; text-transform: uppercase; }

/* Clock Element Font Sizes
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#introduction-one, #introduction-two { font-size: calc(17px + (40 - 17) * ((100vw - 300px) / (1600 - 300))); }
#global-temp, #tonnes { font-size: calc(14px + (32 - 14) * ((100vw - 300px) / (1600 - 300))); }
#time-to-two { font-size: calc(17px + (42 - 17) * ((100vw - 300px) / (1600 - 300))); }
#global-temp-container, #timecountdown, #timecountdown-static, #carbontonnes { font-size: calc(26px + (60 - 26) * ((100vw - 300px) / (1600 - 300))); }
#timecountdown-labels { font-size: calc(9px + (24 - 9) * ((100vw - 300px) / (1600 - 300))); }

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button { min-width: 100px; max-width: 250px; display: block; margin: .5em; padding: 0; border: none; background: none; color: inherit; vertical-align: middle; position: relative; z-index: 1; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; cursor: pointer; }
.button:focus { outline: none; }
.button > span { vertical-align: middle; }
.button--size-l { font-size: 18px; }
.button--round-l { border-radius: 40px; }
.button.button--gallivan { width: 40px; height: 40px; min-width: 0; padding: 0; color: #999; -webkit-transition: color 0.3s; transition: color 0.3s; box-shadow: inset 0 0 0 2px #222; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
.button--scanite.button--round-l { border-radius: 50%; }
.button--gallivan::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; z-index: -1; box-shadow: inset 0 0 0 35px #444; -webkit-transform: scale3d(0.9, 0.9, 1); transform: scale3d(0.9, 0.9, 1); -webkit-transition: box-shadow 0.3s, -webkit-transform 0.3; transition: box-shadow 0.3s, transform 0.3s; }
.button--gallivan .button__icon { font-size: 15px; width: 15px; }
.button--gallivan > span { position: absolute; opacity: 0; pointer-events: none; }
.button--gallivan:hover { color: #fff; }
.button--gallivan:hover::before { box-shadow: inset 0 0 0 2px #47a1be; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
.button--gallivan.active { box-shadow: inset 0 0 0 2px #47a1be; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); background-color: #000; }
#degree-switcher-1, #degree-switcher-2, #settings-trigger, #share-trigger, #info-trigger { display: none; }
#degree-switcher-1 div, #degree-switcher-2 div { font-size: .9em; font-weight: 900; letter-spacing: 0; }
.fa-lg { font-size: 1.2em; }
.fa { transform: translate(0, -1px); }
#settings, #info, #share { text-align: center; }
img.scenarios { width: 25px; height: auto; opacity: .6; }
.button:hover img.scenarios { opacity: 1; }

/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Responsiveness
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 380px) {
	.animation img { width: 45%; top: 45%; -webkit-transform: translateY(-45%); -ms-transform: translateY(-45%); transform: translateY(-45%); }
}
@media (min-width: 420px) {
	.button.button--gallivan { width: 50px; height: 50px; }
	#controls-left { top: 20px; left: 20px; }
	#controls-right { top: 20px; right: 20px; }
	#degree-switcher-1 div, #degree-switcher-2 div { font-size: .9em; }
	.fa-lg { font-size: 1.8em; }
	.fa { transform: translate(0, 0); }
	img.scenarios { width: 30px; }
}
@media (min-width: 600px) {
	#video { top: -15%; left: -15%; width: 130%; height: 130%; }
}
@media (min-width: 700px) {
	#degree-switcher-1 div, #degree-switcher-2 div { font-size: 1.1em; }
	.fa-lg { font-size: 1.5em; }
}
@media (min-width: 1000px) {
	#video { top: -10%; left: -10%; width: 120%; height: 120%; }
	#timecountdown-labels span { padding: 0 1em; }
}