@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

html, body, div, span, applet, object, iframe,
         h1, h2, h3, h4, h5, h6, p, blockquote, pre,
         a, abbr, acronym, address, big, cite, code,
         del, dfn, em, img, ins, kbd, q, s, samp,
         small, strike, strong, sub, sup, tt, var,
         b, u, i, center,
         dl, dt, dd, ol, ul, li,
         fieldset, form, label, legend,
         table, caption, tbody, tfoot, thead, tr, th, td,
         article, aside, canvas, details, embed, 
         figure, figcaption, footer, header, hgroup, 
         menu, nav, output, ruby, section, summary,
         time, mark, audio, video {
         margin: 0;
         padding: 0;
         border: 0;
         font-size: 100%;
         font: inherit;
         vertical-align: baseline;
         }
         
         body {
         line-height: 1;
         margin: 0px;
         background-color: #000;
         background-image: linear-gradient(to bottom, #000d53, rgba(0, 0, 0, 0) 60vw); //url("../img/back1.png");
         background-repeat: repeat-x;
         /*background-size: 100vw;*/
         }
         #maindiv {
         margin: 2px;
         }
 
         p {
         z-index: 2;
         position: relative;
         }

         p.error{
             text-align: center;
             z-index: 2;
             position: relative;
             color: red;
         }
         
         #logo{
            position: relative;
            margin-top: 16vw;
            margin-bottom: 12vw;
            margin-left: auto;
            margin-right: auto;
            width: 70vw;
            display: block;
         }
         
         #codetext {
         position: relative;
         font-family: 'Roboto', monospace;
         font-size: 5vw;
         text-align: center;
         color: #EEE;
         margin-top: 3vw;
         margin-bottom: 3vw;
         }
         
         #instructions {
         position: relative;
         font-family: 'Roboto';
         font-size: 7vw;
         text-align: center;
         margin-left: 1vw;
         margin-right: 1vw;
         color: #EEE;
         margin-top: 6vw;
         margin-bottom: 6vw;
         }
         
         #passinput {
         display:block;
         position: relative;
         width: 80vw;
         height: 18vw;
         margin: auto;
         margin-top: 5vw;
         font-size: 10vw;
         font-family: 'Roboto', monospace;
         text-transform: uppercase;
         font-weight: 700;
         text-align: center;
         letter-spacing: 1vw;
         border-radius: 2vw;
         }
         ::-webkit-input-placeholder { /* WebKit browsers */
         text-transform: none;
         font-weight: 400;
         letter-spacing: -0.5vw;
         font-size: 8vw;
         }
         :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
         text-transform: none;
         font-weight: 400;
         letter-spacing: -0.5vw;
         font-size: 8vw;
         }
         ::-moz-placeholder { /* Mozilla Firefox 19+ */
         text-transform: none;
         font-weight: 400;
         letter-spacing: -0.5vw;
         font-size: 8vw;
         }
         :-ms-input-placeholder { /* Internet Explorer 10+ */
         text-transform: none;
         font-weight: 400;
         letter-spacing: -0.5vw;
         font-size: 8vw;
         }
         
         /*Candidate List styles*/
                 
         label {
         position: relative;
         overflow: visible;
         margin-left: auto;
         margin-right: auto;
         margin-bottom: 4vw;
         margin-top: 2vw;
         display: block;
         background-color: #bb0d0d;
         padding-top: 4vw;
         padding-bottom: 0vw;
         text-align: center;
       /*text-*/color: #EEE;
         font-size: 8vw;
         font-family: 'Anton','Helvetica', sans-serif; 
         text-transform: uppercase;
         font-weight: normal; 
         font-style: normal; 
         text-shadow: 0.5vw 0.5vw 1vw #000;
         height: 12.2vw;
         width: 98vw;
         border-radius: 1vw;
         letter-spacing: 0.2vw;
         }
         
         label > div {
         height: 100%;
         width: 100%;
         top: 0;
         overflow: hidden;
         position: absolute;
         }
         
         @-webkit-keyframes rotate {
                    from {
                        -webkit-transform: rotate(0deg);
                    }
                    to { 
                        -webkit-transform: rotate(360deg);
                    }
                }
         
                label > div > svg {
                    visibility: hidden;
                    opacity: 0.9;
                    display: block;
                    position: absolute;
                    top: -2vw;
                    left: -2vw;
                    z-index: 1;
                }
                
                input[type="checkbox"] {
                        display:none;   
                    }
                
                input[type="checkbox"]:checked + label {
                       /*background-color: #0aab34;*/
                       /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#002400+0,008a00+50,52b152+100 */
                        background: rgb(0,36,0); /* Old browsers */
                        background: -moz-linear-gradient(left,  rgba(0,36,0,1) 0%, rgba(0,138,0,1) 50%, rgba(82,177,82,1) 100%); /* FF3.6-15 */
                        background: -webkit-linear-gradient(left,  rgba(0,36,0,1) 0%,rgba(0,138,0,1) 50%,rgba(82,177,82,1) 100%); /* Chrome10-25,Safari5.1-6 */
                        background: linear-gradient(to right,  rgba(0,36,0,1) 0%,rgba(0,138,0,1) 50%,rgba(82,177,82,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002400', endColorstr='#52b152',GradientType=1 ); /* IE6-9 */
                        
                    }   
                
                input[type="checkbox"]:checked + label > div > svg {
                       visibility: visible;
                       -webkit-transform-origin: 50% 50% 0px;
                    -webkit-animation-name: rotate; 
                    -webkit-animation-duration: 120s; 
                    -webkit-animation-iteration-count: infinite;
                    -webkit-animation-timing-function: linear;
                    }   
         
         /**************************/
         
         
         input[type="submit"] {
         display: block;
         position: relative;
         margin: auto;
         font-size: 8vw;
         font-family: "Roboto", Arial, "Lucida Grande", sans-serif; 
         font-weight: normal;
         font-style: normal; 
         border-radius: 200vw;
         border: 0;
         color: #EEE;
         top: 7vw;
         padding-bottom: 1.1vw;
         padding-left: 8vw;
         padding-right: 8vw;
         // text-shadow: 0vw 0.5vw 1vw #000;
         /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b21d+0,006e2e+100 */
         background: #00b21d; /* Old browsers */
         background: -moz-linear-gradient(top, #00b21d 0%, #006e2e 100%); /* FF3.6-15 */
         background: -webkit-linear-gradient(top, #00b21d 0%,#006e2e 100%); /* Chrome10-25,Safari5.1-6 */
         background: linear-gradient(to bottom, #00b21d 0%,#006e2e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b21d', endColorstr='#006e2e',GradientType=0 ); /* IE6-9 */
         
         // transition: background 1s ease-out;  
         }
         
         #voteform {
         
    width: 100vw;
    margin-left: auto;
    margin-right: auto;

         }
         
         
         form:invalid > div > input[type="submit"] { /*Grey out the submit button*/
        color: #BBB;
         /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e5e5e5+0,666666+100 */
        background: rgb(102,102,102); /* Old browsers */
        // background: -moz-linear-gradient(top,  rgba(229,229,229,1) 0%, rgba(102,102,102,1) 100%); /* FF3.6-15 */
        // background: -webkit-linear-gradient(top,  rgba(229,229,229,1) 0%,rgba(102,102,102,1) 100%); /* Chrome10-25,Safari5.1-6 */
        //background: linear-gradient(to bottom,  rgba(229,229,229,1) 0%,rgba(102,102,102,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        //filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#666666',GradientType=0 ); /* IE6-9 */
         }
         
         #spacer {
         position: relative;
         height: 30vw;
         }
         #divbot {
         z-index: 3;
         position: fixed;
         width: 100%;
         bottom: 0;
         left: 0;
         height: 23vw;
         /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+20,1+100 */
         background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
         background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
         background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 20%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
         }