@import url('https://fonts.googleapis.com/css?family=Lato:300|Open+Sans:300,400,700');
* {
box-sizing: border-box;
}

.material-icons, .list-icon {
    text-rendering: optimizeLegibility;
    font-feature-settings: 'liga';
}

.no-select, .training-selection-list > li, .button-list li, .header-logo {
touch-callout: none;
user-select: none;
}

body {
font-smoothing: antialiased;
background-color: #39aad6;
/* Background pattern from subtlepatterns.com */
background-image: url("img/texture.png");
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
}

a, a:focus, a:visited {
text-decoration: none;
color: inherit;
cursor: pointer;
}

a img {
	border: 0; /* ie 10 fix */
}

.login-module-container {
margin: 0;
padding: 0;
width: 100%;
height:100%;
background-color: rgba(0, 0, 0, .55);
position: fixed;
top: 0;
left: 0;
display: none;
z-index: 1000;
}

.login-module-box {
position: relative;
max-width: 350px;
margin: auto;
overflow: hidden;
background-color: #efefef;
border-radius: 4px;
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.65);
font-family: "Lato", "Avenir Next", "Helvetica Neue", Arial, Geneva, sans-serif;
}

.login-module-box.shake, #form-container.shake {
animation: shake 0.3s;
}

@keyframes shake {
  0%, 100% {
    left: 0px;
  }
  20% , 60% {
    left: 15px;
  }
  40% , 80% {
    left: -15px;
  }
}

.login-module-close {
height: 20px;
width: 20px;
float: right;
margin: 15px;
cursor: pointer;
}
.login-module-close:hover {
opacity: 0.5;
}

.login-module-error {
margin: 10px auto 10px auto;
width: 85%;
color: #000;
font-size: 18px;
font-weight: bold;
text-align: center;
}

.login-module-input {
text-align: center;
margin: 10px auto 10px auto;
width: 85%;
height: 50px;
background-color: #fff;
}
.login-module-input:not(.submit) {
border: 1px solid #ccc;
transition: border-color 0.5s;
}
.login-module-input input[type=text], .login-module-input input[type=password] {
background-color: transparent;
border: none;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-size: 22px;
padding: 0 15px 0 15px;
font-family: inherit;
color: #777;
}
.login-module-input input[type=text]:focus, .login-module-input input[type=password]:focus {
outline: none;
}
.login-module-input.submit {
background-color: #de4141;
transition: background-color 0.3s;
}
.login-module-input.submit:hover {
background-color: #a63131;
}
.login-module-input.submit:active {
padding-top: 3px;
}
.login-module-input.submit input[type=submit] {
background-color: transparent;
border: none;
height: 100%;
width: 100%;
font-size: 20px;
color: #fff;
font-weight: normal;
font-family: inherit;
}
.login-module-input.submit input[type=submit]:hover {
color: #fff;
}
input[type=submit]:focus, input[type=submit]:active {
outline: none;
}
.login-module-footer {
font-size: 13px;
width: 100%;
text-align: center;
color: #333;
padding: 25px;
font-weight: bold;
text-transform: uppercase;
font-family: "Lato", "Avenir Next", "Helvetica Neue", Arial, Geneva, sans-serif;
}
.login-module-footer a:hover {
text-decoration: underline;
}

.navbar-container {
height: 40px;
line-height: 40px;
background-color: #0d2732;
font-size: 14px;
}

.navbar-fluid {
max-width: 1024px;
margin: auto;
}

.navbar-content {
padding: 0 15px;
text-transform: uppercase;
color: #fff;
font-weight: bold;
}

.nav, .button-list, .training-selection-list, .pricing-list, .pricing-options-list {
list-style: none;
margin: 0;
padding: 0;
}

.nav li {
display: inline-block;
padding: 0 15px;
}

.nav li.login:hover {
cursor: pointer;
color: #ccc;
}

.nav-right, .pull-right {
float: right;
}

.nav-left, .pull-left {
float: left;
}

.page-title {
height: 100px;
text-align: center;
font-size: 32px;
line-height: 100px;
font-weight: bold;
}

.page-subtitle {
font-size: 20px;
line-height: 20px;
font-weight: 200;
display: block;
padding: 10px 0 0 100px;
}

.header-container {
height: 100px;
/*background-color: #519494;*/
}

.header-fluid {
max-width: 1024px;
margin: auto;
}

.header-logo {
width: 100px;
height: 100px;
}

.header-banner-fluid {
height: 182px;
max-width: 1024px;
margin: 0 auto 50px auto;
background-color: #39aad6;
background-size: auto 100%;
background-repeat: no-repeat;
}
.header-banner-fluid.pricing {
background-image: url("img/pricing.png");
}
.header-banner-fluid.trainings {
background-image: url("img/trainings.png");
}
.header-banner-fluid.riskybusiness {
background-image: url("img/riskybusiness.png");
}
.header-banner-fluid.dashboard {
background-image: url("img/dashboard.png");
}
.header-daycare-name {
text-align: center;
width: 100%;
margin-left: -100px;
font-size: 36px;
font-weight: bold;
color: #EEE;
text-transform: uppercase;
}
.header-subscription-type {
margin-top: 15px;
text-align: center;
width: 100%;
margin-left: -100px;
font-size: 22px;
font-weight: bold;
color: #EEE;
text-transform: capitalize;
}

.main-container-fluid {
max-width: 1024px;
margin: auto;
position: relative;
}

.button-list-container {
width: 100%;
}

.button-list li {
width: 33.333333%;
height: 130px;
display: inline-block;
float: left;
font-size: 22px;
margin-bottom: 15px;
}

.inner-button-list {
display: table;
width: 90%;
height: 100%;
margin: auto;
background-color: #f7a748;
border-radius: 5px;
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
font-weight: 200;
position: relative;
}

.inner-button-list:hover {
background-color: #fd8d00;
}
.inner-button-list:active {
background-color: #fd8d00;
top: 3px;
box-shadow: inset 0px 3px 7px 0px rgba(0, 0, 0, 0.35);
}
.button-list-duedate {
position: absolute;
top: 0;
left: 0;
font-size: 14px;
margin: 5px 0 0 10px;
color: #333;
display: inline-block;
}
.button-list a {
display: table-cell;
vertical-align: middle;
text-align: center;
}

.clear {
clear: both;
height: 100px;
width: 100%;
}

.footer-container-fluid {
max-width: 600px;
margin: 20px auto;
text-align: center;
font-weight: 200;
}

.footer-container-fluid .links {
font-size: 12px;
font-weight: 100;
}
.footer-container-fluid .links a {
margin: 0 20px;
}
.footer-container-fluid .links a:hover {
text-decoration: underline;
}

.grid-list {
padding: 0;
margin: 0;
overflow: hidden;
list-style: none;
}

.grid-list li {
padding: 0 1px 1px 0;
display: inline-block;
width: 20%;
float: left;
position: relative;
min-height: 1px;
}

.grid-list-item-container {
background-color: #555;
text-align: center;
}

.item-icon {
max-width: 100px;
background-color: #BBB;
display: block;
vertical-align: middle;
transform: scale(0.8);
border-radius: 4px;
text-align: center;
margin: auto;
}

.grid-img {
display: block;
max-width: 100%;
min-width: 100%;
height: auto;
vertical-align: middle;
transform: scale(0.8);
}

.item-name {
font-size: 18px;
text-align: center;
line-height: 20px;
color: #FFF;
display: block;
}