/**** searchResultsBanner ****/
#searchResultsBanner {margin: 0; padding: 0;}
#searchResultsBanner .searchResult {height: 500px; position: relative; background-repeat: no-repeat; background-position: center center; background-size: cover; display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
#searchResultsBanner .searchResult:before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1;}
#searchResultsBanner .searchResult .searchResultBannerContent {position: relative; z-index: 2; width: 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
#searchResultsBanner .searchResult .searchResultBannerContent h1 {margin: 0 0 20px 0; padding: 0 0 15px 0; color: #fff; font-size: 40px; line-height: 50px; font-weight: 600; text-align: center; position: relative; width: 100%;}
#searchResultsBanner .searchResult .searchResultBannerContent h1:after {width: 84px; height: 4px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); content: "";}
#searchResultsBanner .searchResult .searchResultBannerContent h1:before {width: 34px; height: 8px; background: #fff; border-radius: 4px; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); content: "";}
#searchResultsBanner .searchResult .searchResultBannerContent p {margin: 0; padding: 0 100px 20px 100px; color: #fff; font-size: 24px; line-height: 34px; font-weight: 400; text-align: center; width: 100%;}

/**** sesrchResults ****/
#searchResults {margin: 0; padding: 100px 0;}
#searchResults .searchResultsWrapper {margin: 0 -15px; padding: 0; display: flex; align-content: baseline; flex-wrap: wrap;}
#searchResults .searchResultsWrapper .searchResult {margin: 0 15px 50px 15px; padding: 0 0 20px 0; width: calc(100% - 30px); border-bottom: 1px solid #bebebe; position: relative; display: inline-flex; align-content: flex-start; flex-wrap: wrap;}
#searchResults .searchResultsWrapper .searchResult .ImageWrapper {width: 300px; height: 100%; margin-right: 30px; display: inline-flex; align-items: center; flex-wrap: wrap;}
#searchResults .searchResultsWrapper .searchResult .searchResultContent {margin: 0; padding: 0; width: calc(100% - 330px); display: inline-flex; align-items: center; flex-wrap: wrap;}
#searchResults .searchResultsWrapper .searchResult .searchResultContent ul {margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap;}
#searchResults .searchResultsWrapper .searchResult .searchResultContent ul li {margin: 0 6px 6px 0; padding: 0; display: inline-flex; flex-wrap: wrap;}
#searchResults .searchResultsWrapper .searchResult .searchResultContent ul li a {padding: 3px 8px; background: rgba(44, 82, 180, 0.15); border-radius: 4px; font-weight: 400; font-size: 14px; line-height: 19px; color: #2C52B4;}
#searchResults .searchResultsWrapper .searchResult .searchResultContent h3 {margin: 0; padding: 10px 0 15px 0;}
#searchResults .searchResultsWrapper .searchResult .searchResultContent h3 a {font-weight: 700; font-size: 20px; line-height: 30px; text-decoration: underline; color: #393939; transition: all ease-in-out 0.2s; display: inline-flex;}
#searchResults .searchResultsWrapper .searchResult .searchResultContent h3 a:hover {text-decoration: none; color: #2C52B4;}
#searchResults .searchResultsWrapper .searchResult .searchResultContent p {margin: 0 0 15px 0; padding: 0; font-weight: 300; font-size: 16px; line-height: 24px; color: #393939; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
#searchResults .searchResultsWrapper .searchResult .searchResultContent a.blogReadMoreBtn {font-weight: 500; font-size: 16px; line-height: 22px; color: #393939; transition: all ease-in-out 0.3s; display: inline-flex; align-items: center; flex-wrap: wrap;}
#searchResults .searchResultsWrapper .searchResult .searchResultContent a.blogReadMoreBtn img {margin-left: 15px; max-width: 30px;}
#searchResults .searchResultsWrapper .searchResult .searchResultContent a.blogReadMoreBtn:hover {left: 10px; color: #2c52b4;}
#searchResults .searchResultsWrapper .paginationWrapper {margin: 0; padding: 0; width: 100%; display: flex; align-items: center; flex-wrap: wrap;}
#searchResults .searchResultsWrapper .paginationWrapper ul {margin: 0; padding: 0; list-style: none; width: 100%; display: flex; align-items: center; flex-wrap: wrap; justify-content: center;}
#searchResults .searchResultsWrapper .paginationWrapper ul li {margin: 0; padding: 0; display: inline-flex; align-items: center; flex-wrap: wrap;}
#searchResults .searchResultsWrapper .paginationWrapper ul li a {padding: 8px 15px; background: #EDEDED; border-right: 1px solid #fff; font-weight: 500; font-size: 14px; line-height: 19px; color: #393939; transition: all ease-in-out 0.3s;}
#searchResults .searchResultsWrapper .paginationWrapper ul li a.active {color: #fff; background: #393939;}
#searchResults .searchResultsWrapper .paginationWrapper ul li a:hover {color: #fff; background: #393939;}
#searchResults .searchResultsWrapper .paginationWrapper ul li:first-child a {border-radius: 4px 0 0 4px;}
#searchResults .searchResultsWrapper .paginationWrapper ul li:last-child a {border-right: none; border-radius: 0 4px 4px 0;}

@media only screen and  (min-width: 0px) and (max-width: 767px) {
    #searchResultsBanner .searchResult {height: 350px;}
    #searchResultsBanner .searchResult .searchResultBannerContent h1 {font-size: 28px; line-height: 38px;}
    #searchResultsBanner .searchResult .searchResultBannerContent p {padding: 0 0 20px 0; font-size: 16px; line-height: 24px;}
    #searchResults {padding: 60px 0;}
    #searchResults .searchResultsWrapper {padding: 0 0 80px 0;}
    #searchResults .searchResultsWrapper .searchResult .ImageWrapper {width: 100%; margin-right: 0; margin-bottom: 15px; height: 210px;}
    #searchResults .searchResultsWrapper .searchResult .searchResultContent {width: 100%;}
    #searchResults .searchResultsWrapper .searchResult .searchResultContent a.blogReadMoreBtn {position: relative; bottom: 0;}
}

@media only screen and  (min-width: 768px) and (max-width: 991px) {
    #searchResultsBanner .searchResult {height: 450px;}
    #searchResultsBanner .searchResult .searchResultBannerContent h1 {font-size: 30px; line-height: 40px;}
    #searchResultsBanner .searchResult .searchResultBannerContent p {padding: 0 0 20px 0; font-size: 18px; line-height: 28px;}
    #searchResults .searchResultsWrapper .searchResult .ImageWrapper {width: 100%; margin-right: 0; margin-bottom: 15px; height: 210px;}
    #searchResults .searchResultsWrapper .searchResult .searchResultContent {width: 100%;}
    #searchResults .searchResultsWrapper .searchResult .searchResultContent a.blogReadMoreBtn {position: relative; bottom: 0;}
}

@media only screen and  (min-width: 992px) and (max-width: 1199px) {
    #searchResultsBanner .searchResult {height: 440px;}
    #searchResultsBanner .searchResult .searchResultBannerContent h1 {font-size: 32px; line-height: 42px;}
    #searchResultsBanner .searchResult .searchResultBannerContent p {padding: 0 0 20px 0; font-size: 20px; line-height: 30px;}
    #searchResults .searchResultsWrapper .searchResult .ImageWrapper {width: 100%; height: 240px; max-width: 400px; margin-right: 0; margin-bottom: 15px;}
    #searchResults .searchResultsWrapper .searchResult .searchResultContent {width: 100%;}
    #searchResults .searchResultsWrapper .searchResult .searchResultContent a.blogReadMoreBtn {position: relative; bottom: 0;}
}

@media only screen and  (min-width: 1200px) and (max-width: 1399px) {
    #searchResultsBanner .searchResult {height: 450px;}
    #searchResultsBanner .searchResult .searchResultBannerContent h1 {font-size: 32px; line-height: 42px;}
    #searchResultsBanner .searchResult .searchResultBannerContent p {padding: 0 30px 20px 30px; font-size: 20px; line-height: 30px;}
    #searchResults .searchResultsWrapper .searchResult .searchResultContent h3 {padding-top: 0;}
    #searchResults .searchResultsWrapper .searchResult .searchResultContent a.blogReadMoreBtn {position: relative; bottom: 0;}
}

@media only screen and  (min-width: 1400px) and (max-width: 1599px) {
    #searchResultsBanner .searchResult .searchResultBannerContent h1 {font-size: 32px; line-height: 42px;}
    #searchResultsBanner .searchResult .searchResultBannerContent p {padding: 0 30px 20px 30px; font-size: 20px; line-height: 30px;}
    #searchResults .searchResultsWrapper .searchResult .searchResultContent h3 {padding-top: 0;}
}
