
/*SERVICE NAV*/
 nav.service-nav{
	position: relative;
	z-index: 99
}
 nav.service-nav .service-nav-inner{
	position: absolute;
    top: -150px;
	left:50%;
    transform:translateX(-50%);

}
 nav.service-nav .service-nav-inner .row{
	max-width: 1120px;
	margin-left: auto;
	margin-right:auto;
}
/*bullets*/
 nav.service-nav .bullets{
	position: relative;
    z-index: 1;
}
 nav.service-nav .bullets .bullet_box .circle {
   height: 100vw;
    width: 100vw;
    max-width: 145px;
    max-height: 145px;
    border: none;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    display: flex;
    margin: 0 auto;
    box-sizing: content-box;
    position:absolute;
    top: -65px;
    left:50%;
    transform:translateX(-50%);
	transition: background 0.25s ease-in-out;
}
 nav.service-nav .bullets .bullet_box a:hover .circle, 
 nav.service-nav .bullets .bullet_box a .circle.scroll_active{
   background:#005C66;
}
 nav.service-nav .bullets .bullet_box .circle img {
    max-width: 100%;
}
/*text-layer*/
 nav.service-nav .text-layer{
	background:white;
	border: solid 1px #f1f1f1;
	clip-path: polygon(40px 0%, 
				   100% 0%, 
				   100% 115px,
				   96% 100%,
				   0% 100%, 
				   0% 40px );
	padding-top:95px;
}
 nav.service-nav .text-layer a {
    color: #005C66;
}
 nav.service-nav .text-layer a:hover {
    color: #60033b;
}
 nav.service-nav .text-layer a h3{
    margin-bottom:30px;
    font-size: 1.3em;
	font-weight:700;
}
@media only screen and (min-width: 1920px) {	
}
@media only screen and (max-width: 1200px) {
}
@media only screen and (max-width: 992px) {
	 nav.service-nav {
    	position: relative;
    	z-index: 99;
        display:none;
	}
	 nav.service-nav .service-nav-inner{
		background:white;
		border-bottom: solid 2px #f1f1f1;
		top: -70px;
	}
	 nav.service-nav .service-nav-inner .row {
    	max-width: 500px;
	}
	 nav.service-nav .bullets .bullet_box .circle{
		max-width: 85px;
		max-height: 85px;
		top: 6px;
	}
	 nav.service-nav .bullets .bullet_box .circle img {
    	max-width: 70%;
	}
	 nav.service-nav .text-layer {
		clip-path: none;
		box-shadow: none!important;
		border:none;
	}
	 nav.service-nav .text-layer h3{
		display:none
	}	
}
@media only screen and (max-width: 769px) {
}
@media only screen and (max-width: 576px) {
	 nav.service-nav .service-nav-inner{
		top: -40px;
	}
	 nav.service-nav .service-nav-inner .bullets .bullet_box .circle{
		max-width: 55px;
		max-height: 55px;
	}
	 nav.service-nav .service-nav-inner .text-layer{
		padding-top:70px;
	}
}
/*sticky*/
 nav.service-nav .service-nav-inner.s_nav_stick{
	position: fixed;
    top: 109px;
    z-index: 99;
    max-width: unset;
    background: white;
    border-top: solid 1px #f1f1f1;
    border-bottom: solid 1px #f1f1f1;
	margin-top: var(--wp-admin--admin-bar--height);
}
 nav.service-nav .service-nav-inner.s_nav_stick .bullets .bullet_box{
    display: none;
}
 nav.service-nav .service-nav-inner.s_nav_stick .text-layer{
	border:none;
    padding-top: 10px;
    clip-path:unset;
	box-shadow: none!important;
}
 nav.service-nav .service-nav-inner.s_nav_stick .text-layer h3{
    margin-bottom:10px;
    font-size: 1.1em;
}
/*scrollspy*/
.scroll_active{
	color: #60033b;
}
@media only screen and (min-width: 1920px) {	
}
@media only screen and (max-width: 1200px) {
}
@media only screen and (max-width: 992px) {
	 nav.service-nav .service-nav-inner.s_nav_stick {
		top:84px;
	}
	 nav.service-nav .service-nav-inner.s_nav_stick .bullets .bullet_box {
    	display: block;
	}
	 nav.service-nav .service-nav-inner.s_nav_stick  .bullets .bullet_box .circle{
		max-width: 65px;
		max-height: 65px;
	}
	 nav.service-nav .service-nav-inner.s_nav_stick .text-layer{
		padding-top:80px;
	}
	
}
@media only screen and (max-width: 769px) {
}
@media only screen and (max-width: 576px) {
	 nav.service-nav .service-nav-inner .row {
    	max-width: 280px;
	}
	 nav.service-nav .service-nav-inner.s_nav_stick  .bullets .bullet_box .circle{
		max-width: 45px;
		max-height: 45px;
	}
	 nav.service-nav .service-nav-inner.s_nav_stick .text-layer{
		padding-top:55px;
	}
}
/*service sub page*/
/*setting default style same as sticky style*/
.page-template-page-service nav.service-nav .service-nav-inner{
	max-width: 1200px;
    background: white;
    border-top: solid 1px #f1f1f1;
    border-bottom: solid 1px #f1f1f1;
	margin-top: var(--wp-admin--admin-bar--height);
	top: -100px; /*compensating for smaller navbar*/
}
.page-template-page-service nav.service-nav .service-nav-inner.s_nav_stick {
   	max-width: unset;
	position: fixed;
    top: 109px;
    z-index: 99;
}
.page-template-page-service nav.service-nav .service-nav-inner .text-layer{
    padding-top: 10px;
    clip-path:unset;
	box-shadow: none!important;
}
.page-template-page-service nav.service-nav .service-nav-inner .text-layer h3{
    margin-bottom:10px;
    font-size: 1.1em;
}
@media only screen and (min-width: 1920px) {	
}
@media only screen and (max-width: 1600px) {
	.page-template-page-service nav.service-nav .service-nav-inner{
		max-width: 1600px;
	}
}
@media only screen and (max-width: 992px) {
	.page-template-page-service nav.service-nav .service-nav-inner.s_nav_stick {
    	top: 84px;
	}
	.page-template-page-service nav.service-nav .service-nav-inner .row {
        max-width: unset;
    }
	.page-template-page-service nav.service-nav .service-nav-inner .text-layer h3{
        display: block;
    }
}
@media only screen and (max-width: 769px) {
	.page-template-page-service nav.service-nav .service-nav-inner{
		top: -115px; /*adjusting for banner scalig*/
	}
	.page-template-page-service nav.service-nav .service-nav-inner .text-layer{
    	flex-wrap: nowrap;
    	overflow-x: scroll;
	}
	.page-template-page-service nav.service-nav .service-nav-inner .text-layer > div{
		text-align: left!important;
        padding-left: 7px;
        margin-left: 10px;
        max-width: fit-content;
		min-width:180px;
/*        border-left: solid #989898 3px;*/
	}
	.page-template-page-service nav.service-nav .service-nav-inner .text-layer h3 {
       margin-bottom: 10px;
    }
	
}
@media only screen and (max-width: 576px) {
}
