@font-face {
   font-family: 'Roboto Bold';
   src: url('../fonts/roboto-bold.ttf');
}
@font-face {
   font-family: 'Roboto Medium';
   src: url('../fonts/roboto-regular.ttf');
}

html {
   position: relative;
   min-height: 100%;
}

* {
   font-family: 'Roboto Medium', sans-serif;;
   font-size: 1.6rem;
}

body {
   line-height: 1.2;
   margin-bottom: 36px;
}

h2 {
   font-family: "Roboto Bold", sans-serif;
   font-weight: normal;
   font-size: 3.2rem !important;
   margin: 3rem 0;
}

h4 {
   font-family: "Roboto Bold", sans-serif;
   font-size: 1.8rem;
   margin: 0 0 2rem 0;
}

strong, b {
   font-family: 'Roboto Bold', sans-serif;
   font-weight: normal;
}

a, a:hover, a:active, a:focus {
   outline: 0;
}

ul {
   padding-left: 15px;
   margin: 0 0 3rem 0;
}

ol {
   margin: 0 0 3rem 0;
}

li {
   margin-bottom: 1.5rem;
}

p {
   margin: 0 0 3rem 0;
}

label {
   font-weight: normal;
   margin-bottom: 0.4rem;
}

.form-control:focus {
   border-color: #B9ECFA;
}

.navbar {
   background-color: #231F20;
   border: none;
   border-radius: 0;
   min-height: 20px;
   line-height: 1;
   text-align: center;
}

.navbar * {
   font-size: 1.5rem;
}

.navbar-header {
   padding: 1.8rem 4rem;
}

.navbar-header img {
   height: 35px;
}

.navbar-text {
   margin-top: 1.8rem;
}

.navbar-right {
   margin-right: 3.5rem;
   margin-left: 3.5rem;
}

.navbar .nav > li {
   display: inline-block;
}

.navbar * {
   color: #FFFFFF;
}

.navbar .nav {
   text-align: center;
}

.navbar .nav > li > a {
   font-family: 'Roboto Regular', sans-serif;
   padding: 2.5rem 1.5rem 1.8rem 1.5rem;
   font-size: 1.7rem;
   color: #FFFFFF;
}

.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
   background-color: transparent;
   color: #0075ff;
}

.panel-default {
   background-color: #231F20;
   color: #FFFFFF;
   padding: 3rem 6rem;
   min-height: 540px;

   -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
   -moz-animation: fadein 0.5s; /* Firefox < 16 */
   -ms-animation: fadein 0.5s; /* Internet Explorer */
   -o-animation: fadein 0.5s; /* Opera < 12.1 */
   animation: fadein 0.5s;

}

.panel-default .btn {
   padding-left: 2rem ;
   padding-right: 2rem;

   transition: background-color 0.3s cubic-bezier(0.55, 0, 0.1, 1), color 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

.panel-default .btn-link {
   color: #FFFFFF;
}

.panel-default .panel-heading {
   background-color: transparent;
   color: #FFFFFF;
   border-bottom: 0;
   padding:0
}

.btn, .btn:hover, .btn:active, .btn:focus {
   outline: 0 !important;
}

.btn-xs {
   padding: 4px 10px;
}

.btn-primary {
   font-family: 'Roboto Regular', sans-serif;
   font-size: 1.8rem;
   background-color: #0075ff;
   border: none;
}

.btn-default {
   font-family: 'Roboto Regular', sans-serif;
   font-size: 1.8rem;
   background-color: #FFFFFF;
   color: #231F20;
   border: none;
}

.btn-default.btn-xs {
   font-size: 1.4rem;
   font-family: 'Roboto Medium', sans-serif;
}

.btn-default:hover, .btn-default:focus, .btn-default:active {
   background-color: #005ecc;
   color: #ffffff;
   border: none;
}

.btn-default:active:hover {
   background-color: #005ecc;
}

.panel-default input[type="text"],
.panel-default input[type="password"] {
   height: 3.5rem;
   padding: 0.7rem 1rem 0.7rem 0.6rem;
}

input[type="radio"]:hover, input[type="radio"]:focus, input[type="radio"]:checked {
   outline: 0;
}

.list-group {
   border-top: 1px solid #FFFFFF;
   border-bottom: 1px solid #FFFFFF;
}

.list-group-item {
   background-color: transparent;
   padding: 1rem 0;
}

.alert img {
   margin-right: 2rem;
   margin-left: 2rem;
}

/* Footer */

.footer {
   font-size: 1.5rem;
   color: #231F20;
   position: absolute;
   bottom: 0;
   width: 100%;
   /* Set the fixed height of the footer here */
   height: 36px;
   text-align: center;
   margin: 0;
}

/* Fade-in effect */

/* Fade-in effect */

@keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
   from { opacity: 0; }
   to   { opacity: 1; }
}

.btn-primary {
   background-color: #0075ff;
   text-transform: uppercase;
   height: 4rem;
   color: #ffffff !important;
   font-size: 2rem;
   outline: none;
   cursor: pointer;

   transition: background-color 0.3s cubic-bezier(0.55, 0, 0.1, 1), color 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.btn-default {
   height: 4rem;
   font-size: 2rem;
}

.btn-primary::-moz-focus-inner {
   border: 0;
}

.btn-primary:focus,
.btn-primary:hover {
   background-color: #005ecc !important;
}