:root {
    --primary: #ddd;
    --dark: rgb(73, 71, 71);
    --light: #fff;
    --shadow: 0 1px 5px rgba(104, 104,104, 0.8);
  }
  
  body { 
      background: url(img/defaultbackground.jpg);
      /* background-color: #2E4373; */
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center; 
      background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      padding-bottom: 10%;
    }
  
     /* Nav-Bar */
    .navbar-brand {
      font-size: 25px;
      font-family: 'Cinzel Decorative', cursive;
      text-shadow: 0px 3px 2px rgba(0,0,0,0.4),
                   0px 7px 12px rgba(0,0,0,0.1),
                   0px 16px 21px rgba(0,0,0,0.1);
    }
  
  h1 {
    font-family: lato;
    text-shadow: 2px 2px #707070;
    color: #294F6D;
  }

  /* Info Banner */
    .info-banner {
      grid-area: auto;
      grid-gap: 20px;
      padding-bottom: 20px;
      border-radius: 20px;
      background-image: url(img/adorador_limpio5.jpg); 
      background-size: cover;
      margin: 0%;
      color: #294F6D;
      padding: 0rem;   /*was 3rem */ 
      display: auto;
      flex-direction: column;
      align-items: flex-start;
      justify-content: right;
      text-align: right;
      box-shadow: var(--shadow);
    }
  
  /* Default Article Group */
  .doctrina { grid-area: doctrina; }
  
  /* .article-two { grid-area: article-two; }
  
  .article-three { grid-area: article-three; }
  
  .article-four { grid-area: article-four; } */
  
  .grid-container {
    display: grid;
    grid-template-areas:
      'doctrina'; /*article-one article-one article-one'
      'article-two article-two article-three article-three'
      'article-four article-four article-four article-four'; */
       grid-gap: 10px;
  }
  
  .grid-container > div {
      background-color: rgba(255, 255, 255, 0.8);
      text-align: center;
      padding: 20px 0;
      font-size: 16px;    
    }
  
   .doctrina {
     border-radius: 20px;
   }

   .article-one { 
    border-radius: 20px
   }
   
   /*.article-two { 
    border-radius: 20px
   }.article-three { 
    border-radius: 20px
   }.article-four { 
    border-radius: 20px
   } */
  
   .art1-image {
      image-orientation: var(--light);
      image-rendering: auto;
    }
  
    /* Pre Footer */
    .prefooterone {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      text-align: center;
      box-sizing: border-box;
      background-color:rgba(255, 255, 255, 0.8);
      border-radius: 20px;
      padding: 2%;
  }
  
  a.navigation-link {
    padding: 0px 10px;
    word-wrap: normal;
  }
  
    /* Photos-Grid */
    .photos {
      display: grid;
      grid-gap: 20px;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      box-sizing: border-box;
    }
    
    .photos img {
      width: 100%;
      box-shadow: var(--shadow);
      padding: 2%;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 20px;
      margin-top: 25px;
    }
  
    /* Social Grid */
    .socialtab {
      margin-top: 0%;
    }
  
    .social {
      text-align: center;
      padding-bottom: 1%;
      border-radius: 20px;
      font-size: 6rem;
      background-color: rgba(255, 255, 255, 0.8);
    }
   
    .icons {
      font-size: 5rem;
      padding-right: 7%;
      padding-left: 7%;
      border-radius: 50%;
    }
  
    .fa {
      width: 50px;
      text-align: center;
      text-decoration: none;
      border-radius: 50%;
      color: #294F6D;
    }
    
    .fa:hover {
      opacity: 0.7;
    }
  
  /* Back to top button */
  #myBtn {
    display: true; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: white; /* Set a background color */
    color: #294F6D; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 14px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
    margin-bottom: 50px;
    font-weight: 550;
  }
  
  #myBtn:hover {
    background-color: lightgray; /* Add a dark-grey background on hover */
  }
  
    /* Footer */
    .footer {
    position: fixed;
    padding: 1%;
    left: 0;
    bottom: 0;
    height: 5rem;
    width: 100%;
    background-color: white;
    color:#294F6D;
    text-align: center;
    }