/* Sections of Layout
-------------------------------------- */
/* Layout is stacked vertically by default (for narrower viewports), so give some breathing room between the sections. */
.container>* {
  margin-bottom: 10px;
}
/* Now let's apply grid for wider viewports. */
@media screen and (min-width: 40em) {
  .container>* {
    margin-bottom: 0;
  }
  /* Alternative Approach
  -------------------------------------- */
  /* There is more than one way to achieve the same result with Grid. The commented-out code below, which would replace all 
     of the code above, shows how to use Grid's template areas feature. It's pretty ingenious: in the grid-template-areas property, 
     you show where the various grid areas should appear on the grid.
  For example, I've said below that:
    * the head grid-area should span all three columns of row one;
    * the side1 grid-area should occupy column one of row two;
    * the main grid-area should occupy column two of row two;
    * the side2 grid-area should occupy column three of row two;
    * and the foot grid-area should span all three columns of row three.
  Below that part I've assigned a grid-area to the classes used on the layout's sections. The grid-areas assigned here are the ones 
  used in grid-template-areas. For example, I set .header { grid-area: head; }. If I did .header { grid-area: page-header; } instead, 
  I would need to change "head head head" in grid-template-areas to "page-header page-header page-header". (Please note that only one 
  space between grid areas is required to indicate columns. You do not have to line up the columns in grid-template-areas as I have below.)
  All told, when combining grid-template-areas with matching grid-area assignments, you can see what the layout will be just by glancing 
  at the grid-template-areas value!
  */
  .container {
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    column-gap: 5px;
    row-gap: 20px;
    grid-gap: 1px 20px 15px;
    grid-template-areas:
      "head  head  head"
      "side1 main  side2"
      "left bottom  right"
      "foot foot  foot";
  }
  .header {
    grid-area: head;
  }
  .sidebar-left {
    grid-area: side1;
  }
  .entry {
    border: 1px solid grey;
    border-radius: 5px;
    box-shadow: 10px 10px 10px white inset, 10px 10px 10px grey;
    text-align: center;
  }
  .content {
    grid-area: main;
  }
  .sidebar-right {
    grid-area: side2;
    text-align: center;
  }
  .bottom {
    grid-area: bottom;
  }
  .footer {
    grid-area: foot;
  }
  /* Generic styles for demo purposes
  -------------------------------------- */
  .container {
    font-family: Helvetica, Arial, sans-serif;
    margin-left: auto;
    margin-right: auto;
    max-width: 75rem;
  }
  .container>* {
    background-color: transparent;
    padding: 1em;
  }
  /* Typically, you wouldn't specify a height or min-height on this, instead allowing your 
  actual content (i.e., text, images, etc.)   to dictate the height of your content area. 
  But since this example has very minimal content, I've set a min-height to mimic a taller 
  content area. */
  .content {
    min-height: 650px;
  }
  .nav {
    min-height: 150px;
  }
  h1.entry-title {
    text-align: center;
  }
  /* calligraffitti-regular - latin */
  @font-face {
    font-family: 'Calligraffitti';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/calligraffitti-v17-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local(''),
      url('../fonts/calligraffitti-v17-latin-regular.eot?#iefix') format('embedded-opentype'),
      /* IE6-IE8 */
      url('../fonts/calligraffitti-v17-latin-regular.woff2') format('woff2'),
      /* Super Modern Browsers */
      url('../fonts/calligraffitti-v17-latin-regular.woff') format('woff'),
      /* Modern Browsers */
      url('../fonts/calligraffitti-v17-latin-regular.ttf') format('truetype'),
      /* Safari, Android, iOS */
      url('../fonts/calligraffitti-v17-latin-regular.svg#Calligraffitti') format('svg');
    /* Legacy iOS */
  }
  .fill {
    object-fit: fill;
  }
  
  .contain {
    object-fit: contain;
  }
  
  .cover {
    object-fit: cover;
  }
  
  .none {
    object-fit: none;
  }
  
  .scale-down {
    object-fit: scale-down;
  }
}
#contact-form {
  background-color: #F2F7F9;
  width: 465px;
  padding: 20px;
  margin: 50px auto;
  border: 6px solid #8FB5C1;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  position: relative;
}
#contact-form h1 {
  font-size: 42px;
}
#contact-form h2 {
  margin-bottom: 15px;
  font-style: italic;
  font-weight: normal;
}
#contact-form input,
#contact-form select,
#contact-form textarea,
#contact-form label {
  font-size: 15px;
  margin-bottom: 2px;
}
#contact-form input,
#contact-form select,
#contact-form textarea {
  width: 450px;
  border: 1px solid #CEE1E8;
  margin-bottom: 20px;
  padding: 4px;
}
#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
  border: 1px solid #AFCDD8;
  background-color: #EBF2F4;
}
#contact-form textarea {
  height: 150px;
  resize: none;
}
#contact-form label {
  display: block;
}
#contact-form .required {
  font-weight: bold;
  color: #F00;
}
#contact-form #submit-button {
  width: 100px;
  background-color: #333;
  color: #FFF;
  border: none;
  display: block;
  float: right;
  margin-bottom: 0px;
  margin-right: 6px;
  background-color: #8FB5C1;
  -moz-border-radius: 8px;
}
#contact-form #submit-button:hover {
  background-color: #A6CFDD;
}
#contact-form #submit-button:active {
  position: relative;
  top: 1px;
}
#contact-form #loading {
  width: 32px;
  height: 32px;
  background-image: url(../img/loading.gif);
  display: block;
  position: absolute;
  right: 130px;
  bottom: 16px;
  display: none;
}
#errors {
  border: solid 1px #E58E8E;
  padding: 10px;
  margin: 25px 0px;
  display: block;
  width: 437px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background: #FFE6E6 url(../img/cancel_48.png) no-repeat 405px center;
  display: none;
}
#errors li {
  padding: 2px;
  list-style: none;
}
#errors li:before {
  content: ' - ';
}
#errors #info {
  font-weight: bold;
}
#errors #info:before {
  content: '';
}
#success {
  border: solid 1px #83D186;
  padding: 25px 10px;
  margin: 25px 0px;
  display: block;
  width: 437px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background: #D3EDD3 url(../img/accepted_48.png) no-repeat 405px center;
  font-weight: bold;
  display: none;
}
#errors.visible,
#success.visible {
  display: block;
}
#req-field-desc {
  font-style: italic;
}
/* Remove box shadow firefox, chrome and opera put around required fields. It looks rubbish. */
input:required,
textarea:required {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
/* Normalize placeholder styles */
/* chrome, safari */
::-webkit-input-placeholder {
  color: #CCC;
  font-style: italic;
}
/* mozilla */
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #CCC;
  font-style: italic;
}
/* ie (faux placeholder) */
input.placeholder-text,
textarea.placeholder-text {
  color: #CCC;
  font-style: italic;
}