@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
@import url(https://fonts.googleapis.com/css?family=Advent+Pro:400,600,500,700);

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

*, *:after, *:before {
    box-sizing: content-box;
    outline: none;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    background: linear-gradient(to bottom right, #ff0000, #3F51B5, #ff0000);
}

body, button {
    font-family: 'Roboto', sans-serif;
}

.centralize {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.btn {
    border-radius: 25px;
    width: 200px;
    height: 40px;
    padding: 0;
    border: none;
    color: #fff;
    text-transform: uppercase;
    transition: all .2s cubic-bezier(0.46, 0.03, 0.22, 0.96);
    cursor: pointer;
    font-size: 18px;
    font-weight: 100;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .05) inset
}

.btn.bg1 {
    background: linear-gradient(45deg, #5644B6 50%, #4739A9 50%);
}

.btn:hover {
    transform: scale(1.1);
}

.bg-1, .bg-2 {
    position: absolute;
    left: 0;
    width: 366px;
    margin: auto;
    right: 0;
    height: 50%;
}

.bg-1 .list, .bg-2 .list {
    width: 60px;
    height: 100%;
    background: red;
    display: inline-block;
    margin: 0 5px;
}

.bg-1, .bg-2 {
    perspective: 200px;
}

.bg-1 {
    top: 0;
}

.bg-2 {
    bottom: 0;
}

.bg-1 .list {
    // transform: rotateX(-30deg);
    transform-origin: bottom center;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 35%, rgba(255, 255, 255, .1), rgba(0, 0, 0, 0));
    animation: animation-bg-a 10s ease-in-out infinite; 
}

.bg-2 .list {
    transform: rotateX(30deg);
    transform-origin: top center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0) 35%, rgba(255, 255, 255, .1), rgba(0, 0, 0, 0));
    animation: animation-bg-b 10s ease-in-out infinite; 
}


#container {
    width: 500px;
    height: 500px;
    background-color: rgba(255, 255, 255, .08);
    border-radius: 4px;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .05) inset;
    overflow: hidden;
    background: linear-gradient(to bottom right, #ff0000, #3F51B5, #ff0000);
}

.title {
    font-family: 'Advent Pro', sans-serif;
    text-transform: uppercase;
    font-weight: 100;
    font-size: 50px;
    text-align: center;
    color: #fff;
    margin-top: 100px;
    text-shadow: 1px 1px rgba(0, 0, 0, .1), 0 0 15px #000;
}

.level {
    width: 230px;
    height: 153px;
    top: 80px;
}

.level h5 {
    text-align: center;
    font-weight: 100;
    color: rgba(255, 255, 255, .8);
    margin: 0 0px 10px 0;
}

.level input[type=radio] {
    opacity: 0;
    width: 0;
    margin: 0;
}

.level label, .alternative, .btn-help {
    width: 200px;
    display: block;
    padding: 10px;
    margin: 5px;
    border-radius: 50px;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.25) 50%);
    color: #fff;
    cursor: pointer;
    font-weight: 100;
    text-transform: uppercase;
    transition: all .2s cubic-bezier(0.46, 0.03, 0.22, 0.96);
    text-align: center;
}

.level label.active, .alternative.current, .btn-help {
    background: linear-gradient(45deg, #FFDF07 50%, #FFC107 50%);
    color: #000000;
}

.level label:hover, .alternative:hover, .btn-help:hover {
    transform: scale(1.1);
}

.btn-play {
    top: 320px;
    width: 220px;
}

.current {
    background: blue;
}

/* infos */

#info, .info {
    text-align: center;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
    margin: -15px 30px;
    padding: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 100;
}

.info {
    margin: 0;
    padding: 20px 0;
    position: absolute;
    width: calc(100% - 40px);
    bottom: 20px;
    margin: 0 20px;
}

#info > div, .info > div {
    display: inline-block;
    padding: 0 10px;
}

#info > div span, .info > div span {
    border-radius: 50%;
    color: #FFF;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .1);
    margin-right: 8px;
    width: 25px;
    display: inline-block;
    text-align: center;
    padding: 3px 0px;
}

.info > div span {
    margin: -7px 15px -7px 0;
    font-size: 23px;
    float: left;
    width: 35px;
}

#info > div:nth-child(1) span, .info > div:nth-child(1) span {
    background-color: #226725;
}

#info > div:nth-child(2) span, .info > div:nth-child(2) span {
    background-color: #A53A32;
}

#info > div:nth-child(3) span, .info > div:nth-child(3) span {
    background-color: #344E89;
}

/* calc */

#calc {
    width: 100%;
    height: 100%;
    color: #fff;
    font-weight: 100;
}

.operation {
    text-align: center;
    font-size: 80px;
    letter-spacing: -2px;
    margin: 40px 0 20px;
    text-shadow:
    }

.operation .important {
    font-size: 110px;
}

.buttons {
    text-align: center;
}

.alternative {
    display: inline-block;
    width: 60px !important;
    font-size: 30px;
    background: linear-gradient(45deg, rgb(255, 255, 255) 50%, rgb(226, 226, 226) 50%);
    color: #000;
}

.help {
    text-align: center;
    margin: 10px 0;
}

.btn-help {
    display: inline-block;
    width: 50px;
    border: none;
}

.btn-help:disabled {
    background-image: linear-gradient(45deg, #DCDCDC 50%, #CECECE 50%);
    cursor: no-drop;
}

.btn-help:disabled:hover {
    transform: scale(1);
}

.current-level {
    position: absolute;
    left: 10px;
    top: 10px;
    font-size: 10px;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, .2);
    padding: 2px 8px;
    border-radius: 3px;
}

.message {
    text-align: center;
    font-size: 40px;
}

timer {
    position: absolute;
    right: 10px;
    top: 10px;
}

/* clock */

#clockAnimation.clock {
    width: 20px;
    height: 20px;
    box-shadow: 0 0 0 2px #FFFFFF;
    border-radius: 50%;
    display: inline;
    margin: 1px 10px 0 0;
    float: left;
}

#clockAnimation .pont1, #clockAnimation .pont2 {
    border-radius: 10px;
    background-color: #fff;
    position: absolute;
    top: calc(50% - (2px / 2));
    left: calc(50% - (2px / 2));
}

#clockAnimation .pont1 {
    width: 8px;
    height: 2px;
}

#clockAnimation .pont2 {
  width: 6px;
  height: 2px;
}

#clockAnimation .rotatePont {
    width: 20px;
    height: 20px;
    position: absolute;
}

#clockAnimation .rotatePont.rot1 { animation: rotatePont 1s linear infinite; }
#clockAnimation .rotatePont.rot2 { animation: rotatePont 10s linear infinite; }

@keyframes rotatePont {
  to { transform: rotate(360deg) }
}

@keyframes animation-bg-a {
    0% {
        -webkit-transform: rotateX(-60deg);
           -moz-transform: rotateX(-60deg);
            -ms-transform: rotateX(-60deg);
             -o-transform: rotateX(-60deg);
                transform: rotateX(-60deg);
    }
    50% {
        -webkit-transform: rotateX(0deg);
           -moz-transform: rotateX(0deg);
            -ms-transform: rotateX(0deg);
             -o-transform: rotateX(0deg);
                transform: rotateX(0deg);
    }
    100% {
        -webkit-transform: rotateX(-60deg);
           -moz-transform: rotateX(-60deg);
            -ms-transform: rotateX(-60deg);
             -o-transform: rotateX(-60deg);
                transform: rotateX(-60deg);
    }
}

@keyframes animation-bg-b {
    0% {
        -webkit-transform: rotateX(60deg);
           -moz-transform: rotateX(60deg);
            -ms-transform: rotateX(60deg);
             -o-transform: rotateX(60deg);
                transform: rotateX(60deg);
    }
    50% {
        -webkit-transform: rotateX(0deg);
           -moz-transform: rotateX(0deg);
            -ms-transform: rotateX(0deg);
             -o-transform: rotateX(0deg);
                transform: rotateX(0deg);
    }
    100% {
        -webkit-transform: rotateX(60deg);
           -moz-transform: rotateX(60deg);
            -ms-transform: rotateX(60deg);
             -o-transform: rotateX(60deg);
                transform: rotateX(60deg);
    }
}

.view-on-github {
  position: absolute;
  width: 100%;
  font-size: 11px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  bottom: 20px;
}