<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ledger">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

body {
  font-family: "Roboto", sans-serif;
  font-size: 16px !important;
}

//NAVIGATION AND SEARCH BAR //////////////////////////////////////////////


.navbar .navbar-inner, #docsSearch {
  background-color: #fff;
  background: #fff;
}

#docsSearch {
    background: linear-gradient(to right, #E9EFF9, #F1E7E3);
}

#docsSearch {
    border-bottom: 0px;
    h1 {
        font-size: 0px;
        color: #2a384f;
        text-align: center;
        width: 1080px;
        margin-left: 50%;
        transform: translateX(-50%);
        margin-top: 30px;
        &:before {
            content: "How can we ";
            color: #2a384f;
            font-size: 30px;
            font-weight: 800;
            font-family:'Ledger';
        }
        &:after {
            content: "help?";
            color: #eda180;
            font-size: 30px;
            font-weight: 800;
            font-family:'Ledger';
        }
    }
}

.navbar .navbar-inner {
  border-bottom: 2px solid #eee;
  min-height: 100px;
  height: 100px !important;
  .container-fluid {
    height: 100px;
    .nav {
        position: relative !important;
        left: 0px !important;
        right: auto !important;
        left: 230px !important;
        width: 960px !important;
        top: -49px !important;
        li {
          font-size: 14px !important;
          font-weight: 300;
          letter-spacing: 0.5px;
          a {
            letter-spacing:.5px;
            color:#2a384f;
            padding-right: 30px !important;
            padding-left: 0px !important;
            font-family: "Roboto";
          }
        }
        li {
            &#internal-use-only, &#home, &#start-here {
                a {
                    font-size: 14px !important;
                }
            }
            &#ecatholic-websites {
                a {
                    font-size: 0px;
                    &:before {
                        content: "Websites";
                        font-size: 14px;
                    }
                }
            }
            &#ecatholic-payments {
                a {
                    font-size: 0px;
                    &:before {
                        content: "Payments";
                        font-size: 14px;
                    }
                }
            }
            &#ecatholic-connect {
                a {
                    font-size: 0px;
                    &:before {
                        content: "Connect";
                        font-size: 14px;
                    }
                }
            }
            &#ecatholic-chms {
                a {
                    font-size: 0px;
                    &:before {
                        content: "ChMS";
                        font-size: 14px;
                    }
                }
            }
            &#ecatholic-live {
                a {
                    font-size: 0px;
                    &:before {
                        content: "Live";
                        font-size: 14px;
                    }
                }
            }
        }
        > li:first-child > a {
          padding-left: 0px;
        }
      }
      .brand {
        width: 178px;
        height: 30.5px;
        img {
            width: 178px;
            height: 30.5px;
        }
    }
    }
  }
}

#searchBar .search-query {
  border-radius: 4px;
}

.navbar .nav .active .caret {
  //display: none;
}

#searchBar {
    width: 300px;
    &:before {
        content: "\f002";
        font-family: FontAwesome;
        color: #ccc;
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
    }
    .search-query {
        height: 50px;
        width: 300px;
        padding-left: 60px;
        padding-right: 20px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        border-radius: 4px;
        box-shadow: none;
        &::placeholder {
            font-size: 0px;
        }
    } 

}

#searchBar button {
  display: none;
}


//CATEGORIES //////////////////////////////////////////////////////////

.collection-category {
    text-align: center;
}

.collection-category h2 {
  text-align: center !important;
  font-weight: 800 !important;
  font-size: 36px !important;
  margin: 0px 0px 40px;
}

.collection-category h2 a {
    color: #1B365D;
    font-family: "Ledger";
    font-weight: 500;
    &:hover {
      color: #E87722;
    }
}

.collection-category .category-list {
  @media (min-width: 701px) {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content:center;
    flex-wrap: wrap;
  }
  .category {
    width: 20%;
    @media (max-width: 701px) {
      width: 100%;
      margin-bottom: 20px;
    }
    min-height: 220px;
    background-color: #fff;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition:all 0.5s;
    padding: 100px 30px 20px 30px;
    box-sizing: border-box;
    position: relative;
    &:before {
        content: "";
        position: absolute;
        top: 20px;
        z-index: 9999;
    }
    &:after {
        content: "";
        height: 70px;
        width: 70px;
        border-radius: 50%;
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
    }
    &:hover {
      h3 {
        color: #E87722;
      }
    }
    h3 {
      color: #333;
      font-weight: 600;
      transition:all 0.5s;
      font-family: "Roboto";
      position: relative;
    }
    p:not(.article-count) {
      color: #333;
      font-size: 14px;
      font-family: "Roboto";
    }
    .article-count {
        color: #2a384f;
        font-style: italic;
    }
  }
}

#collection-category-1583 {
    .category-list {
        .category:after {
            content: "";
            background:url("https://files.ecatholic.com/1000/pictures/2024/9/ec-logo-icon-blue.png?t=1727375013000") no-repeat;
            border-radius: 0px;
            height: 30px;
            background-size: 48px 28px;
            margin-left: 13px;
            margin-top: 20px;
        }
    }
}
/*Websites*/
#collection-category-1 {
    .category-list {
        .category {
            &:before {
                content: "";
                height: 65px;
                width: 55px;
                margin-top: 5px;
                background: url("https://files.ecatholic.com/1000/design/ecatholic_sprite_rev_2024%201.svg") no-repeat; 
                background-position: 5px -185px;
                background-size: 5250px 751px;
            }
            &:after {
                content: "";
                background-color: #eda180;
            }
        }
    }
}
/*Payments*/
#collection-category-111 {
    .category-list {
        .category {
            &:before {
                content: "";
                height: 50px;
                width: 48px;
                margin-top: 3px;
                background: url("https://files.ecatholic.com/1000/design/ecatholic_sprite_rev_2024%201.svg") no-repeat; 
                background-position: -4850px -185px;
                background-size: 5250px 751px;
            }
            &:after {
                background-color: #8FBF93;
            }
        }
    }
}
/*Connect*/
#collection-category-1157 {
    .category-list {
        .category {
            &:before {
                content: "";
                height: 50px;
                width: 48px;
                margin-top: 5px;
                background: url("https://files.ecatholic.com/1000/design/ecatholic_sprite_rev_2024%201.svg") no-repeat; 
                background-position: -5198px -184px;
                background-size: 5250px 751px;
            }
            &:after {
                background-color: #9BC8E5;
            }
        }
    }
}
/*ChMS*/
#collection-category-1194 {
    .category-list {
        .category {
            &:before {
                content: "";
                height: 49px;
                width: 49px;
                background: url("https://files.ecatholic.com/1000/design/ecatholic_sprite_rev_2024%201.svg") no-repeat; 
                background-position: -5000px -185px;
                background-size: 5250px 751px;
            }
            &:after {
                background-color: #9B9BDF;
            }
        }
    }
}
/*Live*/
#collection-category-251 {
    .category-list {
        .category {
            &:before {
                content: "";
                height: 49px;
                width: 37px;
                background:  url("https://files.ecatholic.com/1000/design/ecatholic_sprite_rev_2024%201.svg") no-repeat; 
                background-position: -200px -177px;
                background-size: 5250px 751px;
            }
            &:after {
                background-color:#F7C468;
            }
        }
    }
}

#fullArticle, #categoryHead, .contentWrapper {
    h1, h2, h3, h4 {
        font-family: "Ledger";
        color: #2a384f;
    }
    p, ol, ul {
        font-family: "Roboto";
        font-size: 16px !important;
    }
    b {
        font-weight: 800 !important;
    }
}

#fullArticle blockquote, #fullArticle dd, #fullArticle div, #fullArticle li, #fullArticle ol, #fullArticle p, #fullArticle table, #fullArticle ul {
    font-size: 16px !important;
}

.articleFoot p.lu, .articleFoot time.lu {
    font-family: "Ledger";
}

#sidebar h3 {
    color: #2a384f;
    font-size: 16px;
}

#fullArticle dt {
    background: #2a384f;
}

footer p, .articleRatings-question, .related ul>li a, .related h3, button, input, select, textarea, #sidebar .nav-list a, #sidebar h3, #serp-dd .result a:hover, #serp-dd .result > li.active, #fullArticle strong a, #fullArticle a strong, .contentWrapper a, .most-pop-articles .popArticles a, .most-pop-articles .popArticles a:hover span, .category-list .category .article-count, .category-list .category:hover .article-count {
    font-family: "Roboto";
}