﻿* {
   box-sizing: border-box;
}

body {
   background-color: #4b3a26;
   font-family: Verdana, Geneva, sans-serif;
}

header {
   width: 90%;
   max-width: 849px;
   height: 175px;
   margin: auto;
   background-image: url("images/myfav_01.jpg");
   background-size: cover;
   background-repeat: no-repeat;
   color: #FFF5A5;
   word-spacing: 5px;
   position: relative;
}

.desktop_nav {
   position: absolute;
   bottom: 0px;
   left: 10%;
}

.mobile_nav {
   display: none;
}

header a {
   color: #FFF5A5;
   text-decoration: none;
}

header a:hover {
   color: #FFFFFF;
}

.page_body {
   width: 90%;
   max-width: 849px;
   margin: auto;
   display: table;
}

.body_table {
   display: table-row;
}

.bg_left {
   width: 57px;
   display: table-cell;
   background-image: url('images/myfav_02.jpg');
   background-size: cover;
   background-position: left;
}

.content {
   display: table-cell;
   background-color: #000000;
}

.letter {
   border: 1px solid black;
   background: url('images/envelope_bg.png'),
               linear-gradient(0.25turn, black, white, black);
   /*background-repeat: repeat-x;*/
   background-size: contain;
   padding: 15px;
   color: #000000;
   text-align: center;
}

.letter span {
   background-color: rgba(255, 255, 255, 0.6);
   padding: 10px 20px 10px 20px;
   font-size: 1.5em;
   font-weight: bold;
   line-height: 2em;
}

.banner {
   border: 1px solid black;
}

.mission_statement {
   border: 1px solid black;
   background-image: url('WEB/images/benback1.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   padding: 15px;
   color: #FFFFFF;
   text-align: center;
}

.flex_content {
   height: 100%;
   display: flex;
}

.flex_column_1 {
   /*flex: 60%;*/
}

.workers_image {
   max-width: 402px;
   border: 1px solid black;
}

.flex_column_2 {
   display: flex;
   flex-direction: column;
   border: 1px solid black;
}

.jesus_quote {
   flex: 1;
   background-image: url('WEB/images/Jesus-Background1.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   padding: 15px;
}

.scripture {
   flex: 1;
   background-image: url('WEB/images/christback1.jpg');
   background-repeat: no-repeat;
   background-size: cover;
   padding: 15px;
	color: #FFFFFF;
	text-align: center;
}

.bg_right {
   width: 54px;
   display: table-cell;
   background-image: url('images/myfav_04.jpg');
   background-size: cover;
   background-position: right;
}

footer {
   width: 90%;
   max-width: 849px;
   height: 156px;
   margin: auto;
   background-image: url('images/myfav_10.jpg');
   background-repeat: no-repeat;
}

@media only screen and (max-width: 900px) {
   header {
      width: 100%;
      height: auto;
      padding-top: calc(21.61%);
      border: 1px solid black;
      background-color: #000000;
      background-size: 100vw;
      background-position: top center;
   }
   
   header b {
      display: inline-block;
   }
   
   .desktop_nav {
      display: none;
   }
   
   .mobile_nav {
      display: block;
      position: relative;
      padding: 14px 14px;
   }
   
   .mobile_nav #mobile_links {
      display: none;
      list-style-type: none;
      line-height: 1.6;
   }
   
   .burger_icon {
      position: absolute;
      right: 14px;
      top: 14px;
   }
   
   .page_body {
      width: 100%;
   }
      
   .bg_left {
      display: none;
   }
   
   .content {
      background-color: #4b3a26;
   }

   .video_memorial iframe {
      max-width: 100%;
   }
   
   .banner {
      border: 0px solid black;
      max-width: 100%;
   }
   
   .banner img {
      display: block;
      width: 100%;
      border: 1px solid black;
   }
   
   .mission_statement {
      width: 100%;
      margin: auto;
      padding: 25px;
   }
   
   .flex_content {
      flex-direction: column;
   }
      
   .workers_image {
      max-width: none;
      border: 0px solid black;
      background-color: #000000;
   }
   
   .workers_image img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width: 95.7vw;
      border: 1px solid black;
   }
      
   .jesus_quote {
      width: 100%;
      margin: auto;
      padding: 25px;
   }
   
   .scripture {
      width: 100%;
      margin: auto;
      padding: 25px;
   }
   
   .bg_right {
      display: none;
   }
   
   footer {
      width: 100%;
      height: 30px;
      margin: 0;
      border: 1px solid black;
      background-size: auto;
      background-position: center center;
   }
}