.arriere {
    background: url('http://placehold.it/1920x1080') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    height:100%;
}

/****************************************************************
 *
 * CSS Percentage Circle
 * Author: Andre Firchow/ Vikas
 *
*****************************************************************/

//transform rotate
@mixin rotate($degrees) {
    -webkit-transform: rotate($degrees);
    -moz-transform: rotate($degrees);
    -ms-transform: rotate($degrees);
    -o-transform: rotate($degrees);
    transform: rotate($degrees);
}

// Compass utilities
// @import "compass";
// VARS
$circle-width: 0.08em;
$circle-width-hover: 0.04em;
// colors default
$primary-color: #12275b;
$secondary-color: #ededed;
$bg-color: #fff;
$primary-color-green: #4db53c;
$primary-color-orange: #dd9d22;
// colors dark skin
$primary-color-dark: #c6ff00;
$secondary-color-dark: #777;
$bg-color-dark: #666;
$primary-color-green-dark: #5fd400;
$primary-color-orange-dark: #e08833;
// CIRCLE
// classes 2 extend
.rect-auto {
    clip: rect(auto, auto, auto, auto);
}

.pie {
    position: absolute;
    border: $circle-width solid $primary-color;
    width: 1 - (2 * $circle-width);
    height: 1 - (2 * $circle-width);
    clip: rect(0em, 0.5em, 1em, 0em);
    border-radius: 50%;
    @include rotate(0deg);
}

.pie-fill {
    @include rotate(180deg);
}

.fill:after {
    content: "";
    position: absolute;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2a2d7e), to(#ee1d7d));
    background-image: -webkit-linear-gradient(#2a2d7e, #ee1d7d);
    background-image: -moz-linear-gradient(#2a2d7e, #ee1d7d);
    background-image: -o-linear-gradient(#2a2d7e, #ee1d7d);
    background-image: linear-gradient(#2a2d7e, #ee1d7d);
    top: -25px;
    bottom: 0;
    width: 30px;
    clip: 0, 0.5em, 1em, 0 !important;
    clip: rect(0em, 0.5em, 1em, 0em);
    -webkit-clip-path: circle(50% at 50% 50%);
    clip-path: circle(50% at 50% 50%);
    width: 0.84em;
    z-index: 998.4;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    right: 0 !important;
    left: -24px !important;
    clip: rect(0em, 0.5em, 1em, 0em);
   
}

.bar:before {
    content: "";
    position: absolute;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2a2d7e), to(#332c7e));
    background-image: -webkit-linear-gradient(#2a2d7e, #332c7e);
    background-image: -moz-linear-gradient(#2a2d7e, #332c7e);
    background-image: -o-linear-gradient(#2a2d7e, #332c7e);
    background-image: linear-gradient(#2a2d7e, #332c7e);
    top: -26px;
    bottom: 0;
    width: 30px;
    clip: 0, 0.5em, 1em, 0 !important;
    clip: rect(0em, 0.5em, 1em, 0em);
    width: 0.84em;
    z-index: 998.4;
    width: 310px;
    height: 310px;
    border-radius: 50%;
    right: 0 !important;
    left: -24px !important;
    clip: rect(0em, 1em, 0.5em, 0em);
    z-index: 999;
    transform: rotate(270deg);
    
}

// .pie:before {
//   left: -3px;
// }
// .pie:after {
//   right: -3px;
// }
// main
.c100 {
    *,
    *:before,
    *:after {
        // @include box-sizing(content-box);
        box-sizing: content-box;
    }
    box-shadow:inset 1px 1.7px 6px 0 rgba(0, 0, 0, 0.06);
    position: relative;
    font-size: 120px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    // float: left;
    margin: 0 0.1em 0.1em 0;
    margin: 0 auto;
    background-color: $secondary-color;
    // center circle to its parent
    &.center {
        float: none;
        margin: 0 auto;
    }
    // bigger size
    &.big {
        font-size: 310px;
      
    }
    // smaller size
    &.small {
        font-size: 80px;
    }
    // centered value inside circle
    >span {
        position: absolute;
        width: 100%;
        z-index: 1;
        left: 0;
        top: -20px;
        width: 320px;
        line-height: 320px;
        font-size: 0.2em;
        color: $secondary-color;
        display: block;
        text-align: center;
        white-space: nowrap;
        // @include transition-property(all);
        // @include transition-duration(0.2s);
        // @include transition-timing-function(ease-out);
        transition-property: all;
        transition-duration: 0.2s;
        transition-timing-function: ease-out;
        background: -webkit-linear-gradient(left, #563490, #ee3656);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        
    }
    // background inside the circle
    &:after {
        position: absolute;
        top: $circle-width;
        left: $circle-width;
        display: block;
        content: " ";
        border-radius: 50%;
        background-color: $bg-color;
        width: 1 - (2 * $circle-width);
        height: 1 - (2 * $circle-width);
        // @include transition-property(all);
        // @include transition-duration(0.2s);
        // @include transition-timing-function(ease-in);
        transition-property: all;
        transition-duration: 0.2s;
        transition-timing-function: ease-out;
    }
    // the slice (mask)
    .slice {
        position: absolute;
        width: 1em;
        height: 1em;
        clip: rect(0em, 1em, 1em, 0.5em);
    }
    // circle to show the status
    .bar {
        @extend .pie;
    }
    // loop to create all needed elements automatically
    @for $j from 51 through 100 {
        &.p#{$j} .slice {
            @extend .rect-auto;
        }
        &.p#{$j} .bar:after {
            @extend .pie-fill;
        }
        &.p#{$j} .fill {
            @extend .pie;
            @extend .pie-fill;
        }
    }
    // loop to rotate all 100 circles
    @for $j from 1 through 100 {
        &.p#{$j} .bar {
            @include rotate((360/100*$j) + deg);
        }
    }
    // hover styles
    &:hover {
        cursor: default;
        >span {
            width: 320px;
            line-height: 320px;
            font-size: 0.3em;
            color: $primary-color;
            
        }
        &:after {
            top: $circle-width-hover;
            left: $circle-width-hover;
            width: 1 - (2 * $circle-width-hover);
            height: 1 - (2 * $circle-width-hover);
        }
    }
    // override colors for the dark skin
    &.dark {
        background-color: $secondary-color-dark;
        .bar,
        .fill {
            border-color: $primary-color-dark !important;
        }
        >span {
            color: $secondary-color-dark;
        }
        &:after {
            background-color: $bg-color-dark;
        }
        &:hover {
            >span {
                color: $primary-color-dark;
            }
        }
    }
    // green skin
    &.green {
        .bar,
        .fill {
            border-color: $primary-color-green !important;
        }
        &:hover {
            >span {
                color: $primary-color-green;
            }
        }
    }
    &.green.dark {
        .bar,
        .fill {
            border-color: $primary-color-green-dark !important;
        }
        &:hover {
            >span {
                color: $primary-color-green-dark;
            }
        }
    }
    // orange skin
    &.orange {
        .bar,
        .fill {
            border-color: $primary-color-orange !important;
        }
        &:hover {
            >span {
                color: $primary-color-orange;
            }
        }
    }
    &.orange.dark {
        .bar,
        .fill {
            border-color: $primary-color-orange-dark !important;
        }
        &:hover {
            >span {
                color: $primary-color-orange-dark;
            }
        }
    }
}

.c100:after {
    top: 0.13em;
    left: 0.13em;
    width: 0.74em;
    height: 0.74em;
}
.remember {
    display: inline-block;
}
.remember input {
    position: relative;
    top: 2px;
}
.fullheight150 {
  height: 100%;
  width: 50vh;
  float: none;
  margin: 0 auto;
}
.fullheight10 {
  height: 100%;
  width: 50vh;
  float: none;
  margin: 0 auto;
}
.mainatm{background:url(img/atmdata_back.png) repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover;display: flex;flex-wrap: wrap;justify-content: center;align-items: center;}