.top_section {
  display: block;
  width: 100%;
  /*margin-bottom: 100px;*/
  overflow: hidden;
}
.top_section_container {
  border-radius:0px;
  display: flex;
  position: relative;
  max-width: 1688px;
  margin: 0 auto;
  background-color: #c7e6ef;
  transform: scale(0);
  -webkit-transform: scale(0);
  transition: all 0.5s cubic-bezier(0, 0.65, 0, 1.3); 
  min-height:420px;
  overflow:hidden;
}



.top_section_banner { position: absolute; width: 100%; height: 100%; right: 0; top: 0; background-repeat:no-repeat; background-size: cover; background-position: top right; width:50%; } 

.top_section_container.version-4,
.top_section_container.version-5,
.top_section_container.version-6 { min-height:520px; }

.version-1 .top_section_banner{ background-size:cover;  background-position: center right;  } 
.version-2 .top_section_banner, 
.version-3 .top_section_banner{ background-image:url('../main_home/images/banner2.svg'); background-size:100%;  background-position: center right;   } 

.version-4 .top_section_banner .banner-icon {  position:absolute; width:120px; height:120px;  border-radius:50%;  background: #9cc8d3; z-index:10; left:340px; top:30px; display: flex;
align-items: center; justify-content: center; } 

.version-4  .top_section_banner .banner-icon:after {  content:""; position:absolute; width:80px; height:80px;  border-radius:50%;  background: #e9e4a4; z-index:10; left: 14px; top: 20px;  }
.version-4 .top_section_banner .banner-icon img { width:50px; z-index:12;}
.version-4 .top_section_banner  {  position:relative; width:50%; height:inherit; } 
.version-4 .top_section_banner .image-1 {  position:absolute; width:400px; height:400px; z-index:9; border-radius:50%; top:50%; margin-top:-200px; left:50px; } 
.version-4 .top_section_banner .image-2 {  position:absolute; width:260px; height:260px; z-index:8; border-radius:50%; top:50px; left:380px;  } 
.version-4 .top_section_banner:after { content:""; background: #e9e4a4; position:absolute; width:60px; height:60px; z-index:10; border-radius:50%; left:60px; top:50%; margin-top:90px; } 


.version-5 .top_section_banner  {  position:relative; width:50%; height:inherit; } 
.version-5 .top_section_banner:after  { content:""; position:absolute; width:1000px; height:1000px; border-radius:50%; right:-50%; top:-80%;  background:#a2ced7;  } 
.version-5 .top_section_banner:before { content:""; background: #e9e4a4; position:absolute; width:30px; height:30px; z-index:15; border-radius:50%; left:500px; top:80px; } 
.version-5 .top_section_banner .image-1 {  position:absolute; width:400px; height:400px; z-index:9; border-radius:0px; top:80px; left:50px; } 
.version-5 .top_section_banner .image-2 {  position:absolute; width:260px; height:260px; z-index:8; border-radius:0px; top:150px; left:380px;  } 

.version-5 .top_section_banner .banner-icon {  position:absolute;  background: #e9e4a4;  width:100px; height:100px; z-index:9; border-radius:50%; left:410px; top:50%; margin-top:90px;  display: flex; align-items: center; justify-content: right;   } 

.version-5 .top_section_banner .banner-icon img { width:50px; z-index:12; margin-right:20px;}
.version-5 .top_section_banner .circle1  {  position:absolute;  background: #6596a4; width:60px; height:60px; z-index:9; border-radius:50%; left:600px; top:-30px; }


.version-6 .top_section_banner  {  position:relative; width:50%; height:inherit; } 
.version-6 .top_section_banner .image-1 {  position:absolute; width:400px; height:400px; z-index:9; border-radius:0px; top:80px; left:50px; border-radius:6px;  } 
.version-6 .top_section_banner .image-2 {  position:absolute; width:260px; height:260px; z-index:8; border-radius:0px; top:110px; left:420px; border-radius:6px;  } 

.version-6 .top_section_banner .background-text {  position:absolute; top:15px; right:50px;  color:#9cc8d4; font-size:140px; z-index:9; font-weight:800; font-family: "Spartan";  
  text-transform: uppercase;   }

.version-6 .top_section_banner .background-text-2 { display:none; top:200px;  color:rgba(255,255,255,.2);  }

.version-6 .top_section_banner .background-text-3 { top:380px;   color:#9cc8d4; z-index:1;  -webkit-text-stroke: 1px rgba(0,0,0,.1);  -webkit-text-fill-color:#c7e6ef; }

.version-6 .top_section_banner .banner-icon img { width:50px; z-index:12; margin-right:20px;}


.top_section_container.active {
  transform: none;
  -webkit-transform: none;
}


.top_section_box {
  position: relative;
  width:50%;
  z-index: 1;
  padding: 80px 0px 100px 260px;
  opacity: 0;
  transition: all 0.4s linear;
  transition-delay: 0.5s;
  z-index:99;

}
.top_section_box.active {
  opacity: 1;
}
.top_section_title {
  font-family: "Spartan";
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 35px;
  max-width: 450px;
}
.top_section_text {
  font-weight: 400;
  font-size: 1.0666rem;
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 450px;
}

.df { display:flex; align-items: center; }
.df h1.top_section_title { font-size: 4rem;  }

#consultation { background:#f0f0f0; padding:3rem; line-height:180%; border-radius:8px;  }
#consultation:after { position:absolute; background:#fff; content:""; z-index:9; height:100%; width:0%; top:0; right:0; transition: all 1s cubic-bezier(0.915, 0.000, 0.180, 0.990); z-index:10; } 
#consultation.anim:after { width:100%; }
#consultation h1 { font-weight: 700; line-height: 1.5; margin-bottom: 2rem; font-size:2rem; }

#consultation .photo-wrapper { margin-bottom:2rem;  }
#consultation .main-photo { }

#consultation .header { font-size:1.2rem; font-weight: 600; padding:.8rem 1rem; margin:2rem 0 1rem 0; }
#consultation .subheader { font-weight: 600; }

#consultation-content { padding-right: 2rem; padding-left:0px; } 
#consultation-content img  { max-width:100%; height:auto; } 
#consultation-sidebar {  padding:2rem; text-align: center; }
#consultation-sidebar hr { margin:2.5rem 0; }
#consultation-sidebar > p .title { font-weight: 600; margin:.5rem 0; display: inline-block;}
#consultation-sidebar > p .date { font-size: 1.2rem; font-weight: 600; }
#consultation-sidebar > p .num { font-size: 2rem; font-weight: 600; }

#consultation .period-mobile  {  font-size:1rem; font-weight: 600; line-height: 150%; margin-bottom:2rem; } 
#consultation .period-mobile .ico { float:left; margin:10px 15px 0 0; }
#consultation .period-mobile span { font-weight: 300; font-size:0.9rem; }

#consultation .header,
#consultation-sidebar  { background: rgba(0,0,0,.03); }

#consultation .desc  { word-wrap:break-word; }
#consultation-mobile-action {  position: fixed; z-index:9; bottom:0; width:100%; left:0; background:#fff; box-shadow:0 0 25px rgba(0,0,0,.1); text-align:center; padding:1rem; }

@media all and (max-width: 991px) {
    #consultation .photo-wrapper {  }
}

#resident_card_map { width: 100%;  height: 450px; float: left; }

#resident-card-map-wrapper { } 
#resident-card-map-loader { position:absolute; z-index:1; width:100%; height:100%; top:0; left:0; } 
#resident-card-map-loader-spinner { width:40px; height:40px; font-size:15px; color:rgba(0,0,0,.3); left:50%; top:50%; margin: -20px 0 0 -20px; position:absolute;  opacity:0; transition: opacity .2s linear; } 
#resident-card-map-loader-spinner { opacity:1; }