@import url(//fonts.googleapis.com/css?family=Roboto:400,600,700);

html {box-sizing: border-box; -webkit-font-smoothing: antialiased; position: relative; font-family: "Roboto", sans-serif; font-size: 16px; color: #000; background: #fff; height: 100%;}
*, *:before, *:after {box-sizing: inherit; position: relative;}

body {margin-left: 0 !important; background: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column; background: #000;
  min-height: 100vh;
  min-height: -webkit-fill-available;
	min-height: -moz-available;
	min-height: stretch;
/*height: calc(var(--vh, 1vh) * 100);*/}

@media screen and (min-width: 960px) {}

a {color: inherit;}
a:hover {color: inherit; text-decoration: none;}

h1 ,h2, h3, h4, button {text-transform: uppercase; font-weight: normal;}

.login {display: flex; flex-direction: column; justify-content: space-around; align-items: center; width: 100%; height: 100%; background: #000;}
.login .logos {display: flex; justify-content: space-around; align-items: center; width: 90%;}
.login .logos img {width: 40%;}

/* MENU */
.navbar-wrapper {width: 100%; background-color: #000;}
.uk-navbar {max-width: 1024px; margin: 0 auto; background-color: transparent; padding: 10px; color: #fff;}
.uk-navbar .logo {height: 54px;}
.uk-navbar .logo-peya {height: 30px;}

.uk-navbar-brand,
.uk-navbar-flip {color: #fff;font-size: 14px;}
@media screen and (max-width: 480px) {
  .uk-navbar-brand img {width: 64px;}
}

.uk-offcanvas-bar {background-color: rgba(0,0,0,0.2); top: 40px; width: 100vw;}
.uk-offcanvas-bar > div {height: 40px; padding: 0 15px; color: #fff;}
.uk-nav-offcanvas>li>a {text-align: center; font-size: 1.2em; color: #fff; padding: 10px 15px; font-weight: bold;}

/* MAIN */
.main {width: 100%; max-width: 630px; height: calc(var(--vh, 1vh) * 100); overflow: auto; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-direction: column; background: #dcdcd0;}
.page {background: #dcdcd0; padding: 10px 5px; width: calc(100% - 8px); display: flex; flex-direction: column; height: calc(100% - 54px);}
.scroll{height:100%;overflow:auto;background:#fff;padding:5px 10px}
.scroll li {display: flex; justify-content: space-between; align-items: center;}
.scroll li > div {flex-grow: 1;}
.scroll li > a {flex-grow: 0;}

.btn-go {display: inline-block; padding: 20px 0 20px 20px;}

.uk-active {font-weight: bold;}
.uk-active a {background: #dcdcd0 !important;}

.uk-tab-bottom>li {background: #eee !important;}
.uk-tab-bottom>li>a {color: #999; padding: 15px;}
.uk-tab-bottom>li.uk-active>a {font-weight: bold;}

.uk-form-row > label {width: 100%;}

hr {border-top: 1px solid #96969f; margin: 10px 0;}

.uk-badge{font-size:13px;font-weight:normal;line-height:1;padding:3px 5px}
/* FORM */
::-webkit-input-placeholder {font-size: 16px; color: #999 !important;}
:-moz-placeholder {font-size: 16px; color: #999 !important;}
::-moz-placeholder {font-size: 16px; color: #999 !important;}
:-ms-input-placeholder {font-size: 16px; color: #999 !important;}

input[type="radio"] {width: 24px; height: 24px; vertical-align: middle;}
input[type="checkbox"] {width: 24px; height: 24px; vertical-align: middle;}

.btn-foto {display: block; min-height: 100px; background-color: #ccc; background-position: 50% 50%; background-repeat: no-repeat; background-image: url(../img/photo.png); overflow: hidden;}
/*.btn-foto:before{content:"\f030";font-family:FontAwesome;font-weight:400;font-style:normal; font-size: 64px; line-height:1;color:#000; position: absolute; top: calc(50% - 32px); left: calc(50% - 32px);}*/
.btn-foto > input {opacity: 0; cursor: pointer; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1}
.btn-foto > canvas {top: 0; left: 0; right: 0; bottom: 0;}

/* ANIMATIONS */
@keyframes pulse {
  0% {box-shadow: 0 0 0 0 rgba(255,255,255,.6);}
  70% {box-shadow: 0 0 0 10px rgba(255,255,255,0);}
  100% {box-shadow: 0 0 0 0 rgba(255,255,255,0);}
}