/*@import url("https://fonts.googleapis.com/css?family=Alegreya+Sans:800,900");*/
/*@import "AlegreyaSans-ExtraBold.ttf";*/

/*@font-face {
    font-family: 'Alegreya Sans';
    src: url(AlegreyaSans-ExtraBold.ttf);
}*/

 nav {
         top: -165px;
	 right: -150px;
	 display: block;
	 position: fixed;
	 width: 500px;
	 height: 500px;
	 user-select: none;
	 transform: translate3d(25px, -25px, 0);
	 transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9);
}
nav:hover {
	 background: shade(#ff6347, 90%);
	 color: white;
	 transition-delay: 0s;
}
 nav.open {
     	 top: -165px;
	 right: -150px;
	 transform: translate3d(0, 0, 0);
}
 nav.top-right {
/*	 top: -165px;
	 right: -165px;*/
}
 .disc {
	 position: absolute;
	 display: inline-block;
	 text-align: center;
	 cursor: pointer;
	 font: 25px Alegreya Sans, sans-serif;
	 line-height: 40px;
	 padding-top: 10px;
	 border-radius: 250px;
	 transform: scale3d(0.5, 0.5, 0.5) rotate3d(0, 0, 1, 190deg);
	 pointer-events: none;
	 opacity: 0.25;
	 cursor: pointer;
	 transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 0.9), opacity 0.5s;
}
 .disc div {
	 transform: rotate(180deg);
}
 .open .disc {
	 pointer-events: auto;
	 opacity: 1;
}
 .l1 {
	 top: 0px;
	 left: 0px;
	 right: 0px;
	 bottom: 0px;
	 background: #e1f0fb;
	 transition-delay: 0s;
         color: black;
}
 .open .l1 {
	 transition-delay: 0s;
	 transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
	 opacity: 1;
}
 .open .l1:hover {
	 background: shade(#e1f0fb, 90%);
	 color: white;
	 transition-delay: 0s;
}
 .open .l1:active {
	 background: shade(#e1f0fb, 50%);
	 color: #e1f0fb;
}
 .open .l1.toggle {
	 transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
}
 .l2 {
	 top: 50px;
	 left: 50px;
	 right: 50px;
	 bottom: 50px;
	 background: #d7ebfa;
	 transition-delay: 0.1s;
         color: black;
}
 .open .l2 {
	 transition-delay: 0.1s;
	 transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
	 opacity: 1;
}
 .open .l2:hover {
	 background: shade(#d7ebfa, 90%);
	 color: white;
	 transition-delay: 0s;
}
 .open .l2:active {
	 background: shade(#d7ebfa, 50%);
	 color: #d7ebfa;
}
 .open .l2.toggle {
	 transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
}
 .l3 {
	 top: 100px;
	 left: 100px;
	 right: 100px;
	 bottom: 100px;
	 background: #cee6f8;
	 transition-delay: 0.2s;
         color: black;
}
 .open .l3 {
	 transition-delay: 0.2s;
	 transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
	 opacity: 1;
}
 .open .l3:hover {
	 background: shade(#cee6f8, 90%);
	 color: white;
	 transition-delay: 0s;
}
 .open .l3:active {
	 background: shade(#cee6f8, 50%);
	 color: #cee6f8;
}
 .open .l3.toggle {
	 transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
}
 .l4 {
	 top: 150px;
	 left: 150px;
	 right: 150px;
	 bottom: 150px;
	 background: #c4e2f7;
	 transition-delay: 0.3s;
         color: black;
}
 .open .l4 {
	 transition-delay: 0.3s;
	 transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
	 opacity: 1;
}
 .open .l4:hover {
	 background: shade(#c4e2f7, 90%);
	 color: white;
	 transition-delay: 0s;
}
 .open .l4:active {
	 background: shade(#c4e2f7, 50%);
	 color: #c4e2f7;
}
 .open .l4.toggle {
	 transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg);
}
 .l5 {
	 top: 200px;
	 left: 200px;
	 right: 200px;
	 bottom: 200px;
	 background: #bbddf5;
	 transition-delay: 0.4s;
         color: black;
}
 .open .l5 {
	 transition-delay: 0.4s;
	 transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 190deg);
	 opacity: 1;
}
 .open .l5:hover {
	 background: shade(#bbddf5, 90%);
	 color: white;
	 transition-delay: 0s;
}
 .open .l5:active {
	 background: shade(#bbddf5, 50%);
	 color: #bbddf5;
}
 .open .l5.toggle {
	 transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, 10deg); 
}
 .toggle {
	 line-height: 100px;
	 padding: 0;
	 width: 100px;
	 background: #b1d8f4;
	 opacity: 1;
	 transform: none;
	 pointer-events: auto;
	 transition-delay: 0s;
         color: black;
}
 .open .toggle {
	 transform: rotate3d(0, 0, 1, 0deg);
}
 .toggle:hover {
	 background: shade(#b1d8f4, 90%);
	 text-decoration: underline;
}
 .toggle:active {
	 background: shade(#b1d8f4, 50%);
	 color: rgba(255, 215, 0, 0.5);
	 transform: scale(0.9);
	 transition-duration: 0s;
}

/*.count
{
  line-height: 50px;
  color:white;
  margin-left:30px;
  margin-bottom: 50px;
  font-size:25px;
}*/
.forcounter {
    float: right;
    float: bottom;
}
#talkbubble1 {
   width: 150px;
   height: 80px;
   background: lightblue;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
  float:left;
  margin:20px;
}
#talkbubble1:before {
   content:"";
   position: absolute;
   bottom: 100%;
   right: 60px;
   width: 0;
   height: 0;
   border-right: 13px solid transparent;
   border-bottom: 26px solid lightblue;
   border-left: 13px solid transparent;
}
.rtside1 {
    float:left;
    max-width:20%;
    /*background-color: blue;*/
    max-height:500px;
}