/**
 * 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.
 */

body {
  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 16px;
  line-height: 1;
  margin: 0;
  color: #ffffff;
}

.android-header .mdl-menu__container {
  z-index: 50;
  margin: 0 !important;
}

.android-header {
  overflow: visible;
  background-color: white;
}

  .android-header .material-icons {
    color: #767777 !important;
  }

  .android-header .mdl-layout__drawer-button {
    background: transparent;
    color: #767777;
  }

  .android-header .mdl-navigation__link {
    color: #757575;
    font-weight: 700;
    font-size: 14px;
  }

.android-navigation-container {
  /* Simple hack to make the overflow happen to the left instead... */
  direction: rtl;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
  width: 500px;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
      width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.android-navigation {
  /* ... and now make sure the content is actually LTR */
  direction: ltr;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  width: 800px;
}

.header-text {
  font-family: 'Dancing Script', 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 200%;
  color: #757575;
}

.header-text-mobile {
  font-family: 'Dancing Script', 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 200%;
  color: #757575;
  display: none !important;
}

.welcome-section {
  position: relative;
  height: 800px;
  width: auto;
  background-color: #f3f3f3;
  background: url('images/sanfran.jpg') center 45% no-repeat;
  background-size: cover;
}

.welcome-title {
  font-family: 'Dancing Script', 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 700%;
  padding-top: 160px;
  font-weight: 300;
}

.welcome-slogan {
  font-size: 200%;
  padding-top: 24px;
  margin-left: 10%;
  margin-right: 10%;
}

.welcome-sub-slogan {
  font-family: 'Dancing Script', 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 100%;
  padding-top: 24px;
  font-weight: 300;
}

.story-section {
  position: relative;
  height: relative;
  width: auto;
  background-color: #ffffff;
}

.story-title {
  font-family: 'Dancing Script', 'Roboto', 'Helvetica', 'Arial', sans-serif;
  font-size: 200%;
  padding-top: 80px;
  color: #000000
}

.story-text {
  font-size: 100%;
  padding-top: 24px;
  padding-bottom: 80px;
  margin-left: 10%;
  margin-right: 10%;
  color: #000000;
  text-align: center;
}
/*
.story-text:first-letter {
  font-size: 500%;
  font-weight: bold;
  display: block;
  float: left;
  padding-right: 5px;
}*/

.pictures-section {
  position: relative;
  height: relative;
  width: auto;
  background-color: #cccccc;
}

.rsvp-section {
  position: relative;
  height: 1200px;
  width: auto;
  background-color: #f3f3f3;
}

.social-btn {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: transparent;
  cursor: pointer;
  opacity: 0.46;
}

.social-btn__instagram {
  background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_instagram_black_24dp.png');
}
.social-btn__facebook {
  background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_facebook_black_24dp.png');
}
.social-btn__gplus {
  background-image: url('https://www.gstatic.com/images/icons/material/system/2x/post_gplus_black_24dp.png');
}

/**** Mobile layout ****/
@media (max-width: 900px) {
  .android-navigation-container {
    display: none;
  }

  .header-text {
    display: none !important;
  }

  .header-text-mobile {
    font-family: 'Dancing Script', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 200%;
    color: #757575;
    display: block !important;
    position: absolute;
    left: 50%;
    top: 12px;
    transform: translate(-50%);
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .welcome-section {
    position: relative;
    height: 1200;
    width: auto;
    background-color: #f3f3f3;
    background: url('images/sanfran-mobile.jpg') center 50% no-repeat;
    background-size: cover;
  }
  
  .welcome-title {
    font-family: 'Dancing Script', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 700%;
    padding-top: 24px;
    font-weight: 300;
  }
  
  .welcome-slogan {
    font-size: 200%;
    padding-top: 250px;
    margin-left: 10%;
    margin-right: 10%;
  }
  
  .welcome-sub-slogan {
    font-family: 'Dancing Script', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    font-size: 100%;
    padding-top: 24px;
    padding-bottom: 10px;
    font-weight: 300;
  }



}