﻿ 
.sitemap { width:100%; max-width: 70%;  margin: 150px auto; padding: 50px 80px;  background: #fff; position: relative;  }

.sitemap:before{  width:100%; content: attr(data-content);color: #171c61; font-size: 80px; font-weight: 500; word-wrap: normal; left:32%; top:-5%;position: absolute; z-index:2;   }

 .sitemap ul { width: 100%;  margin:0px; padding:0px;   display: flex; flex-wrap: wrap; align-items: flex-start; transition: all 0.25s ease 0s;position: relative; }
.sitemap ul li{ width:calc(100%/3 - 30px); margin:10px 15px; padding: 0; display: flex; flex-wrap: wrap;  list-style: none; position: relative;}
.sitemap ul li a:before{content: "";width: 100%; height: 2px; left:0px; bottom:0px; position: absolute;z-index: 1; background: #7DB9DE; }
.sitemap ul li a:after{content: "";width: 30%; height: 2px; left:0px; bottom:0px; position: absolute;z-index: 2; background: #171c61; }

 .sitemap ul > li > a { width: 100%; padding:10px 0px 10px 10px;font-size: 1.15rem; font-weight:700; line-height:2rem; display: block; color: #171c61;position: relative;  transition: all 0.25s ease 0s;   }
.sitemap ul > li > ul { width: 100%;  margin:10px;  }
.sitemap ul > li > ul > li { width: 100%; position: relative; text-align: left;}
.sitemap ul > li > ul > li a{ width: 100%;  padding:0px 0px 0px 20px;font-size:.875rem; font-weight:700; line-height:1.5rem; position: relative; text-align: left;}
.sitemap ul > li > ul > li a:before{content: "";width: 15px; height: 1px; left:0px;  top:12px;bottom:auto; position: absolute;z-index: 2; background: #171c61; }
.sitemap ul > li > ul > li a:after{ display: none;}
.sitemap ul li a:hover{opacity: .5}
@media (max-width: 840px) {
    .sitemap { max-width: 100%;  margin: 100px auto; padding: 50px 0px;   }
.sitemap:before{  font-size: 40px;  left:30%; top:-30px;   }

    .sitemap ul li{ width: 100%; margin: 10px;}
  
    
}