* {
            box-sizing: border-box;
         }


         #dw-section {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            line-height: 28px;
            font-weight: 400;
         }

         #main {
            width: 100%;
            max-width: 500px;
            height: 860px;
            margin-top: 30px;
            padding: 30px;
            border: 1px solid grey;
            position: relative;
            display: flex;
            flex-direction: column;
            font-size: 12px;
            text-transform: uppercase;
         }

            .help-text {
               position: absolute;
               width: 70%;
               left: 15%;
               top:  60px;
               box-shadow:  0px 0px 2px rgba(19, 19, 19, 0.46);
               background-color: #ffffffb3;
               background-color: #fdfbe278;
               border-radius: 5px;
               padding: 20px 30px;
               display: flex;
               flex-direction: column;
               font-size: 17px;
               text-transform: none;
               transition: opacity .4s, height .1s;
               display: none;
/*             height: 0;
               opacity: 0;*/
            }

               .help-text-button {
                  border: none;
                  background: none;
                  color: white;
                  background-color: #934c19;
                  padding:  12px 25px;
                  font-size: 17px;
                  border-radius: 5px;
                  text-align: center;
                  text-transform: uppercase;
                  display: block;
                  margin: 0 auto;
                  margin: 20px 0 10px 0;
                  transition: background-color .3s;
               }

                  .help-text-button:hover {
                     background-color:  #642f09;
                     cursor: pointer;
                  }

                     .help-text.show-help-text {
                        display: flex;
/*                      height: auto;
                        opacity: 1;*/
                     }

/*          #help-text-1 {
               opacity: 1;
               display: flex;
               z-index: 2000;
            }*/

            .axis-label {
               font-size: 14px;
               font-weight: bold;
            }

            #temp-axis-label {
               position: absolute;
               transform: rotate(-90deg);
               left: -41px;
               top: 310px;
            }

            #forcing-axis-label {
               margin-top: 8px;
               text-align: center;
            }

         #canvas-container {
            position: relative;
            height: 600px;
            z-index: -200;
         }

            .sky {
               position: absolute;
               top: 0;
               bottom: 0;
               left: 0;
               right: 0;
               transition: opacity .2s; 
               z-index: -300;
            }

               #brown-sky {
                  /*background-image: linear-gradient(#f9eab3, white 70%);*/
                  opacity: 0;
                  overflow: hidden;
                  display: flex;
                  justify-content: center;
                  align-items: center;
               }

                  #brown-sky video {
                     width: 540px;
                     height: 600px;
                  }

               #blue-sky {
                  opacity: 1;
                  background-image: linear-gradient(lightblue, white 70%);
               }


                  .aer_off #blue-sky {
                     opacity: 1;
                  }

            #canvas-container img {
               position: absolute;
               width: 100%;
               left: 0;
               /*opacity: 0;*/
            }

               #canvas-container #smokestack-img {
                  z-index: -2;
                  bottom: 0;
                  opacity: .5;
               }

            .temp-line {
               border-top: 1px solid pink;
               width: 100%;
               position: absolute;
               bottom: 100px;
               transition: border-width .3s, border-color .5s;
            }

            #current-temp-label {
               opacity: 0;
            }

            .temp-label {
               position: absolute;
               right: 10px;
               bottom: 86px;
               line-height: 16px;
               color: #ff0936;
            }

            #canvas {
               width: 100%;
               height: 600px;
               border-left: 2px solid grey;
               border-bottom: 2px solid grey;
            }



         #level-container {
            width: 100%;
            padding: 5px 0 35px 0;
            position:  relative;
         }

            .forcing-line {
               height: 180px;
               width: 0;
               border-left: 2px dotted grey;
               position: absolute;
               bottom: 43px;
               right: 0%;
            }

            /* CLASSES */

            .level-bar {
               border-radius: 3px;
               height: 30px;
            }

               /* the span markers with arrows, common definitions */
               .level-span {
                  width: 100%;
                  text-align: center;
                  display: flex;
                  color: white;
               }

                  .hide .level-span {
                     display: none;
                  }

                  .level-span-label {
                     display: flex;
                     align-items: center;
                     height: 30px;
                     line-height: 14px;
                     padding: 0 5px;
                     text-align: center;
                     justify-content: center;
                  }

                  .level-span-line {
                     height: 15px;
                     width: 100%;
                     border-bottom: 1px solid white;
                  }

                     .level-span-line-left:before, 
                     .level-span-line-right:after {
                        content: "";
                        display: block;
                        width: 10px;
                        height: 10px;
                        background-size: 10px 10px;
                        margin-top: 10px;
                     }

                        .level-span-line-left:before {
                           background-image: url("../img/doublewhammy/left-arrow-white.svg");
                        }


                        .level-span-line-right:after {
                           background-image: url("../img/doublewhammy/right-arrow-white.svg");
                           margin-left:  calc(100% - 10px);
                        }



               /* WHAT DOES THIS DO? */
               .aer_off #level-container,
               .disable #level-container {
                  pointer-events: none;
                  cursor: not-allowed!important;
               }


               #total-level-bar {
                  background-color: white;
               }

                  #total-level-span {
                     color: black;
                     width: 100%;
                     opacity: 1;
                  }

                     #total-level-span .level-span-label {
                        flex-basis: 155px;
                     }

                     #total-level-span .level-span-line {
                        border-color: black;
                     }

                        #total-level-span .level-span-line-left:before {
                           background-image: url("../img/doublewhammy/left-arrow-black.svg");
                        }


                        #total-level-span .level-span-line-right:after {
                           background-image: url("../img/doublewhammy/right-arrow-black.svg");
                        }

               #combined-level-bar {
                  position: relative;
                  background-color: #f7f7f7;
                  border: 1px dashed black;
               }        


                  .combo-bar {
                     position: absolute;
                     top: 0;
                     left: 0;
                  }


                     /* COMBO-BARS - CHILDREN OF COMBINED LEVEL BAR */

                     #ghg-level-bar {
                        width: 100%;
                        background-color: red;
                     }


                        #ghg-level-span {
                           margin-top: 2px;
                           position: absolute;
                           top: 35px;
                        }

                           #ghg-level-span .level-span-label {
                              flex-basis: 315px;
                              color: red;
                           }

                           #ghg-level-span .level-span-line {
                              border-color: red;
                           }

                              #ghg-level-span .level-span-line-left:before{
                                 background-image: url("../img/doublewhammy/left-arrow-red.svg");
                              }

                              #ghg-level-span .level-span-line-right:after{
                                 background-image: url("../img/doublewhammy/right-arrow-red.svg");
                              }


                     #aerosol-level-bar {
                        position: absolute;
                        right: 0;
                        left: auto;
                        background-color: #21c9ff7a;
                        height: 36px;
                        margin-top: -3px;
                        margin-right: -3px;
                        cursor: move;
                     }


                           #aerosol-level-span .level-span-label {
                              color: #dff7ff;
                              height: 34px;
                           }

                              #aerosol-level-span .level-span-line {
                                 border-color: #dff7ff;
                                 height: 18px;
                              }

                                 #aerosol-level-span .level-span-line-left:before {
                                    margin-top: 13px;
                                    background-image: url("../img/doublewhammy/left-arrow-blue.svg");
                                 }


                                 #aerosol-level-span .level-span-line-right:after {
                                    margin-top: 13px;
                                    background-image: url("../img/doublewhammy/right-arrow-blue.svg");
                                 }


                     #aerosol-input {
                        width: 100%;
                        opacity: 0;
                        cursor: grab;
                     }  

                        #aerosol-input:active {
                           cursor: grabbing;
                        }


         #toggle-aerosols {
            margin-top: 10px;
            width: 100%;
            background: none;
            background-color: #128cb3;
            color: white;
            text-transform: uppercase;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            padding: 15px 0;
            cursor: pointer;
            transition: opacity .2s, background-color .3s;
         }


            #toggle-aerosols .off-text {
               display: none;
            }

            #toggle-aerosols:hover {
               opacity: .8;
            }

            .aer_off #toggle-aerosols {
               background-color: #82582b;
            }

               .aer_off #toggle-aerosols .off-text {
                  display: inline;
               }

               .aer_off #toggle-aerosols .on-text {
                  display: none;
               }



         .disable {
            pointer-events: none;
         }

         button.disable,
         .disable button {
            background-color: lightgrey!important;
         }

/* TRACKERLESS SHARING BUTTONS */
/* https://sharingbuttons.io/ */

.resp-sharing-button__link,
.resp-sharing-button__icon {
  display: inline-block
}

.resp-sharing-button__link {
  text-decoration: none;
  color: #fff;
  margin: 0.5em
}

.resp-sharing-button {
  border-radius: 5px;
  transition: 25ms ease-out;
  padding: 0.5em 0.75em;
}

.resp-sharing-button__icon svg {
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  /*vertical-align: top*/
}

.resp-sharing-button--small svg {
  margin: 0;
  vertical-align: middle
}

/* Non solid icons get a stroke */
.resp-sharing-button__icon {
  stroke: #fff;
  fill: none
}

/* Solid icons get a fill */
.resp-sharing-button__icon--solid,
.resp-sharing-button__icon--solidcircle {
  fill: #fff;
  stroke: none
}

.resp-sharing-button--twitter {
  background-color: #55acee
}

.resp-sharing-button--twitter:hover {
  background-color: #2795e9
}

.resp-sharing-button--pinterest {
  background-color: #bd081c
}

.resp-sharing-button--pinterest:hover {
  background-color: #8c0615
}

.resp-sharing-button--facebook {
  background-color: #3b5998
}

.resp-sharing-button--facebook:hover {
  background-color: #2d4373
}

.resp-sharing-button--tumblr {
  background-color: #35465C
}

.resp-sharing-button--tumblr:hover {
  background-color: #222d3c
}

.resp-sharing-button--reddit {
  background-color: #5f99cf
}

.resp-sharing-button--reddit:hover {
  background-color: #3a80c1
}

.resp-sharing-button--google {
  background-color: #dd4b39
}

.resp-sharing-button--google:hover {
  background-color: #c23321
}

.resp-sharing-button--linkedin {
  background-color: #0077b5
}

.resp-sharing-button--linkedin:hover {
  background-color: #046293
}

.resp-sharing-button--email {
  background-color: #777
}

.resp-sharing-button--email:hover {
  background-color: #5e5e5e
}

.resp-sharing-button--xing {
  background-color: #1a7576
}

.resp-sharing-button--xing:hover {
  background-color: #114c4c
}

.resp-sharing-button--whatsapp {
  background-color: #25D366
}

.resp-sharing-button--whatsapp:hover {
  background-color: #1da851
}

.resp-sharing-button--hackernews {
background-color: #FF6600
}
.resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus {   background-color: #FB6200 }

.resp-sharing-button--vk {
  background-color: #507299
}

.resp-sharing-button--vk:hover {
  background-color: #43648c
}

.resp-sharing-button--facebook {
  background-color: #3b5998;
  border-color: #3b5998;
}

.resp-sharing-button--facebook:hover,
.resp-sharing-button--facebook:active {
  background-color: #2d4373;
  border-color: #2d4373;
}

.resp-sharing-button--twitter {
  background-color: #55acee;
  border-color: #55acee;
}

.resp-sharing-button--twitter:hover,
.resp-sharing-button--twitter:active {
  background-color: #2795e9;
  border-color: #2795e9;
}

.resp-sharing-button--linkedin {
  background-color: #0077b5;
  border-color: #0077b5;
}

.resp-sharing-button--linkedin:hover,
.resp-sharing-button--linkedin:active {
  background-color: #046293;
  border-color: #046293;
}

.resp-sharing-button--telegram {
  background-color: #54A9EB;
}

.resp-sharing-button--telegram:hover {
  background-color: #4B97D1;}