/*@import url(http://fonts.googleapis.com/css?family=Oxygen:400,700,300|Port+Lligat+Sans|Wire+One);*/
/***** Palette: My creation *****/
/* #009b77 Esmerald: Pantone Color of 2013; */
/* #e6e6e6 Light gray */
/* #f5f5f5 Lighter gray */
/* #ffffff White */
/* #9b9b9b Medium gray */
/* #4d4d4d Dark gray */
/* For Playground */
/* 'Lucida Sans Unicode', 'Lucida Grande' */
/* Oxygen / Port Lligat Sans */
@font-face {
  font-family: 'Playfair';
  src: url("../fonts/playfairdisplay-regular-webfont.eot");
  src: url("../fonts/playfairdisplay-regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/playfairdisplay-regular-webfont.woff") format("woff"), url("../fonts/playfairdisplay-regular-webfont.ttf") format("truetype"), url("../fonts/playfairdisplay-regular-webfont.svg#playfair_displayregular") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'PT Sans';
  src: url("../fonts/PTS55F-webfont.eot");
  src: url("../fonts/PTS55F-webfont.eot?iefix") format("eot"), url("../fonts/PTS55F-webfont.woff") format("woff"), url("../fonts/PTS55F-webfont.ttf") format("truetype"), url("../fonts/PTS55F-webfont.svg#webfont") format("svg"); }

/*@font-face {
    font-family: 'District Thin';
    src: url('../fonts/distproth-webfont.eot');
    src: url('../fonts/distproth-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/distproth-webfont.woff') format('woff'),
         url('../fonts/distproth-webfont.ttf') format('truetype'),
         url('../fonts/distproth-webfont.svg#district_prothin') format('svg');
    font-weight: normal;
    font-style: normal;
}*/
#playground {
  /*h1, h2 {
  	color: $clr4;
  	font-family: $fnt2;
  	font-weight: normal;
  	line-height: 1em;
  }
  h1 {
  	font-size: 12em;
  	line-height: 0.8em;
  }
  h2 {
  	font-size: 6em;
  	line-height: 0.6em;
  }*/ }
  #playground header {
    		/* Animated header
    		@include animation(hide,2s,ease,8s,1,normal);
    
    		padding-bottom: 10em;
    		padding-top: 5em;
    		text-align: right;
    
    		h1, h2 {
    			@include animation(bounceIn,10s,ease,1s,1,normal);
    
    			opacity: 0;
    			transform-origin: right top 0;
    		}*/ }
  #playground nav {
    		/*&.top-bar {
    			background-color: transparent;
    			min-height: 100px;
    			line-height: 100px;
    			margin-bottom: 0;
    
    			.top-bar-section {
    				ul {
    					background-color: transparent;
    
    					li {
    						&.hover {
    							a {
    								color: $clr4;
    							}
    						}
    						&.active {
    							a {
    								color: $clr1;
    							}
    						}
    						a {
    							background-color: transparent;
    							color: $clr5;
    							font-weight: normal;
    							line-height: 48px;
    							padding: 0 1em;
    							text-align: right;
    						}
    					}
    				}
    			}
    		}*/ }
    #playground nav#toc {
      /* Table of contents */
      left: 0;
      position: fixed;
      top: 205px;
      z-index: 9999; }
      #playground nav#toc ul {
        margin: 0; }
        #playground nav#toc ul li {
          /*@include border_radius(0,5px,5px,0);*/
          -webkit-transition: all 0.2s ease;
          -o-transition: all 0.2s ease;
          -ms-transition: all 0.2s ease;
          -moz-transition: all 0.2s ease;
          transition: all 0.2s ease;
          padding: 0.2em 0.5em; }
          #playground nav#toc ul li:hover {
            background-color: rgba(77, 77, 77, 0.9);
            font-size: 1.5em; }
            #playground nav#toc ul li:hover a {
              color: white; }
          #playground nav#toc ul li.active {
            background-color: rgba(155, 155, 155, 0.9); }
            #playground nav#toc ul li.active a {
              color: rgba(230, 230, 230, 0.9);
              font-size: 1em; }
          #playground nav#toc ul li a {
            color: rgba(155, 155, 155, 0.9);
            font-size: 0.8em; }
  #playground section {
    /* #080808 */ }
    #playground section#desc {
      padding: 5em 0; }
    #playground section#fonts {
      background-color: rgba(245, 245, 245, 0.9);
      padding: 3em 0; }
      #playground section#fonts .style3D {
        text-shadow: 0 1px 0 #999999, 0 2px 0 #969696, 1px 3px 0 #878787, 1px 4px 0 #878787, 2px 5px 0 #787878, 2px 6px 1px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.5), 1px 3px 5px rgba(0, 0, 0, 0.4), 1px 5px 10px rgba(0, 0, 0, 0.45), 2px 10px 10px rgba(0, 0, 0, 0.4), 2px 20px 20px rgba(0, 0, 0, 0.35); }
      #playground section#fonts .styleAnaglyphic {
        color: rgba(0, 168, 255, 0.5);
        text-shadow: 8px 8px 0 rgba(255, 0, 180, 0.5); }
      #playground section#fonts .styleBlur {
        color: transparent;
        text-shadow: 0 0 10px white; }
      #playground section#fonts .styleBoardGame {
        text-shadow: 2px 2px 0 #ffd217, 4px 4px 0 #5ac7ff, 6px 6px 0 #ffd217, 8px 8px 0 #5ac7ff; }
      #playground section#fonts .styleEmboss {
        color: rgba(77, 77, 77, 0.9);
        text-shadow: -2px -2px 2px rgba(0, 0, 0, 0.5), 1px 1px 2px rgba(77, 77, 77, 0.9), 0 0 0 rgba(0, 0, 0, 0.5); }
      #playground section#fonts .styleFire {
        color: #cd4606;
        text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; }
      #playground section#fonts .styleGlow {
        text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; }
      #playground section#fonts .styleInset {
        color: rgba(0, 155, 119, 0.2);
        font-weight: bold;
        text-shadow: 2px 2px 2px rgba(77, 77, 77, 0.9), 0 0 0 black;
        /*text-shadow: 1px 2px 4px $clrbg, 0 0 0 #000, 1px 2px 4px $clrbg;*/ }
      #playground section#fonts .styleOnFire {
        font-weight: bold; }
        #playground section#fonts .styleOnFire span {
          display: inline !important; }
      #playground section#fonts .styleRetro {
        text-shadow: 5px 5px 0px rgba(77, 77, 77, 0.9), 7px 7px 0px white; }
      #playground section#fonts .styleStroke {
        color: rgba(77, 77, 77, 0.9);
        text-shadow: 1px 1px 0 white, -1px -1px 0 white; }
      #playground section#fonts #textAnimate li, #playground section#fonts #textTransform li {
        z-index: 99; }
        #playground section#fonts #textAnimate li:hover.transformBounce span, #playground section#fonts #textTransform li:hover.transformBounce span {
          -webkit-animation-name: bounce;
          animation-name: bounce; }
        #playground section#fonts #textAnimate li:hover.transformFlip span, #playground section#fonts #textTransform li:hover.transformFlip span {
          -webkit-animation-name: flip;
          animation-name: flip; }
        #playground section#fonts #textAnimate li:hover.transformFlipUp span, #playground section#fonts #textTransform li:hover.transformFlipUp span {
          -webkit-animation-name: flipUp;
          -webkit-animation-duration: 1s;
          animation-name: flipUp;
          animation-duration: 1s; }
        #playground section#fonts #textAnimate li:hover.transformLevitate span, #playground section#fonts #textTransform li:hover.transformLevitate span {
          -webkit-animation-name: levitate;
          -webkit-animation-duration: 4s;
          animation-name: levitate;
          animation-duration: 4s; }
        #playground section#fonts #textAnimate li:hover.transformRotate span, #playground section#fonts #textTransform li:hover.transformRotate span {
          -webkit-animation-name: rotateAround;
          animation-name: rotateAround; }
        #playground section#fonts #textAnimate li:hover.transformSlide span, #playground section#fonts #textTransform li:hover.transformSlide span {
          -webkit-animation-name: slide;
          animation-name: slide; }
        #playground section#fonts #textAnimate li:hover.transformShake span, #playground section#fonts #textTransform li:hover.transformShake span {
          -webkit-animation-name: shake;
          animation-name: shake; }
        #playground section#fonts #textAnimate li:hover.transformSwing span, #playground section#fonts #textTransform li:hover.transformSwing span {
          animation-name: swing;
          transform-origin: center top 0;
          -ms-transform-origin: center top 0;
          -webkit-animation-name: swing;
          -webkit-transform-origin: center top 0; }
        #playground section#fonts #textAnimate li:hover.animateShine, #playground section#fonts #textTransform li:hover.animateShine {
          /* Only for webkit */ }
          #playground section#fonts #textAnimate li:hover.animateShine span, #playground section#fonts #textTransform li:hover.animateShine span {
            background: rgba(77, 77, 77, 0.9) -webkit-gradient(linear, left top, right top, from(rgba(77, 77, 77, 0.9)), to(rgba(77, 77, 77, 0.9)), color-stop(0.5, white)) 0 0 no-repeat;
            color: rgba(255, 255, 255, 0.1);
            display: block;
            -webkit-animation-name: shine;
            -webkit-animation-duration: 1s;
            -webkit-animation-iteration-count: infinite;
            -webkit-background-clip: text;
            -webkit-background-size: 40px 70px; }
        #playground section#fonts #textAnimate li span, #playground section#fonts #textTransform li span {
          display: block;
          z-index: 9999; }
      #playground section#fonts #textAnimate p, #playground section#fonts #textTransform p {
        color: rgba(230, 230, 230, 0.9); }
      #playground section#fonts #textTransform li:hover span {
        /* $n:name, $du:duration, $t:timingfunction, $de:delay, $i:iterationcount, $di:direction */
        -webkit-animation: bounce 2s ease 0.1s infinite normal;
        animation: bounce 2s ease 0.1s infinite normal; }
    #playground section .select {
      color: rgba(77, 77, 77, 0.9); }
      #playground section .select section {
        -webkit-border-radius: 20px 20px 20px 20px;
        -moz-border-radius: 20px 20px 20px 20px;
        border-radius: 20px 20px 20px 20px;
        background-color: rgba(77, 77, 77, 0.9);
        margin-bottom: 2em;
        padding: 3em;
        /*h3 {
        	margin-top: 0;
        	padding: 0 0 1em;
        }*/ }
        #playground section .select section:nth-of-type(even) {
          background-color: rgba(155, 155, 155, 0.9); }
        #playground section .select section h2 {
          color: rgba(230, 230, 230, 0.9);
          margin-bottom: 1em;
          margin-top: 0; }
      #playground section .select ul {
        display: inline-block;
        display: block;
        margin: 0; }
        #playground section .select ul:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: ' ';
          clear: both;
          height: 0;
          line-height: 0; }
        #playground section .select ul li {
          -webkit-border-radius: 5px 5px 5px 5px;
          -moz-border-radius: 5px 5px 5px 5px;
          border-radius: 5px 5px 5px 5px;
          display: inline-block;
          -webkit-transition: all 800ms "easeInOutQuad";
          -o-transition: all 800ms "easeInOutQuad";
          -ms-transition: all 800ms "easeInOutQuad";
          -moz-transition: all 800ms "easeInOutQuad";
          transition: all 800ms "easeInOutQuad";
          background-color: rgba(77, 77, 77, 0.9);
          color: white;
          cursor: pointer;
          display: block;
          float: left;
          font-size: 3em;
          margin: 1px;
          opacity: 0.8;
          padding: 0.25em 1em 0.4em;
          position: relative; }
          #playground section .select ul li:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: ' ';
            clear: both;
            height: 0;
            line-height: 0; }
          #playground section .select ul li:hover {
            opacity: 1; }

/***** Override app.scss *****/
body .has-tip {
  border-color: transparent; }

/***** END Override app.scss *****/
/***** Small screens *****/
@media only screen and (max-width: 480px) {
  #playground section .select ul li {
    font-size: 2em; } }
/***** END Small screens *****/
/***** Small & Medium screens *****/
@media only screen and (max-width: 768px) {
  nav#toc {
    display: none; } }
/***** END Small & Medium screens *****/
/***** Keyframes *****/
@keyframes hide {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale(0.5); }

  30% {
    -webkit-transform: scale(2); }

  50% {
    -webkit-transform: scale(0.75); }

  70% {
    -webkit-transform: scale(1.5); }

  100% {
    -webkit-transform: scale(1); } }

@keyframes bounce {
  0% {
    transform: scale(0.5); }

  30% {
    transform: scale(2); }

  50% {
    transform: scale(0.75); }

  70% {
    transform: scale(1.5); }

  100% {
    transform: scale(1); } }

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3); }

  5% {
    opacity: 1;
    transform: scale(1.1); }

  10% {
    transform: scale(0.9); }

  15% {
    transform: scale(1); } }

/*@-webkit-keyframes bounceIn {
	0% {	opacity: 0; transform: scale(0.3); }
	50% {	opacity: 1; transform: scale(1.1); }
	70% {	transform: scale(0.9); }
	100% {	transform: scale(1); }
}*/
@-webkit-keyframes flipUp {
  0% {
    -webkit-transform-origin: right top; }

  40% {
    -webkit-transform: rotate(120deg) translateY(20px);
    -webkit-transform-origin: 70% top; }

  50% {
    -webkit-transform: rotate(180deg) translateY(40px);
    -webkit-transform-origin: center top; }

  60% {
    -webkit-transform: rotate(240deg) translateY(20px);
    -webkit-transform-origin: 30% top; }

  100% {
    -webkit-transform: rotate(360deg) translateY(0);
    -webkit-transform-origin: left top; } }

@keyframes flipUp {
  0% {
    transform-origin: right top;
    -ms-transform-origin: right top; }

  40% {
    transform: rotate(120deg) translateY(20px);
    transform-origin: 70% top;
    -ms-transform-origin: 70% top; }

  50% {
    transform: rotate(180deg) translateY(40px);
    transform-origin: center top;
    -ms-transform-origin: center top; }

  60% {
    transform: rotate(240deg) translateY(20px);
    transform-origin: 30% top;
    -ms-transform-origin: 30% top; }

  100% {
    transform: rotate(360deg) translateY(0);
    transform-origin: left top;
    -ms-transform-origin: left top; } }

@-webkit-keyframes levitate {
  20% {
    color: green;
    -webkit-transform: translateY(0); }

  30% {
    color: green;
    -webkit-transform: translateY(-40px); }

  40% {
    color: red;
    -webkit-transform: rotate(0) translateY(-40px); }

  45% {
    -webkit-transform: rotate(2deg) translateY(-40px); }

  50% {
    -webkit-transform: rotate(-1deg) translateY(-40px); }

  55% {
    color: red;
    -webkit-transform: rotate(0) translateY(-40px); }

  60% {
    -webkit-transform: translateY(-40px); }

  70% {
    color: blue;
    -webkit-transform: translateY(0); } }

@keyframes levitate {
  20% {
    color: green;
    transform: translateY(0); }

  30% {
    color: green;
    transform: translateY(-40px); }

  40% {
    color: red;
    transform: rotate(0) translateY(-40px); }

  45% {
    transform: rotate(2deg) translateY(-40px); }

  50% {
    transform: rotate(-1deg) translateY(-40px); }

  55% {
    color: red;
    transform: rotate(0) translateY(-40px); }

  60% {
    transform: translateY(-40px); }

  70% {
    color: blue;
    transform: translateY(0); } }

@-webkit-keyframes rotateAround {
  100% {
    -webkit-transform: rotate(360deg); } }

@keyframes rotateAround {
  100% {
    transform: rotate(360deg); } }

@-webkit-keyframes slide {
  50% {
    -webkit-transform: translateX(40px); } }

@keyframes slide {
  50% {
    transform: translateX(40px); } }

@-webkit-keyframes shake {
  30% {
    -webkit-transform: rotate(0) translateY(-20px); }

  40% {
    -webkit-transform: rotate(360deg); }

  50% {
    -webkit-transform: rotate(0) translateY(-40px); }

  60% {
    -webkit-transform: rotate(360deg); }

  70% {
    -webkit-transform: rotate(0) translateY(-20px); }

  100% {
    -webkit-transform: translateY(0); } }

@keyframes shake {
  30% {
    transform: rotate(0) translateY(-20px); }

  40% {
    transform: rotate(360deg); }

  50% {
    transform: rotate(0) translateY(-40px); }

  60% {
    transform: rotate(360deg); }

  70% {
    transform: rotate(0) translateY(-20px); }

  100% {
    transform: translateY(0); } }

@-webkit-keyframes shine {
  0% {
    background-position: top left; }

  100% {
    background-position: top right; } }

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(20deg); }

  40% {
    -webkit-transform: rotate(-15deg); }

  60% {
    -webkit-transform: rotate(10deg); }

  80% {
    -webkit-transform: rotate(-5deg); }

  100% {
    -webkit-transform: rotate(0deg); } }

@keyframes swing {
  20% {
    transform: rotate(20deg); }

  40% {
    transform: rotate(-15deg); }

  60% {
    transform: rotate(10deg); }

  80% {
    transform: rotate(-5deg); }

  100% {
    transform: rotate(0deg); } }

/***** sonarEffect animation *****/
@-moz-keyframes sonarEffect {
  0% {
    opacity: 0.3; }

  40% {
    opacity: 0.5;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 10px 10px white, 0 0 0 10px rgba(0, 0, 0, 0.3); }

  100% {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 10px 10px white, 0 0 0 10px rgba(0, 0, 0, 0.3);
    transform: scale(1.5);
    opacity: 0; } }

@-webkit-keyframes sonarEffect {
  0% {
    opacity: 0.3; }

  40% {
    opacity: 0.5;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 10px 10px white, 0 0 0 10px rgba(0, 0, 0, 0.3); }

  100% {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 10px 10px white, 0 0 0 10px rgba(0, 0, 0, 0.3);
    -webkit-transform: scale(1.5);
    opacity: 0; } }

@keyframes sonarEffect {
  0% {
    opacity: 0.3; }

  40% {
    opacity: 0.5;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 10px 10px white, 0 0 0 10px rgba(0, 0, 0, 0.3); }

  100% {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1), 0 0 10px 10px white, 0 0 0 10px rgba(0, 0, 0, 0.3);
    transform: scale(1.5);
    opacity: 0; } }

/***** sonarEffect animation *****/