html, body {
    height: 100%;
}
body {
    background-color: #fff;
    margin: 0;
    font-family: Helvetica, sans-serif;;
    overflow: hidden;
}
a {
    color: #000;
}
#info {
    position: absolute;
    width: 100%;
    color: #ffffff;
    padding: 5px;
    font-family: Monospace;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    z-index: -1;
}
#menu {
    position: absolute;
    bottom: 0.6px;
    width: 100%;
    text-align: center;
    //display: none; 
}

.done #menu {
    display: block;
}
.element {
    width: 500px;
    height: 160px;
    box-shadow: 0px 0px 50px rgba(0,0,0,0.3);
    text-align: center;
    cursor: pointer;
}


.element:hover {
    box-shadow: 0px 0px 12px rgba(255,183,1,0.75);
    border: 1px solid rgba(255,183,1,1);
}

    .element .number {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 12px;
        color: rgba(255,255,255,1);
        background: rgba(255,255,255,.2);
        width: 23px;
        height: 20px;
        border-radius: 50px;

        padding-top: 4px;
    }

    .element.open .number {
      top: -150px;
      right: -100px;
      height: 300px;
      width: 300px;
      border-radius: 200px;
      opacity: .8;
      background-size: 100%;
      background-position: 50% 190%;
      box-shadow: 0 0 5px #000;
      background-position: 0px 150px;
    }
    .element.open {
      overflow: hidden;
      width: 367px;
      border-radius: 4px;
      top: -150px;
      left: -50px;
    }

    .element .symbol {
        position: absolute;
        top: 40px;
        left: 0px;
        right: 0px;
        font-size: 60px;
        font-weight: bold;
        color: rgba(255,255,255,0.9);
    }
    .element .details {
        position: absolute;
        bottom: 15px;
        left: 0px;
        right: 0px;
        font-size: 13px;
        color: rgba(255,255,255,1);

        display:  none;
    }

    .element.open .details a {
      color: white;
      text-decoration: none;
      font-variant: small-caps;
      opacity: .95;
      font-size: 14px;
      padding: 6px 12px;
      position: absolute;
      bottom: -6px;
    }

    .element a.tutLink {
      float: left;
      max-width: 100%;
      opacity: .75;
      text-align: right;
      left: 30px;
      right: 26px;
    }
    .element.open a.directLink {
      float: left;
      padding-left: 0;
      position: relative;
      top: -180px;
    }
    .element.open a.directLink:hover {
        padding-left:6px;
    }

.element.open {
    background: #3f79ae;
    text-align: left;
    padding-left: 40px;
    box-shadow: 0 0 50px #000;
}

    .element.open .symbol,
    .element.open .details {
        padding-left: 30px;
        padding-right: 30px;
        display: block;
        margin-bottom: 50px;
    }

.element.selected {
  background-color: #FFb701!important;
}

.element.open.selected {
  background-color: #3F7Aff!important;
}

.element a:hover {
    background: rgba(255,255,255,0.5);
    padding-left: 6px;
}

button {
    color: #3F7AAE;
    background: transparent;
    outline: 1px solid #3F7AAE;
    border: 0px;
    padding: 5px 10px;
    cursor: pointer;
}
button:hover {
    background-color: #3F7AAE;
    color: white;
}
button:active {
    color: #000000;
    background-color: #3F7AAE;
}

#element1.open .number {
  background-image: url(../img/mdl_test.PNG);
  background-position: 0 118%;
}
#element2.open .number {
  background-image: url(../img/sisu.png);
}
#element3.open .number {
  background-image: url(../img/mahara.png);
  background-position: 0px 150px;
}
#element4.open .number {
  background-image: url(../img/panopto.png);
}
#element5.open .number {
  background-image: url(../img/ls.png);
}
#element6.open .number {
  background-image: url(../img/bbbb.png);
  background-position: 0px -27px;
}
#element7.open .number {
  background-image: url(../img/uttv.png);
}
#element8.open .number {
  background-image: url(../img/urkund.jpg);
}
#element9.open .number {
  background-image: url(../img/nextcloud.png);
  background-position: 0px 150px;
}
#element10.open .number {
  background-image: url(../img/acp.png);
}

.hindamine {
    display: none;
}

.element.open .hindamine {
    display: block;
    color: white;
    position: relative;
    top: 332px;
    left: 10px;
}

.element.open .hindamine div {
    float: left;
    margin-right: 25px;
    margin-left: -20px;
    margin-top: -20px;
    text-decoration: none;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
}

.element.open .hindamine div a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    display: block;
    text-align: center;
    padding: 6px 12px;
    font-size: 14px;
    color: white;
}

.element.open .hindamine div:nth-child(1),
.element.selected.voted-1 {
    background: rgba(231, 189, 43, 0.95)!important;
}

.element.open .hindamine div:nth-child(2),
.element.selected.voted-2 {
    background: rgba(117, 189, 106, 0.95)!important;
}

.element.open .hindamine div:nth-child(3),
.element.selected.voted-3 {
    background: rgba(224, 78, 78, 0.95)!important;
}

.hindamine.voted div {
    background: grey !important;
    display: none;
}
.hindamine.voted:before {
    content: "Valik tehtud!";
    background: grey!important;
    padding: 6px 12px;
    margin-left: -10px;
}

.element.stuck .hindamine:before {
    content: "Jätsid valiku tegemata? Ole hea ja tee valik!";
    background: grey;
    padding: 6px 12px;
    margin-left: -20px;
    margin-top: -20px;
    display: block;
    width: 314px;
}

.element.stuck .hindamine div {
    display:none;
}

.element.stuck .hindamine:hover {
    cursor: pointer;
    background: rgba(180,180,180,1) !important;
}

svg {
  display:none;
}

.done svg {
    display: block;
    height: 2200px;
    opacity: .95;
}

.element.open .symbol {
    font-size: 40px;
    margin-left: -3px;
}

.element.open .details {
    font-size: 13px;
    text-shadow: 1px 1px 50px rgba(0,0,0,.6);

}


div#info div {
    display: none;
}

.done div#info div {
    display: inline-block;
}

.done div#used .legendbox {
    background: rgba(231, 189, 43, 0.95);
}

.done div#will_use .legendbox {
    background: rgba(117, 189, 106, 0.95);
}

.done div#not_use .legendbox {
    background: rgba(224, 78, 78, 0.95);
}

.done .legendbox {
    width: 10px;
    height: 10px;
    border: 1px solid rgba(206, 206, 206, 0.38);
    margin-right: 4px;
    vertical-align:middle;
}

.done .legendtext {
    font-family: "verdana";
    color: #3f79ae;
    vertical-align: middle;
    font-size: 16px;
    font-variant: all-petite-caps;
    margin-right: 10px;
    vertical-align: middle;
    margin-top: -4px;
}

/* CLOUDS related CSS */
.element {
	width: 350px; height: 120px;
	background: #3f79ae!important;
	border-radius: 100px;
	position: relative;
	margin: 150px 50px;
}
.element:after, .element:before {
	content: '';
	position: absolute;
	background: #3f79ae;
	z-index: -1;
    
}

.element:after {
	width: 100px; height: 100px;
	top: -50px; left: 50px;
	border-radius: 100px;
}
.element:before {
	width: 180px; height: 180px;
	top: -90px; right: 50px;
	border-radius: 200px;
}

div#element5 .symbol {
    font-size: 53px;
}

div#element6 .symbol {
    font-size: 44px;
}

div#element10 .symbol {
    font-size: 52px;
}

.element.selected.voted-1:after, .element.selected.voted-1:before  {
    background: rgba(231, 189, 43, 0.95)!important;
}

.element.selected.voted-2:after, .element.selected.voted-2:before {
    background: rgba(117, 189, 106, 0.95)!important;
}

.element.selected.voted-3:after, .element.selected.voted-3:before {
    background: rgba(224, 78, 78, 0.95)!important;
}

.done .element.voted-main.selected {
    top: -200px!important;
    left: -60px;
}

.done .element.open.voted-main.selected {
    top: -150px!important;
    left: -50px;
}


.done .element.voted-1,
.done .element.voted-1:before,
.done .element.voted-1:after,
svg g path:nth-child(1),
.done div#used .legendbox
 {
    background: #467faa!important;
    fill: #467faa!important;
   
    background: #3C7DDB!important;
    fill: #3C7DDB!important;
 
}

.done .element.voted-2,
.done .element.voted-2:before,
.done .element.voted-2:after,
svg g path:nth-child(2),
.done div#will_use .legendbox
 {
    background: #86e08a!important;
    fill: #86e08a!important;
    
    background: #89A81D!important;
    fill: #89A81D!important;
 
}

.done .element.voted-3,
.done .element.voted-3:before,
.done .element.voted-3:after,
svg g path:nth-child(3),
.done div#not_use .legendbox
 {
    background: #d86363!important;
    fill: #d86363!important;
    
    background: #E16454!important;
    fill: #E16454!important; 
    
}

.done.IE svg {
    left: 0px;
}

.done.IE .element,
.IE .element {
    transition: none!important;
    -ms-transition: none!important;
}

.done.IE #container .element.open {
    margin-top: 100px; 
    margin-left: 60px;
}

.done.IE .selected.voted-main.element {
    top: -100px !important;
    left: -60px;
}

.element:not(.open) {
    height: 130px!important;
}

.element:not(.open) .number {
    display:none;
}

button#table {
    display:none;
}

svg image {
  opacity:0;
}

body.all.done svg image {
  opacity:1;
}