body{
  margin:0;
  background: #45dbee; /* Old browsers */
  background: -moz-linear-gradient(top, #45dbee 0%, #76e5f2 48%, #ffffff 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #45dbee 0%,#76e5f2 48%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #45dbee 0%,#76e5f2 48%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45dbee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */;
  overflow:hidden;
}

/*modified font awesome stylings*/

button{
  position:absolute;
  top:0;
  right:0;
  margin:4vh 4vh 0 0;
}

button {
  background-color: #f2f2f2;
  background-image: linear-gradient(to bottom, #f2f2f2, #f2f2f2);
  border: 1px solid #bfbfbf;
  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: #8c8c8c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  cursor: pointer;
  font-family: Verdana, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  padding: 9px 16px 9px;
  transition: all 20ms ease-out;
  vertical-align: top;
}
button:hover, button:focus {
  background: #f2f2f2;
  border-color: #8c8c8c;
  box-shadow: inset 0 1px 0 white, inset 0 -1px 0 #d9d9d9, inset 0 0 0 1px #f2f2f2;
}
button:active {
  background: #f2f2f2;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
button .fa {
  color: #bfbfbf;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
button.orange {
  background-color: #f58a38;
  background-image: linear-gradient(to bottom, #f58a38, #f57c20);
  border: 1px solid #c25706;
  box-shadow: inset 0 1px 0 #ffb984, inset 0 -1px 0 #db6f1d, inset 0 0 0 1px #f59851, 0 2px 4px rgba(0, 0, 0, 0.2);
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
button.orange:hover, .button-orange:focus {
  background: #f57c20;
  border-color: #773300;
  box-shadow: inset 0 1px 0 #ffb984, inset 0 -1px 0 #db6f1d, inset 0 0 0 1px #f59851;
}
button.orange:active {
  background: #f57c20;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
}
.button-orange .fa {
  color: #c25706;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

/*scene styling*/
svg#polar_bear-scene{
  margin:auto;
  display:block;
  height:100vh;
  
}
.scene-container{
  display:block;
  margin:auto;
  width:auto;
  overflow:hidden;
}
/*scene styling end*/

.tri{
  transform-origin:0% 100%;  
}

.tri:hover{
  opacity:0.7;
}

.tri:focus{
  outline:none;
  opacity:0.25;
}

.tri:focus.tri:hover{
  opacity:1;  
}


@-webkit-keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

@keyframes slideInDown {
    0% {
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }
    to {
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

.slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown
}

@-webkit-keyframes hinge {
    0% {
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }
    20%,
    60% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(80deg);
        animation-timing-function: ease-in-out;
        transform: rotate(80deg);
    }
    40%,
    80% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(60deg);
        animation-timing-function: ease-in-out;
        opacity: 1;
        transform: rotate(60deg);
    }
    to {
        -webkit-transform: translate3d(0, 700px, 0);
        opacity: 0;
        transform: translate3d(0, 700px, 0)
    }
}

@keyframes hinge {
    0% {
        -webkit-animation-timing-function: ease-in-out;
        
        animation-timing-function: ease-in-out;
        
    }
    20%,
    60% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(80deg);
        animation-timing-function: ease-in-out;
        transform: rotate(80deg);
        
    }
    40%,
    80% {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-transform: rotate(60deg);
        animation-timing-function: ease-in-out;
        opacity: 1;
        transform: rotate(60deg);
    }
    to {
        -webkit-transform: translate3d(0, 700px, 0);
        opacity: 0;
        transform: translate3d(0, 700px, 0)
    }
}

.hinge {
    -webkit-animation-duration: 2s;
    -webkit-animation-name: hinge;
    animation-duration: 2s;
    animation-name: hinge
}

.hinge-reverse{
    -webkit-animation-duration: 20ms;
    -webkit-animation-name: hinge-reverse;
    animation-direction:reverse;
    animation-duration: 20ms;
    animation-name: hinge-reverse;
}

.animated.fast {
    -webkit-animation-duration: .8s;
    animation-duration: .8s
}

.animated.faster {
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}