* {
  @include box-sizing(border-box);
}

.initialHide{
	display:none;
}

@import 'https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700&subset=devanagari,latin-ext';

body { 
 font-family: 'Rajdhani', sans-serif;
 font-weight: 300;
 min-width:760px;
}

/* Let's get this party started */
::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.6); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255,255,255,0.2); 
}

.glossary {
    position: fixed;
    top: 0px;
    right:11vw;
    width: 80%;
    max-width:300px;
    height: 30px;
    background-color: rgba(255,255,255,0.2);
    filter:alpha(opacity=90);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
    z-index: 10000;
    border-radius:0px 0px 10px 10px;
    transition: opacity 1s;
    transition: bottom 1s ease;
}

.glossary-tabs {
  width:90%;
  height:30px;
  float:left;
}

.glossary-toggle{
  width:10%;
  height:30px;
  float:left;
  font-size:1em;
  font-weight:700;
  color:#fff;
  line-height:30px;
  text-align: center;
}

.glossary-tab{
  color:#fff;
  font-weight:500;
  text-align:center;
  line-height:30px;
  height:30px;
  float:left;
  width:33.33%;
  background-color:rgba(255,255,255,0);
  transition:background-color 1s ease;
  border-radius:0 0 10px 10px;
}
.glossary-tab:hover{
  background-color:rgba(255,255,255,0.5);
}


.glossary:hover {
    opacity:1;
    transition: opacity 1s;
}
	
  .glossary-content{
    color:#fff;
    width:94%;
    padding:3%;
    height:251px;
    overflow-y:scroll;
    overflow-x: hidden;
    transition: height 0.5s ease;
  }

.overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    right:0;
    margin:auto;
    width: 80%;
    max-width:500px;
    height: 300px;
    background-color: #fff;
    filter:alpha(opacity=90);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
    z-index: 10000;
    border-radius:10px 10px 0px 0px;
    transition: opacity 1s;
    transition: bottom 1s ease;
}

.hidden{
}

.overlay:hover {
    opacity:1;
    transition: opacity 1s;
}

.overlay-header{
    padding: 0px 50px 0px 20px;
    height:14%;

    margin-top: -5;
    margin-bottom: 5;
}

.overlay-toggle{
    position: absolute;
    right: 15px;
    top: 0px;
    font-size:2.5em;
    font-weight:bold;
}
.overlay-toggle:hover{
    color:rgba(55,175,175,1);
    cursor:pointer;
}
.overlay-toggle:active{
    color:#fff;

}

.overlay-content{
	width:80%;
	height:80%;
	float:left;
}
.overlay-content-right{
	width:20%;
	height:80%;
	float:left;
	background: -moz-linear-gradient(top, rgba(69,72,77,0.53) 0%, rgba(13,14,15,0.53) 81%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(69,72,77,0.53) 0%,rgba(13,14,15,0.53) 81%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(69,72,77,0.53) 0%,rgba(13,14,15,0.53) 81%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8745484d', endColorstr='#d9000000',GradientType=0 ); /* IE6-9 */
}

.content-right-info{
    margin-top: 40px;
    padding: 5 0 0 0;
    height: 80px;
    width: 100%;
    font-size: 1.5em;
    font-weight: 500;
    color:#fff;
}

.right-info-1{
    height: 50%;
    width: 100%;
    text-align: center;
}
.right-info-2{
    height: 50%;
    width: 100%;
    text-align: center;
}

.timdir{
    width:100%;
    height:45px;
    text-align:center;
    font-weight:500;
    color:white;
}

.video-container{
	width:100%;
	height:81.5%;
}
.twist-left{
}
.twist-right{
}
[class*='twist-'] {
	width:50%;
	height:20%;
	float: left;
	text-align:center;

    -webkit-margin-after: 2.5%;
    -webkit-margin-before: 2.5%;
}

[class*='switch-'] {
	width:50%;
	float:left;
	height:41px;
	text-align:center;
	font-size:27pt;
	background:white;
}
[class*='switch-']:hover {
	background-color:rgba(55,175,175,1);
	cursor:pointer;
	color:#fff;
}
[class*='switch-']:active {
	background-color:rgba(100,100,100,1);
	cursor:pointer;
	color:#fff;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

.switch-active{
	background:rgba(22,22,22,0);
	color:#fff;
}

$pad: 20px;

.grid {
  background: white;
  margin: 0 0 $pad 0;
  height:31px;
  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
}

[class*='col-'] {
	height:31px;
	float: left;
	padding-right: $pad;
	.grid &:last-of-type {
		padding-right: 0;
	}
  
}
.col-2-3 {
	width: 66.66%;
}
.col-1-3 {
	width: 33.33%;
}
.col-1-2 {
	width: 50%;
}
.col-1-4 {
	width: 25%;
}
.col-1-8 {
	width: 12.5%;
}
.col-1-9 {
	width: 11.11%;
}
.col-2-9 {
	width: 22.22%;
}
.col-3-9 {
	width: 33.33%;
}
.col-1-12 {
	width: 8.33%;
}
.col-7-9 {
  width:77.77%;
}

.module {
  padding: $pad;
  background: #eee;
  text-align:center;
  border-radius:11px;
  margin:0px auto 0px auto;
  font-weight:600;
  
    overflow: hidden;
    white-space: nowrap;
}

.rowTotal {
  height:100%;
  background:rgba(255,255,255,0.3);
  border-radius: 11px 0px 0px 11px;
  position:relative;
  right:-22px;
}

.rowTotalInner {
    background: white;
    text-align: center;
    border-radius: 11px 0px 0px 11px;
    position: relative;
    margin: auto 0 auto auto;
    height: 31px;
    width: 30px;
    color:#fff;
    transition: all 1s ease;
    line-height: 31px;
}

.rowTotalInner:hover {
	color:black;
}

.button{
  cursor:pointer;
  transition: background-color ease 1s;
  transition: color ease 0.2s;
  height:31px;
  line-height: 31px;
}
.button:hover {
  background-color:rgba(55,175,175,1);
  color:#fff;
  transition: background-color ease 0.2s;
  transition: color ease 0.2s;
  
}
.button a{
  line-height: 31px;
}

.tmdrbutton{
  cursor:pointer;
  transition: background-color ease 1s;
  transition: color ease 0.2s;
}
.tmdrbutton:hover {
  background-color:rgba(55,175,175,1);
  color:#fff;
  transition: background-color ease 0.2s;
  transition: color ease 0.2s;
  
}

.active {
  background-color:rgba(250,250,250,0.3);
  transition: background-color ease 0.2s;
  transition: color ease 0.2s;
  color:#fff;
}

.blank {
  padding $pad;
  background: rgba(0,0,0,0);
  height:21px;
}

/* Opt-in outside padding */
.grid-pad {
  height:21px;
  padding: $pad 0 $pad $pad;
  [class*='col-']:last-of-type {
    padding-right: $pad;
  }
  
}
.grid-gap{
	height:31px;
	width:100%;
}

body {
  padding: 10px 15px 310px;
  background: url(https://s.cdpn.io/3/dark_wall_@2X.png);
  background-size: 300px 300px;
}
h1 {
  color: white;
  em {
  	color: #666;
    font-size: 16px;
  }
}

#svgContainer { 
	z-index: -10;
	position:absolute;
	top:0px;
	left:0px;
}


#outer{
	margin:0 auto;
	width: 80%;
}

.customcheck {
  width: 50px;
  position: relative;
  margin: 10px auto 3px auto;
}
.customcheck label {
  width: 50px;
  height: 50px;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background: -webkit-linear-gradient(top, #222222 0%, #45484d 100%);
  background: linear-gradient(to bottom, #222222 0%, #45484d 100%);
  border-radius: 4px;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.4);
}
.customcheck label:after {
  content: '';
  width: 20px;
  height: 10px;
  position: absolute;
  top: 12px;
  left: 12px;
  border: 6px solid #fcfff4;
  border-top: none;
  border-right: none;
  background: transparent;
  opacity: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.customcheck label:hover::after {
  opacity: 0.3;
  border-color:rgba(55,175,175,1);
}
.customcheck input[type=checkbox] {
  visibility: hidden;
}
.customcheck input[type=checkbox]:checked + label:after {
  opacity: 1;
}

.inline-flower {
	margin-top:3px;
	margin-bottom:-3px;
	width:27px;
}

.overlay-flower {
	width:40px;
	vertical-align:middle;
}



.treeLink{
  cursor:pointer;
  transition: background-color ease 1s;
  transition: color ease 0.2s;
  background:rgba(55,175,175,0.5);
  color:#fff;
}
.treeLink:hover {
  background-color:rgba(55,175,175,1);
  color:#fff;
  transition: background-color ease 0.2s;
  transition: color ease 0.2s;
  
}

.inventory{
	position:fixed;
	left:0px;
	top:80px;
	width:11.11vw;
	min-height:84px;
	max-height:calc(100vh-80px);
	background:rgba(255,255,255,0.1);
	border-radius:0 11px 11px 0;
	/*transition background-color 1s ease;
	
	transition:height 1s ease;*/
}
.inventory:hover{
	/*transition:background-color 1s ease;*/
}
.inventory h2 {
	text-align:center;
	color:#fff;
}

.seeds{
	font-size:1em;
	padding:5px;
}
.seed{ 
	text-align:center;
	color:#000;
	margin:5px;
	border-radius:11px;
	transition:background 1s ease;
	background:rgba(255,255,255,0);
  line-height:31px;
}
.seed:hover {
  background-color:rgba(55,175,175,1);
  color:#fff;
  transition: background-color ease 0.2s;
  transition: color ease 0.2s;
  cursor:pointer;
  
}

.activeSeed {
	color:#fff;
	font-weight:500;
	background-color:rgba(22,22,22,0.2);
}

.begin{
}

.reelsdiagram{
    margin: auto;
    margin-top: 0;
    margin-bottom: 0;
    width: 510.7px;
}

.position{
  fill: #37AFAF;
  transition: all 1s ease;
  r:7.896;
}
.position:hover{
  fill:#fff;
  transition: all 0.2s ease;
  r:11.896;
}

.musicPlayer{
    position: fixed;
    height: 65px;
    font-size: xx-small;
    width: 65px;
    right: 0px;
    bottom: 0px;
    opacity: 0.1;
    transition: all 1s;
}
.musicPlayer:hover{
    opacity:1;
    transition: all 1s;
}


/*context-menu*/
.custom-menu {
    z-index: 100000;
    position: absolute;
    overflow: hidden;
    /*border: 1px solid #CCC;*/
    white-space: nowrap;
    background: rgba(255,255,255,0.5);
    color: #000;
    border-radius: 5px;
    font-weight:400;
}

.custom-menu a {
    text-decoration:none;
    color:#333;
    padding: 8px 12px;
    /*cursor: pointer;*/
}

.custom-menu:hover {
    background-color: #fff;
    transition: all 0.5s ease;
}

.tdtab{
  border-radius: 0 0 11px 11px;
  width: 80%;
  background-color:rgba(255,255,255,0.5);
}
.timingdirection {
  width:25%;
  float:left;
}