:root {
	--clr-dark: #262626;
	--clr-light: #f7f7f7;
	--clr-dark-test: rgb(38, 38, 38, 0.9);

	--clr-black: #000000;
	--clr-silver: #ababab;
	--clr-white: #ffffff;
	--clr-muted: #bababa;
	--clr-green: #48b940;
	--clr-darkgreen: #2a7025;
	--clr-red: #BA0C2E;
	--clr-darkred: #9c0927;
	--clr-yellow: #FFE681;
	--clr-blue: #007bff;
	--clr-darkgray: #303233;
	--clr-lightgray: #ededed;
	--clr-shadow-darkmode: #404040;
	--clr-darkopacity: rgba(38, 38, 38, 0.9);
	--clr-lightopacity: rgba(255, 255, 255, 0.6);
}

.lightmode {
		--bg: var(--clr-light)!important;
		--bg-hover: var(--clr-dark)!important;
		--bg-active: var(--clr-black)!important;
		--border: var(--clr-silver)!important;

		--bubble: #91c6ff!important;
	
		--muted: var(--clr-muted)!important;
	
		--text: var(--clr-dark)!important;
		--text-hover: var(--clr-silver)!important;
		--text-active: var(--clr-white)!important;

		--overlay: var(--clr-darkopacity)!important;
}

.darkmode {
		--bg: var(--clr-dark)!important;
		--bg-hover: var(--clr-light)!important;
		--bg-active: var(--clr-white)!important;
		--border: var(--clr-silver)!important;
		--shadow: var(--clr-shadow-darkmode)!important;
		--shadow-black: var(--clr-black)!important;

		--bubble: var(--clr-darkgray)!important;

		--muted: var(--clr-muted)!important;

		--text: var(--clr-white)!important;
		--text-hover: var(--clr-dark)!important;
		--text-active: var(--clr-black)!important;

		--overlay: var(--clr-lightopacity)!important;
}

	/* Light mode */
@media screen and (prefers-color-scheme: light){
	:root {
		--bg: var(--clr-light);
		--bg-hover: var(--clr-dark);
		--bg-active: var(--clr-black);
		--border: var(--clr-silver);

		--bubble: var(--clr-lightgray);
	
		--muted: var(--clr-muted);
	
		--text: var(--clr-dark);
		--text-hover: var(--clr-silver);
		--text-active: var(--clr-white);

		--overlay: var(--clr-darkopacity);
	}

}


	/* Dark Mode */
@media screen and (prefers-color-scheme: dark){
	:root {
		--bg: var(--clr-dark);
		--bg-hover: var(--clr-light);
		--bg-active: var(--clr-white);
		--border: var(--clr-silver);

		--bubble: var(--clr-darkgray);

		--muted: var(--clr-muted);

		--text: var(--clr-white);
		--text-hover: var(--clr-dark);
		--text-active: var(--clr-black);

		--overlay: var(--clr-lightopacity);
	}
}


/* 
 *   ##Device = Desktops
 *     ##Screen = 1281px to higher resolution desktops
 *     */

	@media (min-width: 1281px) {
	  
	  /* CSS */
	  
}

/* 
 *   ##Device = Laptops, Desktops
 *     ##Screen = B/w 1025px to 1280px
 *     */

	@media (min-width: 1025px) and (max-width: 1280px) {
		  
		  /* CSS */
		  
	}

	/* 
	 *   ##Device = Tablets, Ipads (portrait)
	 *     ##Screen = B/w 768px to 1024px
	 *     */

	@media (min-width: 1025px) {
	
	/* Footer */
		
		footer {
			width: 100%;
			background-color: var(--bubble);
			padding: 20px 0px 20px 0px;
			box-shadow: 0px 5px 8px var(--shadow);
			margin-top: 30px;
		}

		.footer {
			padding: 15px 20px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}

		.social_media {
			width: 50%;
			padding: 0px 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			border-right: 1px solid var(--border);
			margin: 10px 0px;
		}

		.footer_links {
			width: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.footer_links > *{
			margin: 10px 0px;
		}

		.copyright {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
		}

		.copyright > * {
			margin: 10px auto;
			padding: 0px 20px;
		}



	/* Apply Page */

		.apply_page {
		}

		.apply {
			margin: 30px 10% 30px 10%;
			padding: 20px 0px!important;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			box-shadow: 0px 5px 8px var(--shadow);
		}

		.apply_wrapper {
			padding: 25px 10%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

		}

		.application {
			width: 49%;
			max-width: 500px;
			display: flex;
			flex-direction: column;
			margin: 0px auto;
		}

		.apply_wrapper .application a {
			align-self: flex-end;
		}
		
		.apply_wrapper .application a > div {
			padding: 10px 30px;
		}

		.apply_wrapper .contact_info {
			width: 49%;
			max-width: 500px;
			padding: 10px 0px;
			margin-bottom: 10px;
			margin: 0px auto;
		}

		.inputwrapper {
			margin-bottom: 10px;
		}

		.google_maps {
			margin: 0px 0px 20px 0px;
			width: 100%;
			height: 300px;
		    }


	/* Service Page */

		.serives_page {
		}

		.services {
			margin: 30px 10% 30px 10%;
			padding: 20px 0px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			box-shadow: 0px 5px 8px var(--shadow);
		}

		.services .display-1 {
			font-size: 6vw;
		}

		.services img {
			width: 100%;
			display: block;
			margin-left: auto;
			margin-right: auto;
			margin-top: 30px;
			margin-bottom: 20px;
			padding: 0px 10%;
			-webkit-filter: ; /* Safari 6.0 - 9.0 */
			filter: ;
		}

		.services .list {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 10px 10%;
			margin-bottom: 15px;
			justify-content: space-between;
			border-bottom: 1px solid var(--border);
		}

		.services .list a {
			width: 300px;
			margin: 5px auto;
			padding: 30px;
		}

		.services > div:last-child {
			padding: 0px 15%;
		}
		.services > div:last-child > a {
			margin: 10px 10px;
			width: 200px;
		}




        /* About Page */

		.about_page {
		}

		.about {
			margin: 30px 10% 30px 10%;
			padding: 20px 0px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			box-shadow: 0px 5px 8px var(--shadow);
		}
		
		.about_page .about > div{
			display: flex;
			flex-direction: row;
			padding: 10px;
		}

		.about_page .about > div > div > p{
			padding: 0px 10px 10px 10px;
		}

		.about_page .about > div > div > p > img {
			float: left;
			margin: 0px 10px;
		}

	/* Home Page */

		.home_page {
			margin-top: 10px;
		}

		.home_page > div:first-child {
			position: absolute;
			z-index: 1;
		}

		.home_page > div:first-child > h1{
			text-shadow: 10px 10px 10px var(--shadow)
		}

		.home_page > div:first-child > h1:first-child{
			font-size: 80px;
			padding: 20px 0px 0px 20px;
		}
		
		.home_page > div:first-child > h1:nth-child(2){
			font-size: 150px;
			padding: 0px 0px 0px 20px;
		}

		.home_page > div:first-child > a {
			margin: 20px 0px 0px 20px;
		}

		.home_page .services ul {
			display: flex;
			flex-direction: column;
			position: relative;
		}

		.home_content {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-evenly;
		}

		.home_content > div {
			margin: 30px 0px 30px 0px;
		}

		.home_content > div:first-child, .home_content .contact {
			width: 100%;
			background-color: var(--bubble);
			padding: 20px 0px 20px 0px;
			box-shadow: 0px 5px 8px var(--shadow);
		}

		.home_content .contact > h1 {
			font-size: 6vw;
		}

		.home_content > div:first-child > h1 {
			font-size: 5vw;
		}

		.home_content .services, .home_content .about, .home_content .calculator, .home_content .blogs {
			margin: 30px 15px 30px 15px;
			padding: 20px 0px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			box-shadow: 0px 5px 8px var(--shadow);
		}

		.home_content .services, .home_content .calculator, .home_content .about {
			width: 30%;
		}
		
		.home_content .blogs {
			flex-direction: row;
			flex-wrap: wrap;
			width: 100%;
		}

		.home_content .blogs h2 {
			width: 100%;
		}

		.home_content .blogs article {
			width: 50%;
		}

		.home_content .services > div {
			padding-top: 20px;
			display: flex;
			flex-direction: row;
		}
		
		.home_content .services > div:first-child > div {
			width: 50%;
		}

		.home_content .services h2 {
			margin-bottom: 10px;
		}

		.home_content .about > div{
			display: flex;
			flex-direction: row;
			padding: 10px;
		}

		.home_content .about > div > p{
			padding: 0px 10px;
		}

		.home_content .portrait {
			background: url(/images/header_logo.png);
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
			width: 50%;
			height: 200px;
		}

		.home_content .calculator > div {
			padding: 10px;
		}

		.home_content .calculator_image {
			background: linear-gradient(var(--shadow-black), var(--shadow-black)), url(/images/calculator.png);
			background-blend-mode: saturation;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			width: 50%;
			height: 150px;
			box-shadow: inset 0px 0px 5px 5px var(--bubble);
		}

		.home_content .article_image {
			background: url(/images/);
			background-color: silver;
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
			width: 100%;
			height: 300px;
		}

		.banner {
			position: relative;
			background: url(/images/banner.jpg);
			box-shadow: 0px 5px 8px var(--shadow);
			width: 100vw;
			height: 400px;
			background-size: cover;
			background-position: center;
			filter: gray; /* IE6-9 */
			-webkit-filter: (1); /* Google Chrome, Safari 6+ & Opera 15+ */
			filter: (1);
		}

		.banner:after {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 65%;
			background: var(--bg);
			opacity: .8;
			transform: skew(45deg);
			box-shadow: 0px 0px 20px var(--bg);
		}

		.banner img {
			display: block;
			width: 100vw;
			height: 400px;
			object-fit: cover;
			filter: gray; /* IE6-9 */
			-webkit-filter: (1); /* Google Chrome, Safari 6+ & Opera 15+ */
			filter: (1);
		}


	/* Header */	
		  
		nav {
			padding-top: 10px;
		}
		  
		.nav_menu {
			width: 100%;
			left: 0;
			top: 0;
			padding: 0px 25px;
			margin-top: 10px;
			background-color: var(--bubble);
			box-shadow: 0px 5px 8px var(--shadow);
			-webkit-transition: .5s ease-in-out;
			-moz-transition: .5s ease-in-out;
			-o-transition: .5s ease-in-out;
			transition: .5s ease-in-out;
		}

		.nav_menu .menu_list {
			display: flex;
			flex-direction: row;
			text-align: center;
			justify-content: flex-start;
			align-items: center;
			margin: 0px 50px;
		}

		.nav_menu a {
			color: var(--text);
			font-size: 15px;
			padding: 10px;
			white-space: nowrap;
			margin: 0px 20px;
		}

		nav > div:first-child {
			position: absolute;
			top: 0;
			left: 0;
		}

		nav > div:nth-child(3) {
			position: absolute;
			top: 50px;
			right: 10px;
			align-items: center;
		}

		nav > div:nth-child(3) > * {
			margin: 0px 10px;
		}

		nav img {
			display: block;
			max-height: 100px;
			height: auto;
			width: auto;
		}

		#nav-icon2 {
			display: none;
		}
	}

	/* 
	 *   ##Device = Tablets, Ipads (landscape)
	 *     ##Screen = B/w 768px to 1024px
	 *     */

	@media (min-width: 768px) and (max-width: 1024px) {
	
	/* Footer */
		
		footer {
			width: 100%;
			background-color: var(--bubble);
			padding: 20px 0px 20px 0px;
			box-shadow: 0px 5px 8px var(--shadow);
			margin-top: 30px;
		}

		.footer {
			padding: 15px 20px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
		}

		.social_media {
			width: 50%;
			padding: 0px 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			border-right: 1px solid var(--border);
		}

		.social_media {
			margin: 10px 0px;
		}

		.footer_links {
			width: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.footer_links > *{
			margin: 10px 0px;
		}

		.copyright {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
		}

		.copyright > * {
			margin: 10px auto;
			padding: 0px 20px;
		}


	/* Apply Page */

		.apply_page {
		}

		.apply {
			margin: 30px 15px 30px 15px;
			padding: 20px 0px!important;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			box-shadow: 0px 5px 8px var(--shadow);
		}

		.apply_wrapper {
			padding: 25px 5%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

		}

		.application {
			width: 49%;
			display: flex;
			flex-direction: column;
		}

		.apply_wrapper .application a {
			align-self: flex-end;
		}
		
		.apply_wrapper .application a > div {
			padding: 10px 30px;
		}

		.apply_wrapper .contact_info {
			width: 49%;
			padding: 10px 0px;
			margin-bottom: 10px;
		}

		.inputwrapper {
			margin-bottom: 10px;
		}

		.google_maps {
			margin: 0px 0px 20px 0px;
			width: 100%;
			height: 300px;
		    }

	/* Service Page */

		.serives_page {
		}

		.services {
			margin: 30px 15px 30px 15px;
			padding: 20px 0px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			box-shadow: 0px 5px 8px var(--shadow);
		}

		.services .display-1 {
			font-size: 8vw;
		}

		.services img {
			width: 100%;
			display: block;
			margin-left: auto;
			margin-right: auto;
			margin-top: 30px;
			margin-bottom: 20px;
			padding: 0px 5%;
			-webkit-filter: ; /* Safari 6.0 - 9.0 */
			filter: ;
		}

		.services .list {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 10px 5%;
			margin-bottom: 15px;
			justify-content: space-between;
			border-bottom: 1px solid var(--border);
		}

		.services .list a {
			width: 200px;
			margin: 5px auto;
			padding: 20px;
		}

		.services > div:last-child > a {
			margin: 10px 10px;
			width: 200px;
		}



        /* About Page */

		.about_page {
		}

		.about {
			margin: 30px 15px 30px 15px;
			padding: 20px 0px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			box-shadow: 0px 5px 8px var(--shadow);
		}
		
		.about_page .about > div{
			display: flex;
			flex-direction: row;
			padding: 10px;
		}

		.about_page .about > div > div > p{
			padding: 0px 10px 10px 10px;
		}

		.about_page .about > div > div > p > img {
			float: left;
			margin: 0px 10px;
		}

	/* Home Page */

		.home_page {
			margin-top: 10px;
		}

		.home_page > div:first-child {
			position: absolute;
			z-index: 1;
		}

		.home_page > div:first-child > h1{
			text-shadow: 10px 10px 10px var(--shadow)
		}

		.home_page > div:first-child > h1:first-child{
			font-size: 7vw;
			padding: 20px 0px 0px 20px;
		}
		
		.home_page > div:first-child > h1:nth-child(2){
			font-size: 15vw;
			padding: 0px 0px 0px 20px;
		}

		.home_page > div:first-child > a {
			margin: 20px 0px 0px 20px;
		}
		
		.home_page .services ul {
			display: flex;
			flex-direction: column;
			position: relative;
		}

		.home_content {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-evenly;
		}

		.home_content > div {
			margin: 30px 0px 30px 0px;
		}

		.home_content > div:first-child, .home_content .contact {
			width: 100%;
			background-color: var(--bubble);
			padding: 20px 0px 20px 0px;
			box-shadow: 0px 5px 8px var(--shadow);
		}

		.home_content .contact > h1 {
			font-size: 9vw;
		}

		.home_content > div:first-child > h1 {
			font-size: 6vw;
		}

		.home_content .services, .home_content .about, .home_content .calculator, .home_content .blogs {
			margin: 30px 15px 30px 15px;
			padding: 20px 0px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			box-shadow: 0px 5px 8px var(--shadow);
		}

		.home_content .services {
			width: 100%;
		}

		.home_content .calculator, .home_content .about {
			width: calc(50% - 30px);
		}
		
		.home_content .blogs {
			flex-direction: row;
			flex-wrap: wrap;
			width: 100%;
		}

		.home_content .blogs h2 {
			width: 100%;
		}

		.home_content .blogs article {
			width: 50%;
		}

		.home_content .services > div {
			padding-top: 20px;
			display: flex;
			flex-direction: row;
		}
		
		.home_content .services > div:first-child > div {
			width: 50%;
		}

		.home_content .services h2 {
			font-size: 5vw;
			margin-bottom: 10px;
		}

		.home_content .about > div{
			display: flex;
			flex-direction: row;
			padding: 10px;
		}

		.home_content .about > div > p{
			padding: 0px 10px;
		}

		.home_content .portrait {
			background: url(/images/header_logo.png);
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
			width: 50%;
			height: 200px;
		}

		.home_content .calculator > div {
			padding: 10px;
		}

		.home_content .calculator_image {
			background: linear-gradient(var(--shadow-black), var(--shadow-black)), url(/images/calculator.png);
			background-blend-mode: saturation;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			width: 50%;
			height: 150px;
			box-shadow: inset 0px 0px 5px 5px var(--bubble);
		}

		.home_content .article_image {
			background: url(/images/);
			background-color: silver;
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
			width: 100%;
			height: 200px;
		}

		.banner {
			position: relative;
			background: url(/images/banner.jpg);
			box-shadow: 0px 5px 8px var(--shadow);
			width: 100vw;
			height: 400px;
			background-size: cover;
			background-position: center;
			filter: gray; /* IE6-9 */
			-webkit-filter: (1); /* Google Chrome, Safari 6+ & Opera 15+ */
			filter: (1);
		}

		.banner:after {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 65%;
			background: var(--bg);
			opacity: .8;
			transform: skew(45deg);
			box-shadow: 0px 0px 20px var(--bg);
		}


	/* Header */	
		nav {
			padding-top: 10px;
		}
		  
		.nav_menu {
			width: 100%;
			left: 0;
			top: 0;
			padding: 0px 25px;
			margin-top: 10px;
			background-color: var(--bubble);
			box-shadow: 0px 5px 8px var(--shadow);
			-webkit-transition: .5s ease-in-out;
			-moz-transition: .5s ease-in-out;
			-o-transition: .5s ease-in-out;
			transition: .5s ease-in-out;
		}

		.nav_menu .menu_list {
			display: flex;
			flex-direction: row;
			text-align: center;
			justify-content: space-between;
			align-items: center;
			margin: 0px 50px;
		}

		.nav_menu a {
			color: var(--text);
			font-size: 15px;
			padding: 10px;
			white-space: nowrap;
		}

		nav > div:first-child {
			position: absolute;
			top: 0;
			left: 0;
		}

		nav > div:nth-child(3) {
			position: absolute;
			top: 10px;
			right: 10px;
			align-items: center;
		}

		nav > div:nth-child(3) > * {
			margin: 0px 10px;
		}

		nav img {
			display: block;
			max-height: 45px;
			height: auto;
			width: auto;
		}

		#nav-icon2 {
			display: none;
		}
		  
	}

	/* 
	 *   ##Device = Most of the Smartphones Mobiles (Portrait)
	 *     ##Screen = B/w 320px to 479px
	 *     */

	@media (min-width: 320px) and (max-width: 767px) {
	
	/* Footer */
		
		footer {
			width: 100%;
			background-color: var(--bubble);
			padding: 20px 0px 20px 0px;
			box-shadow: 0px 5px 8px var(--shadow);
			margin-top: 30px;
		}

		.footer {
			padding: 15px 20px;
			display: flex;
			flex-direction: column;
		}

		.social_media {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
		}

		.social_media {
			margin: 10px 0px;
		}

		.footer_links {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.footer_links > *{
			margin: 10px 0px;
		}

		.copyright {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
		}

		.copyright > * {
			margin: 10px auto;
			padding: 0px 20px;
		}

	/* Apply Page */

		.apply_page {
		}

		.apply {
			margin: 30px 15px 30px 15px;
			padding: 20px 0px!important;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			box-shadow: 0px 5px 8px var(--shadow);
		}

		.apply_wrapper {
			padding: 25px 10%;
			display: flex;
			flex-direction: column;

		}

		.application {
			display: flex;
			flex-direction: column;
		}

		.apply_wrapper .application a {
			align-self: flex-end;
		}
		
		.apply_wrapper .application a > div {
			padding: 10px 30px;
		}

		.apply_wrapper .contact_info {
			padding: 10px 0px;
			margin-bottom: 10px;
		}

		.inputwrapper {
			margin-bottom: 10px;
		}

		.google_maps {
			margin: 0px 0px 20px 0px;
			width: 100%;
			height: 300px;
		    }

	/* Service Page */

		.serives_page {
		}

		.services {
			margin: 30px 15px 30px 15px;
			padding: 20px 0px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			box-shadow: 0px 5px 8px var(--shadow);
		}
		
		.services .display-1 {
			font-size: 8vw;
		}

		.services img {
			width: 100%;
			display: block;
			margin-left: auto;
			margin-right: auto;
			margin-top: 30px;
			margin-bottom: 20px;
			padding: 0px 3%;
			-webkit-filter: ; /* Safari 6.0 - 9.0 */
			filter: ;
		}

		.services .list {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 10px;
			margin-bottom: 15px;
			justify-content: space-between;
			border-bottom: 1px solid var(--border);
		}

		.services .list a {
			width: 200px;
			margin: 5px auto;
			padding: 10px;
		}

		.services > div:last-child > a {
			margin: 10px 10px;
			width: 200px;
		}

        /* About Page */

		.about_page {
		}

		.about {
			margin: 30px 15px 30px 15px;
			padding: 20px 0px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			box-shadow: 0px 5px 8px var(--shadow);
		}
		
		.about_page .about > div{
			display: flex;
			flex-direction: row;
			padding: 10px;
		}

		.about_page .about > div > div > p{
			padding: 0px 10px 10px 10px;
		}

		.about_page .about > div > div > p > img {
			float: left;
			margin: 0px 10px;
		}

	/* Home Page */

		.home_page {
			margin-top: 10px;
		}

		.home_page > div:first-child {
			position: absolute;
			z-index: 1;
		}

		.home_page > div:first-child > h1 {
		}

		.home_page > div:first-child > h1:first-child{
			font-size: 7vw;
			padding: 20px 0px 0px 20px;
		}
		
		.home_page > div:first-child > h1:nth-child(2){
			font-size: 15vw;
			padding: 0px 0px 0px 20px;
		}

		.home_page > div:first-child > a {
			margin: 20px 0px 0px 20px;
		}

		.home_page .services ul {
			display: flex;
			flex-direction: column;
			position: relative;
		}

		.home_content > div {
			margin: 30px 0px 30px 0px;
		}

		.home_content > div:first-child, .home_content .contact {
			width: 100%;
			background-color: var(--bubble);
			padding: 20px 0px 20px 0px;
			box-shadow: 0px 5px 8px var(--shadow);
		}

		.home_content .contact > h1 {
			font-size: 9vw;
		}

		.home_content > div:first-child > h1 {
			font-size: 8vw;
		}

		.home_content .services, .home_content .about, .home_content .calculator, .home_content .blogs {
			margin: 30px 15px 30px 15px;
			padding: 20px 0px;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			box-shadow: 0px 5px 8px var(--shadow);
		}
		
		.home_content .services > div {
			padding-top: 20px;
			display: flex;
			flex-direction: row;
		}
		
		.home_content .services > div:first-child > div {
			width: 50%;
		}

		.home_content .services h2 {
			font-size: 5vw;
			margin-bottom: 10px;
		}

		.home_content .about > div{
			display: flex;
			flex-direction: row;
			padding: 10px;
		}

		.home_content .about > div > p{
			padding: 0px 10px;
		}

		.home_content .portrait {
			background: url(/images/header_logo.png);
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
			width: 50%;
			height: 200px;
		}

		.home_content .calculator > div {
			padding: 10px;
		}

		.home_content .calculator_image {
			background: linear-gradient(var(--shadow-black), var(--shadow-black)), url(/images/calculator.png);
			background-blend-mode: saturation;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			width: 50%;
			height: 150px;
			box-shadow: inset 0px 0px 5px 5px var(--bubble);
		}

		.home_content .article_image {
			background: url(/images/);
			background-color: silver;
			background-position: center;
			background-size: contain;
			background-repeat: no-repeat;
			width: 100%;
			height: 100px;
		}

		.banner {
			position: relative;
			background: url(/images/banner.jpg);
			box-shadow: 0px 5px 8px var(--shadow);
			overflow-x: hidden;
			width: 100vw;
			height: 300px;
			background-size: cover;
			background-position: center;
			filter: gray; /* IE6-9 */
			-webkit-filter: (1); /* Google Chrome, Safari 6+ & Opera 15+ */
			filter: (1);
		}

		.banner:after {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			height: 100%;
			width: 65%;
			background: var(--bg);
			opacity: .8;
			transform: skew(45deg);
			box-shadow: 0px 0px 20px var(--bg);
		}


	/* Header */	
		nav {
			padding-top: 10px;
		}
		nav > div:first-child {
			position: absolute;
			top: 0;
			left: 0;
		}

		nav > div:nth-child(3) {
			display: -webkit-flex;
			justify-content: start;
			-webkit-justify-content: start;
			margin: 10px;
		}

		nav > div:nth-child(3) > div:nth-child(1) {
			order: 2;
		}
		nav > div:nth-child(3) > div:nth-child(2) {
			order: 1;
		}

		nav > div:nth-child(3) > div {
			margin: 0px 0px 0px 10px;
		}

		.nav_menu {
			display: none;
			width: 100%;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			padding: 70px 10px 10px 10px;
			background: var(--bubble);
			opacity: .9;
			z-index: 2;
		}

		.nav_menu.open #nav-icon2 {
		}

		.nav_menu .menu_list {
			display: flex;
			flex-direction: column;
			text-align: center;
			justify-content: center;
			align-items: center;
		}

		.nav_menu a div {
			height: 0;
		}

		.nav_menu a {
			color: var(--text);
			font-size: 20px;
			padding: 20px;
		}

		nav img {
			display: block;
			max-height: 45px;
			height: auto;
			width: auto;
		}

		#nav-icon2 {
			width: 60px;
			height: 45px;
			position: fixed;
			right: 10px;
			top: 10px;
			z-index: 3;
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
			-webkit-transition: .5s ease-in-out;
			-moz-transition: .5s ease-in-out;
			-o-transition: .5s ease-in-out;
			transition: .5s ease-in-out;
			cursor: pointer;
		}

		#nav-icon2 span {
			display: block;
			position: absolute;
			height: 9px;
			width: 50%;
			background: var(--bg-hover);
			opacity: 1;
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
			-webkit-transition: .25s ease-in-out;
			-moz-transition: .25s ease-in-out;
			-o-transition: .25s ease-in-out;
			transition: .25s ease-in-out;
		}

		#nav-icon2 span:nth-child(even) {
			left: 50%;
			border-radius: 0 9px 9px 0;
		}

		#nav-icon2 span:nth-child(odd) {
			left:0px;
			border-radius: 9px 0 0 9px;
		}

		#nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) {
			top: 0px;
		}

		#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {
			top: 18px;
		}

		#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
			top: 36px;
		}

		#nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) {
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			  transform: rotate(45deg);
		}

		#nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5) {
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			-o-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}

		#nav-icon2.open span:nth-child(1) {
			left: 5px;
			top: 7px;
		}

		#nav-icon2.open span:nth-child(2) {
			left: calc(50% - 5px);
			top: 7px;
		}

		#nav-icon2.open span:nth-child(3) {
			left: -50%;
			opacity: 0;
		}

		#nav-icon2.open span:nth-child(4) {
			left: 100%;
			opacity: 0;
		}

		#nav-icon2.open span:nth-child(5) {
			left: 5px;
			top: 29px;
		}

		#nav-icon2.open span:nth-child(6) {
			left: calc(50% - 5px);
			top: 29px;
		}
		  
		  /* CSS */
		  
	}

	.nav_menu a .selected {
		border-bottom: 2px solid;
		border-color: var(--text);
	}





/*  Temporary Css */
	/*
		#nav-icon2 {
			width: 60px;
			height: 45px;
			position: relative;
			margin: 50px auto;
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
			-webkit-transition: .5s ease-in-out;
			-moz-transition: .5s ease-in-out;
			-o-transition: .5s ease-in-out;
			transition: .5s ease-in-out;
			cursor: pointer;
		}

		#nav-icon2 span {
			display: block;
			position: absolute;
			height: 9px;
			width: 50%;
			background: var(--bg-hover);
			opacity: 1;
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
			-webkit-transition: .25s ease-in-out;
			-moz-transition: .25s ease-in-out;
			-o-transition: .25s ease-in-out;
			transition: .25s ease-in-out;
		}

		#nav-icon2 span:nth-child(even) {
			left: 50%;
			border-radius: 0 9px 9px 0;
		}

		#nav-icon2 span:nth-child(odd) {
			left:0px;
			border-radius: 9px 0 0 9px;
		}

		#nav-icon2 span:nth-child(1), #nav-icon2 span:nth-child(2) {
			top: 0px;
		}

		#nav-icon2 span:nth-child(3), #nav-icon2 span:nth-child(4) {
			top: 18px;
		}

		#nav-icon2 span:nth-child(5), #nav-icon2 span:nth-child(6) {
			top: 36px;
		}

		#nav-icon2.open span:nth-child(1),#nav-icon2.open span:nth-child(6) {
			-webkit-transform: rotate(45deg);
			-moz-transform: rotate(45deg);
			-o-transform: rotate(45deg);
			  transform: rotate(45deg);
		}

		#nav-icon2.open span:nth-child(2),#nav-icon2.open span:nth-child(5) {
			-webkit-transform: rotate(-45deg);
			-moz-transform: rotate(-45deg);
			-o-transform: rotate(-45deg);
			transform: rotate(-45deg);
		}

		#nav-icon2.open span:nth-child(1) {
			left: 5px;
			top: 7px;
		}

		#nav-icon2.open span:nth-child(2) {
			left: calc(50% - 5px);
			top: 7px;
		}

		#nav-icon2.open span:nth-child(3) {
			left: -50%;
			opacity: 0;
		}

		#nav-icon2.open span:nth-child(4) {
			left: 100%;
			opacity: 0;
		}

		#nav-icon2.open span:nth-child(5) {
			left: 5px;
			top: 29px;
		}

		#nav-icon2.open span:nth-child(6) {
			left: calc(50% - 5px);
			top: 29px;
		}
		*/

/* --------    General ------------*/

html {
	height: 100%;
        margin: 0;
        padding: 0;
        color: var(--text);
        background-color: var(--bg);
        font-size: 16px;
        line-height: 1.5;
        font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
	-webkit-box-sizing: border-box!important; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

body {
	height: 100%;
        margin: 0;
        padding: 0;
        color: var(--text);
        background-color: var(--bg);
        font-size: 16px;
        line-height: 1.5;
        font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
	-webkit-box-sizing: border-box!important; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
*, *:before, *:after {
  box-sizing: inherit;
}

a {
	color: var(--text);
}

a:hover {
	position: relative;
	left: -5px;
	top: -2px;
	color: var(--text);
	text-decoration: none;
	text-shadow: 10px 10px 10px var(--shadow-black);
}

.noscroll {
	overflow: hidden;
}

textarea {
}

p, h1, h2, h3, h4, h5 {
        margin: 0;
}

p > a {
	font-weight: bold;
	font-size: large;
}

h4 {
	margin-bottom: 10px;
}

.main_body {
        width: 100%;
        height: 100vh;
	overflow: hidden;
}

.text_shadow {
	text-shadow: 10px 10px 10px var(--shadow);
}

.box_shadow {
	box-shadow: 0px 5px 8px var(--shadow);
}

.load_wrapper{
	display: none;
    width:200px;
    height:60px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    z-index: 4;
}
.circle{
    width:20px;
    height:20px;
    position: absolute;
    border-radius: 50%;
    background-color: var(--text);
    left:15%;
    transform-origin: 50%;
    animation: circle .5s alternate infinite ease;
}

@keyframes circle{
    0%{
        top:60px;
        height:5px;
        border-radius: 50px 50px 25px 25px;
        transform: scaleX(1.7);
    }
    40%{
        height:20px;
        border-radius: 50%;
        transform: scaleX(1);
    }
    100%{
        top:0%;
    }
}
.circle:nth-child(2){
    left:45%;
    animation-delay: .2s;
}
.circle:nth-child(3){
    left:auto;
    right:15%;
    animation-delay: .3s;
}
.shadow{
    width:20px;
    height:4px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5);
    position: absolute;
    top:62px;
    transform-origin: 50%;
    z-index: -1;
    left:15%;
    filter: blur(1px);
    animation: shadow .5s alternate infinite ease;
}

@keyframes shadow{
    0%{
        transform: scaleX(1.5);
    }
    40%{
        transform: scaleX(1);
        opacity: .7;
    }
    100%{
        transform: scaleX(.2);
        opacity: .4;
    }
}
.shadow:nth-child(4){
    left: 45%;
    animation-delay: .2s
}
.shadow:nth-child(5){
    left:auto;
    right:15%;
    animation-delay: .3s;
}
.load_wrapper span{
    position: absolute;
    top:75px;
    font-size: 20px;
    letter-spacing: 12px;
    color: var(--text);
    left:15%;
}

.full_height {
	height: 100%;
}

.mybtn {
	font-size: 14px;
	padding: 6px 12px;
	margin-bottom: 0;
	display: inline-block;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
}

.mybtn:hover {
	position: relative;
	left: -3px;
	top: -1px;
	box-shadow: 10px 10px 10px var(--shadow-black);
}

.mybtn:active {
	position: relative;
	left: 1px;
	top: 1px;
	box-shadow: 10px 10px 10px var(--shadow-black);
}


.overlay, .login_overlay {
        position: fixed!important;
        width: 100vw!important;
        height: 100vh!important;
	top: 0!important;
	left: 0!important;
        background-color: var(--overlay)!important;
        z-index: 1!important;
        display: none;
}

.bubble_wrap {
        background-color: var(--bubble);
        padding: 30px 10px;
        border-radius: 25px;
}

.flex_column {
        display: flex;
        flex-direction: column;
}

.flex_row {
        display: flex;
        flex-direction: row;
}

.center_content {
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
}

.inputwrapper {
        display: flex;
        width: auto;
        padding: 5px;
        border-bottom: 1px solid;
        border-color: var(--border);
        background-color:transparent;
        outline: none;
        text-align: center;
        align-items: center;

}

.border_full {
	border: 1px solid;
	border-color: var(--border);
}

.border_left {
	border-left: 1px solid;
	border-color: var(--border);
}

.border_right {
	border-right: 1px solid;
	border-color: var(--border);
}

.border_bottom {
	border-bottom: 2px solid;
	border-color: var(--text);
}

.padding_5 {
	padding: 5px;
}

.padding_10 {
	padding: 10px;
}

.padding_20 {
	padding: 20px;
}
.justifybetween {
	justify-content: space-between;
	display: flex;
	flex-direction: row;
	width: 100%;
	align-items: center;
}

.success, .failure {
	display: none;
	position: fixed;
	z-index: 4;
	background-color: var(--overlay);
	border-radius: 25%;
	padding: 30px;
	opacity: ;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.failurecheck {
	color: var(--clr-red);
}

.successcheck {
	color: var(--clr-green);
}

.incorrectinput {
	background: var(--clr-darkred)!important;
}

.box_hover:hover {
        cursor: pointer;
	box-shadow: 0px 5px 10px 10px var(--shadow);
}

.text_hover:hover {
        cursor: pointer;
	text-shadow: 10px 10px 10px var(--shadow-black);
}

.basic_hover:hover, .clientfilters li:hover, .clientul li:hover, .clientdetails tr:hover {
        cursor: pointer;
        background-color: var(--bg-hover);
        color: var(--text-hover);
}

.basic_active:active {
        padding-top: 2px;
        background-color: var(--bg-active);
        color: var(--text-active);
}

.d_none {
	display: none;
}

input, select, textarea {
        width: 100%;
        height: 26px;
	margin: 0;
        border:none;
        background-color: transparent;
        color: var(--text);
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        outline: none;
         -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
}

textarea {
	height: auto;
}

label {
	color: var(--muted);
	margin: 0;
	margin-right: 5px;
}

input[type="date"] {
        position: relative;
}


/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
input[type="date"]::-webkit-calendar-picker-indicator {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: auto;
        color: transparent;
        background: transparent;
}

/* adjust increase/decrease button */
input[type="date"]::-webkit-inner-spin-button {
        z-index: 1;
}

/* adjust clear button */
input[type="date"]::-webkit-clear-button {
        z-index: 1;
}

table {
        width: 100%;
        text-transform: capitalize;
	white-space: normal;
}

th {
        background-color: var(--muted);
        color: black;
}

th, td {
        padding: 10px;
        border-bottom: 1px dotted;
        border-color: var(--border);
        width: %;
        font-size: 0.75em;
        text-transform: capitalize;
}

.fa-times:hover, .fa-paper-plane:hover {
	cursor: pointer;
}

/* --------    *************   ------------*/

/* ----------------------Navbar------------------------- */


.searchbar {
	padding: 5px;
	border: 1px solid;
	border-color: var(--border);
	background-color:transparent;
	-webkit-box-shadow: 5px rgba(106, 129, 148, 0.5);
	-moz-box-shadow: 5px rgba(106, 129, 148, 0.5);;
	box-shadow: 5px rgba(106, 129, 148, 0.5);;
	outline: none;
}

.searchbar .fa-search, .clientsearch .fa-search {
	color: var(--muted);

}

.searchbar input, .clientsearch input {
	width: 12vw;
	border:none;
	background-color: transparent;
	color: var(--text);
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	outline: none;
	 -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
}

.searchbar input:focus {
	width: 40vw;
	 -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
}

.brgmenu {
}
.brgmenu:active {
	color: var(--bg-active);
}

/* ---------------------------------------------------------*/