ss {
				font-family: 'Roboto Flex', sans-serif;

			}
			:root {
			  --main-color: #1C4587;
			  --main-accent: brown;
			}

			body {
				height: 100vh;font-family: 'Roboto Flex', sans-serif;overflow-x: hidden;
			}

			.no-padding {
				padding: 0px !important;
			}


			/*sidebar	*/

			.off-canvas {height:auto}

			.sidebar-container {
				padding: 20px;
			}


			.sidenav .nav-item a {
				font-family: 'Roboto Mono', monospace;
			  font-size: 20px;
    		padding: 5px;
				background: linear-gradient(to right, #ffffff 0%, #ffffff 100%);
				background-position: 0 100%;
				background-repeat: repeat-y;
				background-size: 0px 0px;
				color: white;
				text-decoration: none;
				transition: all .3s ease-in-out;
			}

			.sidebar-container h3{
				font-family: 'Roboto Mono', monospace;
			}

			.nav .nav-item a:focus, .nav .nav-item a:hover,.nav .nav-item.active>a:focus, .nav .nav-item.active>a:hover{
    		color: black;
    		font-weight:bold;
			}

			.sidenav li{cursor: pointer;margin-top: .6rem;}

			.sidenav li:hover > a:first-child,.sidenav li:focus > a:first-child,.sidenav li > a:first-child:focus,.sidenav  li.active > a:first-child {
				background-size: 100% 4px;
				color: black;
			}

			/*content	*/

			.off-canvas-content {
				-ms-flex: 1 1 auto;
				flex: 1 1 auto;
				width: 100vw;
			}

			@media (max-width: 960px) {
				.off-canvas .off-canvas-content {
					width: 100%;
				}
			}

			.off-canvas .off-canvas-content {
				padding: 0;
		    overflow-y: auto;
		    height: 100vh;
		    display: block;
			}
			/*container	*/

			.off-canvas-content .container {
				max-width: 1000px;
				padding: 0 10px !important;
				margin: 20px auto;
			}

			@media (min-width: 961px) {
				.off-canvas-content .container,
				.main-navbar {
					padding: 0px 2rem !important;
				}
			}
			/*off-canvas-btn	*/
			.off-canvas .off-canvas-overlay {
		    background: var(--main-color);
				filter: opacity(0.3);
		    backdrop-filter: blur(3px);

			}


			.off-canvas-btn {
				background: var(--main-color);
				color: white !important;
				font-size: 18px;
				padding: 3px 5px;
				display: flex;
				align-items: center;
				align-content: center;
				width: fit-content;
				vertical-align: middle;
			}

			.off-canvas-btn svg {
				color: white;
				width: 18px;
				margin-right: 5px;
			}

			.off-canvas-btn:hover {
				text-decoration: none;
			}

			@media (min-width: 961px) {
				.off-canvas-btn {
					display: none;
				}
			}

			.off-canvas .off-canvas-sidebar {
				background: var(--main-color);
				color: white;
				overflow-y: auto;
    		height: 100vh;
			}
			/*navbar	*/


			.main-navbar {
				max-width:1000px;
				padding: 10px;
				justify-content: center;
				color: var(--main-color);
				margin: 20px auto;
				font-family: 'Roboto Mono', monospace;
			}

			.navbar-logo svg{max-height: 40px;filter: brightness(0.6);}

.navbar-logo svg path{fill:var(--main-color);}

			.main-navbar a {
				overflow: hidden;
				margin-right: 10px;
				text-transform: uppercase;
				color: var(--main-color);
				font-size: 19px;
			}

			.main-navbar .navbar-section a {
				background: linear-gradient(to right, var(--main-color) 0%, var(--main-color) 100%);
				background-position: 0 100%;
				background-repeat: repeat-y;
				background-size: 0px 0px;
				color: var(--main-color);
				text-decoration: none;
				transition: all .3s ease-in-out;
				padding:5px;
				display: flex;
				filter: brightness(0.6);
			}

			.main-navbar .navbar-section a:nth-child(2){
				margin-left:10px;
			}

			.navbar-logo a{margin-right:0px;padding:0px !important;border-radius: 100%;}

			.main-navbar .navbar-section a:hover,.main-navbar .navbar-section a:focus,.main-navbar .navbar-section a.active {
				background-size: 100% 4px;
				color: white;
				filter: none;
			}

			.main-navbar a:hover svg,
			.main-navbar a:focus svg {
				transform: translateX(-10px);
			}

			.main-navbar a svg {
				-webkit-transition: transform 0.7s 0s ease;
				-moz-transition: transform 0.7s 0s ease;
				-o-transition: transform 0.7s 0s ease;
				transition: transform 0.7s 0s ease;
			}

			@media (max-width: 700px) {
				.main-navbar{
					flex-wrap: wrap;
    			flex-direction: column-reverse;
				}
				.navbar-section{
					    justify-content: center !important;
					    margin-bottom: 10px;
				}
				.off-canvas-btn{
					    margin: 0px auto;
					    margin-right: auto !important;
				}
			}



		/* skill bar */
			.bar .bar-item {background: #1c4587;}

/* button row section */
.button-row{margin:10px 0px;display:block;width:100%;}


/* experience card */
	summary{cursor: pointer;}
.exper-box{font-size:19px;cursor:default;margin-bottom:20px;}
.exper-box:last-child(){margin-bottom:0px;}
.exper-box-title{font-size:0.9em;display:flex;}
.exper-box-subtitle{font-size:0.8em;display:block;}
.exper-box-details,.accordion-body{font-size:0.7em;display:block;}

.exper-box details[open] .accordion-body{background: #e5e5e5;padding: 10px 15px;}
.accordion-body{font-style:italic;}
.exper-box .accordion-header{font-size:0.7em;padding: 0px; color: #5e5e5e;opacity:0.6;transition: opacity .3s ease-in-out;}

.exper-box:hover .accordion-header,.exper-box:focus .accordion-header,.exper-box details[open] .accordion-header{opacity: 1}

.exper-box-inner{display:flex;flex-wrap:wrap;justify-content: space-between;}
.exper-box-inner .col:nth-child(1) {}
.exper-box-inner .col:nth-child(2) {text-align: right;}

.exper-box .accordion summary{position:relative;}
.exper-box .accordion summary span{position: relative;
    z-index: 9;
    background: whitesmoke;transition: all .5s ease-in-out;}

.exper-box:hover .accordion summary span,.exper-box:focus .accordion summary span,.exper-box details[open] summary span{background: #e5e5e5;
    padding-left: 5px;  }

.exper-box .accordion summary:after{content: '';width:100%;right:0px;top: 50%;position:absolute;height: 0.5px;background: #d8d9dc;transition: all .3s ease-in-out;}


.exper-box:hover .accordion summary:after,.exper-box:focus .accordion summary:after,.exper-box details[open] .accordion summary:after{background: #adadad;}

.exper-box details .accordion .read-more-arrow{transition: all .3s ease-in-out;}
.exper-box details[open] .accordion-header .read-more-arrow{transform: rotate(180deg);}

.read-more-arrow{width: 18px;}
.accordion-header span{display: inline-flex;}

.exper-box:not(.without-desc) details {
  display:none;

}
.exper-box:not(.without-desc) {padding-bottom:0.7em;border-bottom:1px solid #d8d9dc;}

.exper-box-title a{    display: inline-flex;
    align-items: center;
    margin-left: 5px;padding: 3px;transition: background .3s ease-in-out;}
		.exper-box:hover .exper-box-title  a,.exper-box:focus .exper-box-title  a{background: #e5e5e5;}
.exper-box-title a svg{width:18px;}


.exper-box-title a svg path{fill: #afafaf;transition: all .3s ease-in-out;}
.exper-box:hover .exper-box-title  a svg path,.exper-box:focus .exper-box-title  a svg path{fill: #3b4351;}
/* portfolio single page */

.port-title{margin-bottom:5px;}
.port-title-details{font-size:16px;letter-spacing: -1px;font-family: 'Roboto Mono', monospace;}
		.view-head-head{
			display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;
	    margin-bottom: 20px;
    }
		.view-head-title{}
    .view-head-title h1{    margin-bottom: 0px;font-size: 1.5rem;}
    .view-head-title span{color: #4e4e4e;}
		.view-head-tag{}


	.infochip {
	    align-items: center;
	    background: #d8d9dc;
	    color: #4e4e4e  !important;
	    border-radius: 0px;
	    display: -ms-inline-flexbox;
	    display: inline-flex;
	    -ms-flex-align: center;
	    font-size: 90%;
	    margin: .1rem;
	    overflow: hidden;
	    padding: .2rem .4rem;
	    text-decoration: none !important;
	    vertical-align: middle;

	}

	.infochip i {
	    margin-right: 5px;
	}

	a.infochip{
		color: #1c4587 !important;
		transition: all .3s ease-in-out;
	}
.infoport{margin-top:10px;}

.infoport-link{font-size: 95%;display:inline-flex;width:fit-content;padding: 0.1em 0.5em;border: 1px solid rgb(0 0 0 / 16%); transition: border .3s ease-in-out;
}
.infoport-link:hover,.infoport-link:focus{border: 1px solid #1c4587}

.infoport-link svg{    width: 18px;}

	a.infochip:hover,a.infochip:focus{
		background-color: rgb(0 0 0 / 23%);
	}
	.links-row{font-family: 'Roboto Mono', monospace;margin-bottom:10px;letter-spacing: -1px;display: flex;
	    align-items: center;}
.links-row-header{margin-right:8px;    font-size: 14px;
    font-weight: bold;}

	.links-row-container{    display: inline-flex;
	    flex-wrap: wrap;    gap: 5px;}

	.view-card{overflow: hidden;position:relative;margin-bottom:20px;border: .2rem solid #d8d9dc;}
	.view-card:last-child{margin-bottom:0px;}

	.card-title-top{
		font-family: 'Roboto Mono', monospace;
			text-transform: uppercase;
		    font-size: 1.6rem;
		    line-height: 0.8em;
		    color:var(--main-color);
				opacity: 0.4;
		    margin-bottom: -2px;
		    margin-left: -2px;
				filter: brightness(0.9);
	}


	.card{background: #f5f5f5;}
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
		.card{
			background: rgb(245 245 245 / 0%);
		    backdrop-filter: blur(3px);
				-webkit-backdrop-filter: blur(3px);
		}
	}


	.view-card .card-body p{margin: 10px 0px;}
	.view-card .card-body dl{margin:0px;margin-bottom:30px;}

	.card-back-title{
		text-transform: uppercase;
    font-size: 3rem;
    font-weight: 400;
    opacity: 0.1;
    position: absolute;
    bottom: -1.2rem;
    right: 1rem;
    line-height: inherit;
    margin-bottom: auto;
    -webkit-user-select: none; /* Safari */
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* IE10+/Edge */
		user-select: none; /* Standard */
	}


/* portfolio gallery grid */
		.gallery img{width:100%;height:100%;object-fit: cover}

		.grid-gallery {grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));display: grid;grid-gap: 3px;}
		@media screen and (max-width: 750px) {
			.grid-gallery {grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));}
		}

		@media screen and (max-width: 450px) {
			.grid-gallery {grid-template-columns: auto auto;}
		}

		.grid-gallery-50 {grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));display: grid;grid-gap: 3px;}
		@media screen and (max-width: 993px) {.grid-gallery-50 {grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));}}

		.grid-gallery-49 {grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));display: grid;grid-gap: 3px;}
		@media screen and (max-width: 993px) {.grid-gallery-49 {grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}}


		.gallery a.gallery-item-vid{position: relative}
		.gallery a.gallery-item-vid::before{
			content: '';
			background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAABgAAAAYADwa0LPAAACqElEQVRo3u2ZO28TQRSFz+QlxYQmgQI5UGILiSooiDL5DygIJGQaUCT4ETSBPkEhUICQ0tCk4NEgpQc5DUWU0BEskMijwYi44aOYtWTstbO7M7vLw6dc715/587VzJ0Zqa++/m8ZH0GAQUnTkmYkTUkqSzolaSx4pS7ps6RtSRuS1iW9M8b8zNU9cBq4D9SIr0/APWAyD/CTwArQSADergawDJzICv4qsO8BvF17wJU0wYeBxymAt+shMOwbvgC8zgC+qVdAwWfms4Rv6g0w4sNAFmXTTcuu8NdyhG9qrhej6QE/IWlLUjbTW3cdSCoZY/bCfhzo8eHCHwAvSeOS7sb6Apgk+SJ1Hah7LqMGcCbOCNyWlGgGMMY8k+2LNj2Owoik+ajZH8D2KYnUEmcU2274Ug3bNB5p4JLLv4TEq+CvpKajlNCMx6GXMeap/JXUbBQDF3waCExsBnEfOYaaimLgrG8DgYkfxphbkm5I+p4wTOnIN3BslaNQAGXgfYLwu1FGYCwCg+tobEm6qPgldTyKgb9KQyHP6rLLd2oCypKeSzof89Nv7Q/CRuBLyvAVSdUE8KFsYQY+pAQ+CqxIeiLpWMIw21EMVFOAL0t6K+mmY6gOtjAD657hK0peMvHZsM3cjus6gP9m7iPQkfCOB8Fx36pj1s8FWXctmVatRj6KxG1D47P7bOoQKMbN4rJnCBctduPstakfl5228t4X70sqx97UG2MOJN3JGV6S5rvBRxL2rDIvLTnbBwaBtRzgXwJDzgYCEwXsgWtWeoGvw90WE8NkMzMtect8FyNzwG4K4F+By6mBt5mYAB5gFxhXHQKL2Gk7WwFF7EVdkt5pB1gg7grbJl/XrAOyxyazskcfJUlF/X7NWpPda1Rlu8qN3K9Z++rrH9AvUnlxV90X444AAAAldEVYdGRhdGU6Y3JlYXRlADIwMjEtMDgtMTBUMTc6MDU6MjQrMDA6MDAljNvwAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIxLTA4LTEwVDE3OjA1OjI0KzAwOjAwVNFjTAAAAABJRU5ErkJggg==);
			filter: drop-shadow(0px 0px 10px black);
			position: absolute;
			width: 40px;
			height: 40px;
			background-size: cover;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) scale(1);
			z-index: 1;
			-webkit-transition: .3s ease-in-out;transition:  .3s ease-in-out;
		}

		.gallery a.gallery-item-link{position: relative}
		.gallery a.gallery-item-link::before{
			content: '';
			background: url(data:image/png;base64,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);
			filter: drop-shadow(0px 0px 10px black);
			position: absolute;
			width: 40px;
			height: 40px;
			background-size: cover;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%) scale(1);
			z-index: 1;
			-webkit-transition: .3s ease-in-out;transition:  .3s ease-in-out;
		}


/* iframe portfolio single */

.embed-video {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
  margin-bottom:10px;
}

/* Then style the iframe to fit in the container div with full height and width */
.embed-video iframe,.embed-video video {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}



/* single image portfolio single */

.view-card .card-body .single-image {
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
	object-fit: contain;
	max-height:500px;
}
	.single-image-zoom{cursor: zoom-in;font-size:0px;}
	.figure-caption{margin:10px 0px;}

@supports not (aspect-ratio: 1 / 1) {
	.view-card .single-image {
			width: 100% !important;
			min-height: 500px;
			object-fit: contain;
			border: none;
			overflow: hidden;
	}
}

	/* portfolio with slider */
		.single-carousel {
		  height: 445px;margin-bottom: 20px;
		}
	.carousel-cell{width:100%;margin-right: 10px;    height: 100%;}
	.carousel-cell img{width:100%;margin:0px auto;object-fit:contain;height: 100%;}
	.flickity-button {
	  background: hsl(0deg 0% 100% / 28%);
	}



	/* portfolio box grid */

	.box-port-content{

	}

	.grid-box-portfolio {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
		justify-content: space-between;
		grid-gap: 10px;
		margin:0px 10px;
	}

	.grid-box-portfolio .box-cont-overlay::before{    background:rgb(0 0 0 / 30%);backdrop-filter: blur(0.5px);}

	@media screen and (max-width: 1200px) {
		.grid-box-portfolio{grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}
	}

	/* collection  */
	.grid-box-collection {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
		justify-content: space-between;
		grid-gap: .8rem;
	}

	/* related card */

	.box-rel-content{
		max-width: 400px;
	}

	.grid-box-related {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		justify-content: space-between;
		grid-gap: .8rem;
	}




	/* content card */
	.box-content{
		position:relative;
		line-height: 0px;
		overflow: hidden;
	}

	.box-content img{
		width: 100%;
    transition: transform 0.5s ease-in-out;
    max-height: 280px;
    object-fit: cover;
	}

	@media screen and (max-width: 450px) {
		.box-content img{max-height: 110px;}
	}

	.box-content svg{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		width: 30px;
		height: auto;
		color: #fff;
		z-index: 3;
		opacity:1;
		transition: opacity 0.3s ease-in-out;
		-webkit-transition: opacity 0.3s ease-in-out;
		-moz-transition: opacity 0.3s ease-in-out;
		-ms-transition: opacity 0.3s ease-in-out;
		-o-transition: opacity 0.3s ease-in-out;
	}
	.box-content span {
		/* letter-spacing: -0.5px; */
			color: white;
			position: absolute;
			bottom: 0px;
			left: 50%;
			transform: translate(-50%, 0px);
			width: 100%;
			z-index: 3;
			text-align: center;
			padding: 5px 5px;
			line-height: initial;
			background: rgb(0 0 0 / 58%);
			transition: background 0.2s ease-in-out;
			-webkit-transition: background 0.2s ease-in-out;
			-moz-transition: background 0.2s ease-in-out;
			-ms-transition: background 0.2s ease-in-out;
			-o-transition: background 0.2s ease-in-out;
	}

		.box-cont-overlay {
				position: absolute;
				height: 100%;
				width: 100%;
				bottom: 0px;
				left: 0px;
				display: flex;
		}

		.box-cont-overlay::before {
			position: absolute;
			content: "";
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background:rgb(28 69 135 / 70%);
			transition: opacity 0.3s ease-in-out;
			-webkit-transition: opacity 0.3s ease-in-out;
			-moz-transition: opacity 0.3s ease-in-out;
			-ms-transition: opacity 0.3s ease-in-out;
			-o-transition: opacity 0.3s ease-in-out;
			opacity: 1;
			z-index: 2;
		}


		.box-content:hover .box-cont-overlay::before,.box-cont-content:focus .box-cont-overlay::before  {
			opacity: 0;
			backdrop-filter: blur(0px);
		}

		.box-content:hover img,.box-cont-content:focus img  {
			transform: scale(1.05);
			transition: transform 0.5s ease-in-out;
		}

		.box-content:hover svg,.box-cont-content:focus svg  {
			opacity: 0;
		}

		.box-content:hover span,.box-cont-content:focus span  {
			background: rgb(0 0 0 / 88%);

		}