/* * * * * *
* Last Updated: 30/09/2020 - 12:41
* Web URL: https://www.praiseinthepark.co.uk
* Authored by: @jg_DigitalMedia
* * * * * */
/**
@extends - Utilities Partial
**/
.gatherings h2, .recent h2 {
  font-size: 15pt;
  font-family: Rockwell;
  margin: 15px 0; }
  @media (max-width: 980px) {
    .gatherings h2, .recent h2 {
      height: auto;
      font-size: 14pt; } }

.gatherings, .recent {
  padding: 5px; }

.content_main .covid, .inclusion,
.report {
  margin-top: 10px;
  font-style: italic;
  font-size: 11pt;
  padding: 15px;
  border-radius: 15px;
  background-color: #dda0dd;
  color: #5c035c;
  margin-bottom: 20px; }

/*header.scss*/
* {
  padding: 0;
  margin: 0; }

body {
  background: #e2c0e8;
  /*font: $main-font;*/ }
  body .main_header {
    background: #48064f;
    color: #b681e4;
    display: block;
    width: 92%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr); }
    body .main_header div.logo_container {
      padding: 10px; }
      body .main_header div.logo_container img#logo {
        width: 35%;
        vertical-align: top; }
        @media (max-width: 980px) {
          body .main_header div.logo_container img#logo {
            width: 60%; } }
        @media (max-width: 680px) {
          body .main_header div.logo_container img#logo {
            width: 65%; } }
      body .main_header div.logo_container p#praise-in-the-park-text {
        font-family: Rockwell;
        width: 35%;
        text-align: center;
        color: #e3d0ae;
        font-size: 12pt;
        text-transform: uppercase;
        webkit-text-stroke: 1px black;
        text-shadow: 2px 2px 0 #3a3737; }
        @media (max-width: 980px) {
          body .main_header div.logo_container p#praise-in-the-park-text {
            width: 60%; } }
        @media (max-width: 680px) {
          body .main_header div.logo_container p#praise-in-the-park-text {
            width: 65%;
            font-size: 2vw; } }
    body .main_header div.title_container {
      width: 100%;
      display: none;
      display: block;
      text-align: center;
      position: relative;
      top: 10px; }
      body .main_header div.title_container h1 {
        text-align: center;
        font-family: Rockwell;
        font-size: 26pt;
        color: #b681e4; }
        @media (max-width: 980px) {
          body .main_header div.title_container h1 {
            font-size: 22pt; } }
        @media (max-width: 680px) {
          body .main_header div.title_container h1 {
            font-size: 14pt; } }
    body .main_header #social {
      display: border solid 1px;
      text-align: right;
      padding-right: 5px;
      position: relative;
      top: 10px; }
      body .main_header #social li {
        display: inline;
        margin-left: 15px; }
        @media (max-width: 680px) {
          body .main_header #social li {
            margin-left: 8px; } }
        body .main_header #social li a {
          width: 30px;
          text-decoration: none; }
          body .main_header #social li a > img {
            width: 35px;
            transition: transform .1s; }
            body .main_header #social li a > img:hover {
              transform: scale(1.1), rotate(360deg); }
            @media (max-width: 680px) {
              body .main_header #social li a > img {
                width: 14%; } }

/*common.scss*/
.content-block {
  margin: 0 auto;
  width: 92%;
  display: flex;
  flex-direction: row;
  color: black; }
  @media (max-width: 980px) {
    .content-block {
      display: grid;
      grid-template-areas: "praise praise" "recent services";
      width: 80%; } }
  @media (max-width: 680px) {
    .content-block {
      flex-direction: column;
      display: flex;
      position: relative; } }

.content-two {
  display: block;
  margin: 10px auto;
  width: 92%;
  font-family: Rockwell;
  color: #410453;
  text-align: center;
  margin: 15px; }
  @media (max-width: 680px) {
    .content-two {
      margin-top: 15px;
      position: relative;
      top: 20px; } }
  .content-two h2 {
    font-size: 30px;
    margin: 15px 15px; }
    @media (max-width: 680px) {
      .content-two h2 {
        margin-top: 10px; } }
  .content-two article {
    display: inline-block;
    width: 28%;
    line-height: 1.9;
    vertical-align: top;
    text-align: left;
    margin: 0px 15px; }
    @media (max-width: 980px) {
      .content-two article {
        display: block;
        margin: 0 auto;
        /* line-height: 1.4; */
        width: 90%;
        margin-bottom: 20px; } }

.content-three {
  color: #410453; }
  .content-three h2 {
    font-size: 30pt; }
  .content-three article {
    width: 40%; }

/*nav.scss*/
.nav_container {
  display: block;
  margin: 15px auto;
  position: relative;
  bottom: 95px;
  font-family: Rockwell; }
  @media (max-width: 980px) {
    .nav_container {
      bottom: 60px; } }
  @media (max-width: 680px) {
    .nav_container {
      color: green;
      bottom: 0px; } }
  .nav_container ul.main_navigation {
    text-align: center; }
    .nav_container ul.main_navigation li {
      display: inline-block;
      margin-left: 1%;
      text-decoration: none; }
      .nav_container ul.main_navigation li a {
        color: #e2c0e8;
        color: #e2c0e8;
        text-decoration: none; }
        @media (max-width: 680px) {
          .nav_container ul.main_navigation li a {
            color: #176503; } }
        .nav_container ul.main_navigation li a:hover {
          border-bottom: #e2c0e8 3px solid; }
          @media (max-width: 680px) {
            .nav_container ul.main_navigation li a:hover {
              border-bottom: #176503 3px solid; } }
        .nav_container ul.main_navigation li a#selected {
          border-bottom: #e2c0e8 3px solid; }
          @media (max-width: 680px) {
            .nav_container ul.main_navigation li a#selected {
              border-bottom: #176503 3px solid; } }

/*Main Section*/
.content_main {
  background: #b681e4;
  font-family: Rockwell;
  color: black;
  border: solid 1px black;
  display: block;
  margin: 0 30px;
  padding: 0 70px;
  /*width: 75%;*/
  width: 100%;
  position: relative;
  bottom: 100px; }
  @media (max-width: 980px) {
    .content_main {
      padding: 0 30px;
      bottom: 70px;
      margin: 0 auto;
      width: 90%;
      bottom: 0px;
      display: inline-block;
      grid-area: praise;
      order: 1; } }
  @media (max-width: 680px) {
    .content_main {
      bottom: 0px;
      order: -1;
      display: block;
      margin-bottom: 10px; } }
  .content_main h2#page_title {
    color: #410453;
    font-size: 22pt;
    margin: 20px 0;
    text-align: center; }
  .content_main h3 {
    line-height: 2; }
  .content_main p {
    line-height: 2;
    margin-top: 20pt;
    font-size: 14pt; }
    @media (max-width: 980px) {
      .content_main p {
        width: 95%; } }
  .content_main .praise_photo_container {
    width: 100%;
    position: relative;
    text-align: center; }
    .content_main .praise_photo_container #praise_photo {
      width: 30%; }

/*Gatherings Section*/
.gatherings {
  background: #b681e4;
  font-family: Rockwell;
  color: black;
  border: solid 1px black;
  display: block;
  width: 33%;
  height: 300px;
  height: 100%; }
  @media (max-width: 980px) {
    .gatherings {
      order: 2;
      width: 75%;
      grid-area: services;
      position: relative;
      left: 65px; } }
  @media (max-width: 680px) {
    .gatherings {
      display: inline-block;
      width: 85%;
      margin: 0 auto;
      position: relative;
      left: 0;
      top: 15px; } }
  .gatherings h3 {
    font-size: 11px;
    line-height: 3; }
  .gatherings #goto_facebook,
  .gatherings #gatherings_carols,
  .gatherings #gatherings_light {
    color: #0b053f; }
    .gatherings #goto_facebook:hover,
    .gatherings #gatherings_carols:hover,
    .gatherings #gatherings_light:hover {
      text-decoration: none; }
  .gatherings .gatherings_list {
    height: 100px;
    list-style: none;
    display: inline-block; }
    .gatherings .gatherings_list li {
      list-style: none;
      margin-top: 20px;
      line-height: 1.6; }

/*Recent Photos*/
.recent {
  background: #b681e4;
  font-family: Rockwell;
  color: black;
  border: solid 1px black;
  display: block;
  width: 33%;
  min-height: 300px;
  height: 100%; }
  @media (max-width: 980px) {
    .recent {
      grid-area: recent;
      width: 100%; } }
  @media (max-width: 680px) {
    .recent {
      display: inline-block;
      width: 85%;
      margin: 0 auto; } }
  .recent .recent_photos {
    display: block;
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 90%; }
    .recent .recent_photos li {
      display: block; }
      @media (max-width: 580px) {
        .recent .recent_photos li {
          width: 90%;
          display: block;
          margin: 10px auto; } }
      .recent .recent_photos li img {
        width: 80%; }

.home {
  /*background: white; */ }

/*Photos Page*/
.photos {
  width: 100%;
  text-align: left;
  display: block;
  margin: 0 auto;
  /* Modal Content/Box */
  /* The Close Button */ }
  .photos li {
    display: inline-block;
    vertical-align: top;
    margin: 8px;
    width: 45%; }
    @media (max-width: 580px) {
      .photos li {
        width: 90%;
        display: block;
        margin: 10px auto; } }
    .photos li img {
      /* width: 49%; */
      width: 80%; }
  .photos #photo_gallery,
  .photos #lightbox_gallery {
    width: 50%;
    margin: 0 auto;
    display: block; }
    @media (max-width: 980px) {
      .photos #photo_gallery,
      .photos #lightbox_gallery {
        width: 70%; } }
  .photos .modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: black;
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */ }
  .photos .modal-content {
    margin: 15% auto;
    /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    /* Could be more or less, depending on screen size */
    width: 45%; }
  @media (min-width: 380px) {
    .photos .modal-content {
      width: 650px; } }
  @media (max-width: 760px) {
    .photos .modal-content {
      width: 90%;
      width: 75%; } }
  .photos .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold; }
  .photos .close:hover, .photos .close:focus {
    color: #ddd1d1;
    text-decoration: none;
    cursor: pointer; }

.lb-caption,
.lb-number {
  font-family: arial;
  font-family: Roboto;
  font-weight: normal; }

#contact_email {
  color: red; }
  #contact_email:hover {
    text-decoration: none; }

#contact_table {
  width: 100%;
  display: block;
  margin: 0 auto; }
  #contact_table tbody {
    vertical-align: top; }
  #contact_table tr {
    height: 40px; }
    #contact_table tr a {
      color: red; }
      #contact_table tr a:hover {
        text-decoration: none; }
  #contact_table tr:nth-child(2n),
  #contact_table a:nth-child(2n) {
    background: #e2c0e8; }
  #contact_table th:nth-child(2) {
    /* width: 200px; */
    width: 40%; }
  #contact_table .contact-photo {
    width: 100%; }
  #contact_table td {
    padding: 5px; }
    #contact_table td p {
      vertical-align: top; }
      @media (max-width: 680px) {
        #contact_table td p {
          font-size: 12px;
          line-height: 2; } }

h3 ~ aside {
  display: flex;
  flex-direction: row; }
  @media (max-width: 680px) {
    h3 ~ aside {
      flex-direction: column; } }
  h3 ~ aside p {
    vertical-align: top;
    padding: 0 10px; }

aside img {
  width: 80%; }
  @media (max-width: 680px) {
    aside img {
      display: block;
      margin: 0 auto; } }

h3 {
  margin-top: 25px; }

/*Footer partial*/
.footer {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 10px;
  font-family: arial;
  font-weight: bold;
  color: #000000; }
  .footer p {
    text-align: center;
    color: #000000; }
    @media (max-width: 680px) {
      .footer p {
        margin-top: 10px;
        /* margin: 10px; */
        display: block;
        height: 20px; } }
  .footer a {
    color: #000000; }
    .footer a:hover {
      text-decoration: none; }

/*# sourceMappingURL=style.css.map */