* {
    font-family: 'Roboto', sans-serif;
    color: #6d6d6d;
}

html {
    height:100%;
}

body {
    background-color: #eee;
    margin: auto;
    font-size: 14px;
    height:100%;
}

@media print,screen and (min-width:40em){
    h1{
        font-size:2rem;
    }
    h2{
        font-size:1.25rem;
    }
    h3{
        font-size:1.25rem;
    }
    h4{
        font-size:1.125rem;
    }
    h5{
        font-size:1rem;
    }
    h6{
        font-size:.83rem;
    }
    .row {
     max-width: 100%;
    }
    .section .section-title {
        font-size: 2rem;
    }
}

.callout.primary {
    background-color: #fff;
    box-shadow: 0px 0px 3px #aaa;
    margin:auto;
}

.callout {
    border:0px;
}

columns {
    margin:auto;
}

.radius {
    border-radius:5px;
}

[type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea  {
    border:0;
    background-color:#eee;
    color:#111;
    padding:1rem;
    font-size:1.25rem;
    height:3.5rem;
    position:relative;
}

@-moz-document url-prefix() {
    [type=email], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], textarea {
        height: auto;
        padding:.5rem;
    }
}

::-moz-placeholder, ::-webkit-input-placeholder, ::-ms-input-placeholder {
   color:#111;
}

#password-strength {
    color: #fff;
    text-align: center;
    font-size: 8px;
    height: 10px;
    background-color: #999;
    margin-top: -16px;
    margin-bottom: 16px;
    width: 0%;
}

.error-message {
    color: #eee;
    text-align: left;
    width: 100%;
    z-index:2;
    position:relative;
}

.overlay {
   position:absolute;
   top:0;
   left:0;
   height:100%;
   width:100%;
   z-index: 1;
   background-color:#333;
   opacity:0.8;
   display:none;
 }

 .pad-bottom-small {
    padding:0 0 0.4rem 0;
 }

 /**
 * Setup keyframes for pulsing animation
 */
 @-webkit-keyframes loadingPlaceholders {
	0% {
		background-color: lightgray;
	}
	50% {
		background-color: #e5e5e5;
	}
	100% {
		background-color: lightgray;
	}
}
@keyframes loadingPlaceholders {
	0% {
		background-color: lightgray;
	}
	50% {
		background-color: #e5e5e5;
	}
	100% {
		background-color: lightgray;
	}
}

.header {
    min-height:40px;
}

.circle {
  border-radius: 50%;
  width:40%;
}

.circle:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.rounded {
    border-radius: 20px;
}
/**
 * Style the placeholder
 */
.placeholder {
  -webkit-animation: loadingPlaceholders 1.5s ease-in infinite;
          animation: loadingPlaceholders 1.5s ease-in infinite;
  background-color: #e5e5e5;
}

.placeholder-header-image {
    width:220px;
    height:40px;
    border-radius:20px;
}

.placeholder-image-section {
    width:600px;
    height:300px;   
}

.placeholder-icon {
    width:22px;
    height:22px;
}

.placeholder-sentence {
	height: 22px;
    margin-bottom: 0.5em;
    max-width:300px;
    margin-right:auto;
    margin-left:auto;
    margin-top:10px;
    border-radius:20px;
}

.placeholder-content {
    height:200px;
}

.placeholder-row-image {
    height:60px;
    width:60px;
}

.page {
    margin: 4.7rem auto 60rem;
    padding-bottom: 5rem;
    justify-content: center;
    width: 100%;
    max-width: 600px;
}