/**
 * Copyright 2015 Google Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.demo-ribbon {
  width: 100%;
  height: 40vh;
  background-image: url('../images/nikken.jpg');
  background-color: #3F51B5
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}

.demo-main {
  margin-top: -35vh;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
}

.demo-header .mdl-layout__header-row {
  padding-left: 40px;
}

.demo-container {
  max-width: 1600px;
  width: calc(100% - 16px);
  margin: 0 auto;
  margin-top: 100px;
}

.demo-content {
  border-radius: 2px;
  padding: 20px 60px;
  margin-bottom: 80px;
}

.demo-layout.is-small-screen .demo-content {
  padding: 40px 28px;
}

.demo-content h3 {
  margin-top: 48px;
}

.demo-footer {
  padding-left: 40px;
}

.demo-footer .mdl-mini-footer--link-list a {
  font-size: 13px;
}

.mdl-button--file input {
  cursor: pointer;
  height: 100%;
  right: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 300px;
  z-index: 4;
}
.mdl-textfield--file .mdl-textfield__input {
  box-sizing: border-box;
  width: calc(100% - 32px);
}
.mdl-textfield--file .mdl-button--file {
  right: 0;
}

.alert {
  min-width: 150px;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 3px;
}
.alert-success {
  background-color: #91cf91;
  border-color: #80c780;
  color: #3d8b3d;
}
.alert-warning {
  background-color: #ebc063;
  border-color: #e8b64c;
  color: #a07415;
}
.alert-danger {
  background-color: #e27c79;
  border-color: #dd6864;
  color: #9f2723;
}
.alert p {
  padding: 0;
  margin: 0;
}
.alert i {
  padding-right: 5px;
  vertical-align: middle;
  font-size: 24px;
}
.alert .close-alert {
  -webkit-appearance: none;
  position: relative;
  float: right;
  padding: 0;
  border: 0;
  cursor: pointer;
  color: inherit;
  background: 0 0;
  font-size: 21px;
  line-height: 1;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  filter: alpha(opacity=40);
  opacity: .4;
}
.alert .close-alert:hover {
  filter: alpha(opacity=70);
  opacity: .7;
}

.shadow-1, .alert {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.shadow-2, .alert:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}