/* <weight>: Use a value from 100 to 900 
<uniquifier>: Use a unique and descriptive class name */

.urbanist {
  font-family: "Urbanist", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
/* <weight>: Use a value from 100 to 900
<uniquifier>: Use a unique and descriptive class name */

.work-sans {
  font-family: "Work Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.cal-sans-regular {
  font-family: "Cal Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}


	html, body, section {
    scroll-behavior:smooth;
transition:none;
	font-family: "Work Sans", Helvetica, Arial, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
    body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    overflow-y: scroll;
		overflow-x:hidden;
		letter-spacing: 0;
				color:#000;
		font-weight:400;

}
    body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
div::-webkit-scrollbar, iframe::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
div, iframe {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
	
	p {
		font-weight:400;
			font-family: "Work Sans", Helvetica, Arial, -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
		letter-spacing: 0;
		color:#000

	}
    a, [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled), button, .btn  {
      -webkit-appearance: none !important;
    appearance: none !important;
		transition:.4s ease-in-out;
    }
a { text-decoration: none;
	
	transition:.4s ease-in-out;
}
a.text-secondary {
		transition:.25s ease-in-out;

}

a.text-secondary:hover {
	color:#000;
		transition:.25s ease-in-out;

}
:focus, a:focus, a:hover, .btn:focus { 
	border-color:transparent !important;
	outline:none !important;
	box-shadow:none !important;
	transition:.4s ease-in-out;
	
}
h1, h2, h3, h4, h5, h6 {
font-family: "Urbanist", "Work Sans", sans-serif;
font-weight: 700;
font-style: normal;
	letter-spacing: 0;
	margin-bottom:1.25rem;

}
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
font-family: "Urbanist", sans-serif;
font-weight: 300;
font-style: normal;
line-height:1.25;
	letter-spacing: 0;
}	
.nowrap {
	white-space: nowrap
}
.row {
margin-left: auto;
margin-right:auto;
}
.btn, button {
border-radius:0 !important;
    box-shadow:none !important;
font-family:  "Urbanist", sans-serif;
			font-style: normal;
			font-weight:700;
		}
		a:hover {
text-decoration: none;
		}
.k-logo, .k-logo:focus, .k-logo:visited, .k-logo:active {
       background-color:#000;border-radius:25px;
color:#fff !important;
 /*   transition: transform 500ms cubic-bezier(0.25, 0.1, 0.25, 1),opacity 500ms cubic-bezier(0.25, 0.1, 0.25, 1), color 200ms cubic-bezier(0.25, 0.1, 0.25, 1), background-color 200ms cubic-bezier(0.25, 0.1, 0.25, 1); */
	  transition:.5s ease-in;

    }
.k-logo:hover {
  transition:.5s ease-in;
	filter:invert(1);
color:#000 !important;
    }
		a.text-black:hover {
			color:#0064d2 !important;
			transition:.25s ease;
		}	
	a.anchor-top.text-white:hover {
color:#000 !important
}
	.hide {
		display:none !important;
		visibility:hidden !important;
	}
a.mega-menu img {
	  transition:.5s ease-in;

}
a.mega-menu:hover img {
	  transition:.5s ease-in;

}
.vh-100 {
    height: 100vh !important;
} 
.vh-20 {
    height: 20vh !important;
}
.vh-25 {
    height: 25vh !important;
}
.vh-50 {
    height: 50vh !important;
}
.vh-75 {
    height: 75vh !important;
}
.vh-90 {
    height: 90vh !important;
}

/* COLORS 
------------------------ */	
	.bg-danger {
		background-color:#ff0000 !important;
		background: #ff0000 !important;
}
.bg-black {
		background-color:#000 !important;
		background: #000 !important;
		
	}
	.bg-light-grey, .bg-light-gray {
		background-color:#f0f2f4 !important;
		background:#f0f2f4 !important
	}
		a.text-white-black {
		color:#fff !important;
		transition:.5s;
	}
	a.text-white-black:hover {
		color:#000 !important
	}
	
.text-bg-light {
    color: #000 !important;
    background-color: rgb(244 246 248) !important;
}
.bg-blue {
	background-color:#00aaeb;
}
.text-blue {
	color:#00aaeb;
}
.bg-opacity-15 {
    --bs-bg-opacity: 0.15;
}
.bg-opacity-10 {
    --bs-bg-opacity: 0.1;
}
.bg-opacity-20 {
    --bs-bg-opacity: 0.20;
}
.bg-opacity-30 {
    --bs-bg-opacity: 0.3;
}
.bg-opacity-35 {
    --bs-bg-opacity: 0.35;
}
.bg-opacity-40 {
    --bs-bg-opacity: 0.4;
}
.bg-opacity-45 {
    --bs-bg-opacity: 0.45;
}
.bg-opacity-55 {
    --bs-bg-opacity: 0.55;
}
.bg-opacity-60 {
    --bs-bg-opacity: 0.6;
}
.bg-opacity-65 {
    --bs-bg-opacity: 0.65;
}
.bg-opacity-70 {
    --bs-bg-opacity: 0.7;
}
.bg-opacity-75 {
    --bs-bg-opacity: 0.75;
}
.bg-opacity-80 {
    --bs-bg-opacity: 0.8;
}
.text-blue {
	color: #005ac8 !important
}
.text-red {
	color: #fa0f23 !important
}
.shadow-sm {
    box-shadow: 0 .1rem .25rem rgba(0, 0, 0, .15) !important;
}

/* ICON STYLES
------------------------ */		
		a.social-top i,a.social-top i:visited, a.social-top svg {
			font-size:1.5rem;
			letter-spacing:5px;
			color:#000 !important;
vertical-align: middle;

		}
	
		a.social-top i:hover,a.social-top i:focus, a.social-top svg:hover {
			color: currentcolor !important;
filter:none !important;
		
}
		
a.social i {
			font-size:inherit;
		}
	a.social i.text-white {
    color: #fff !important;
}
a.social i.text-black {
    color: #000 !important;

}
		a.social i:hover,a.social i.text-white:hover, a.social i.text-black:hover {
			color: currentcolor !important;
	opacity:1 !important;
}
#sidebar a div.ratio-1x1, .hero-intro a div.ratio-1x1 {
		transition:.25s ease;
border:2px solid rgba(0,0,0,.1);
	/*background-color: #f5f7f8 !important;*/
	background-color:#fff !important;
}
#sidebar a:hover div.ratio-1x1, .hero-intro a:hover div.ratio-1x1 {
	background-color:#fff !important;
	border:2px solid #000;
	transition:.25s ease;
	box-shadow:-5px 5px 0px #000;
}
		
/* FONT STYLES
------------------------ */
		.mokoko {
			font-family: 'Work Sans', sans-serif;
			font-family: mokoko, serif;
			font-style: normal;

		}
		.sofia {
font-family: sofia-pro, 'Work Sans', sans-serif;
			font-style: normal;


		}
		.text-black {
			color:#000 !important;
		}
		button .bg-white .text-black:hover {
			color:#fff !important;
		}
			.font-weight-300, .fw-300, .fw-light {
			font-weight:300 !important;
		}
			.font-weight-400, .fw-400, .fw-normal {
			font-weight:400 !important;
		}
			.font-weight-500, .fw-500, .fw-medium  {
			font-weight:500 !important;
		}
			.font-weight-600, .fw-600, .fw-demi, .fw-semibold, .fw-demibold {
			font-weight:600 !important;
		}
		.font-weight-700, .fw-700, .fw-bold {
			font-weight:700 !important;
		}
		.font-weight-800, .fw-800, .fw-bolder {
			font-weight:800 !important;
		}
		.font-weight-900, .fw-900, .fw-black {
			font-weight:900 !important;
		}
	
		.display-1, .display-2, .display-3, .display-4 {
		letter-spacing:-.05rem
		}
		
/* NAV STYLES
------------------------ */
a.nav-link.js-scroll-trigger {
color:#999;

}
.nav-link.js-scroll-trigger:hover {
color:#fff;
opacity:1;

}
.nav-link.js-scroll-trigger.active {
opacity:1 !important;
color:#fff;
}
.hamburger:hover {
color:#fff !important
}
a.nav-logo .ks-logo-hover {
	display:none;
	opacity:0;
	visibility:hidden;
	transition: .5s ease-in-out;
	
}
a.nav-logo:hover .ks-logo-hover {
	display:block;
	opacity:1;
	visibility: visible;
	transition: .5s ease-in-out;
	
}
a.nav-logo:hover .ks-logo-default {
	display:none;
	visibility:hidden;
	opacity:0;
	transition: .5s ease-in-out;
	
}
/* FORM STYLES
------------------------ */
.form-group label {
display:none;
}
.form-control, .custom-select {
overflow: visible;
color:#444;
   box-shadow: none !important;
    border-radius: 0 !important;
    height: fit-content !important;
    padding: .75rem 1rem !important;
    background-clip: unset !important;
    font-size: 1.1rem;
    line-height: 1.625;
	border-color:rgb(205 210 215)
}
.form-control:focus {
    color: #000;
    background-color: #fff;
    border-color: #666;
    outline: 0;
    box-shadow: none !important;
    border-radius: 0 !important;
}
select.form-control {
	 --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 24px;

}
button.submit {
	    padding: .5rem 1rem .6rem;
    font-size: 1.35em;
    line-height: 1.625;
    font-family: "Urbanist";
    font-weight: 800;
    letter-spacing: 0;
}
.invalid-feedback, .valid-feedback {
	    margin-top: 0;
    background: rgb(230 0 25);
    color: #fff;
    padding: .325rem .3rem .25rem .375rem;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: "Work Sans";
    line-height: 1.1;
    width: fit-content;
    word-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}
.valid-feedback {
	background:var(--bs-form-valid-color)
}
/* MODAL STYLES
------------------------ */
.modal-open .modal {
background-color:rgba(0,0,0,.75);
}
.modal-content {
    border-radius: 0;
    border: 0;
    padding: 0;
}
.modal-dialog {
width:95%;
margin-left:auto;
margin-right:auto;
    max-width: 960px;
    max-height: calc(100vh - 20px);

}
button.carousel-control-next,  button.carousel-control-prev{
	transition:.25 ease;
	opacity:1 !important
}
button.carousel-control-next:hover,  button.carousel-control-prev:hover{
	transition:.25 ease;
	opacity:.5 !important
}
a.underline {
	text-decoration: underline;
		transition:.5 ease;

}
a.underline:hover {
		text-decoration: none;
		transition:.5 ease;


}
@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
      transition: transform .3s ease-out;
    }
}
.z-100 {
	z-index:100 !important
}
.z-10 {
	z-index:10 !important
}
.z-1111 {
	z-index:1111 !important
}
.z-99 {
	z-index:99 !important
}
/* CAROUSEL STYLES
---------------------------*/
	.carousel-inner {
		overflow-y:scroll;
	}
	.carousel-inner::-webkit-scrollbar {
    display: none; 
		
	}
     .carousel-control-next-icon {
    background-image: url(images/icons/next.svg);
      width:2.25rem;
        height:2.25rem;
filter: invert(0);
    background-size: contain;
    background-position: right center;
}
       .carousel-control-prev-icon {
    background-image: url(images/icons/back.svg);
         width:2.25rem;
        height:2.25rem;
filter: invert(0);
    background-size: contain;
    background-position: left center;
} 
.carousel-item { 
    transition: transform 1.25s ease;
	}

.bio-carousel ol.carousel-indicators li {
	padding-bottom:20px !important;
	background-size:0px; 

}
 .bio-carousel ol.carousel-indicators li:hover {
}
.bio-carousel ol.carousel-indicators li.active {
	    border-bottom: none;
    background-image: url(https://karasiegert.com/hello/images/icons/white-arrow-down.svg) !important;
    background-size: auto 10px !important;
    background-repeat: no-repeat !important;
    background-position: center calc(100% + 2px) !important;
}


button.nav-link {
	color:#999 !important;
	transition: .25s ease;
}
button.nav-link:hover {
color:#fff !important;
		transition: .25s ease;

}
button.nav-link.active {
	color:#000 !important;
		transition: .25s ease;

}
.nav-pills button.nav-link {
		color:#fff !important;
	transition: .25s ease;
}
.nav-pills button.nav-link.active {
	color:#000 !important;
		transition: .25s ease;

}
.nav-pills button.nav-link:hover {
color:#999 !important;
		transition: .25s ease;

}
.nav-pills button.nav-link.active:hover {
	color:#000 !important;
		transition: .25s ease;

}
.nav-pills button.fs-6 {
	font-size:1.25rem !important
}
.object-fit-contain {
	object-fit:contain;
	
}
.object-fit-fill {
	object-fit:fill;
	
	
}
.object-fit-cover {
	object-fit:cover;
	
}
.object-position-center {
	object-position: center center
}
.object-position-center-top {
	object-position: center top
}

.object-position-left-top {
	object-position: left top
}
.object-position-right-top {
	object-position: right top
}
.object-position-left-bottom {
	object-position: left bottom
}
.object-position-right-bottom {
	object-position: right bottom
}
.object-position-right-center {
	object-position: right center
}
.object-position-right-75 {
	object-position: right 75%
}
/* MISC STYLES */
.skills-badge {
	background-image: url(https://karasiegert.com/hello/images/icons/dot-gray.svg);
    background-repeat: no-repeat;
    background-position: 9px center;
    background-size: 7px 100%;
    background-color: rgb(236 238 240) !important;
    line-height: 1;
    padding: 8px 10px 8px 22px;
	white-space:nowrap;
	font-size:.9rem;
}
#history .skills-badge {

    background-image: none;
    background-repeat: no-repeat;
    background-position: 9px center;
    background-size: 7px 100%;
    background-color: rgb(236 238 240) !important;
    line-height: 1;
    padding: 8px 10.5px 8px 10px;
    white-space: nowrap;
    font-size: .9rem;
}
#history ul {
	    padding-left: 1.25rem;
    padding-right: .75rem;
}

.card-tabs.row {
	height:300px !important;
}
.card-tabs div.row {
	height:fit-content !important
}
.card .nav.nav-pills.nav-fill {
	padding:3px !important
}

#work .card {
	border-radius:0;
	border: 2px solid #dee2e6 !important;
	transition: .5s ease-in-out;
}
#work .card:hover {
	box-shadow: -10px 10px 0px #000;
	transition: .5s ease-in-out;
	border-color:#000 !important
}
#work .card .ratio {
		transition: .5s ease-in-out;

}
#work .card .ratio.bg-light {
	transition: .5s ease-in-out;
background: linear-gradient(0deg, rgb(237 238 239) 0%, rgb(253 254 255) 60%) !important;
}
#work .card:hover .ratio.bg-light {

	transition: .5s ease-in-out;
} 
#work .card:hover .ratio.bg-light .ratio {
	background-color:transparent !important;
		transition: .5s ease-in-out;

}
#work .card .carousel .carousel-indicators {
	
			transition: .25s ease-in-out;
	    opacity: .4;
zoom: .8


}
#work .card .carousel:hover  .carousel-indicators {
opacity:1;
	 

				transition: .25s ease-in-out;

}
#work .card .skills-badge {
	font-size:.825rem !important
}
.fs-7 {
	font-size:.75rem !important
}
#work .tab-content .container {
	max-width:1320px;
}
.border {
	border-color: #dee2e6
}
ul.timeline.nav {
	padding:0 !important;
}
.grayscale {
	filter: grayscale(1)
}
	@media (min-width: 768px) {

  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next {
      transform: translateX(50%);
  }

  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev {
      transform: translateX(-50%);
  }
}

/* large - display 3 */
@media (min-width: 992px) {

  .carousel-inner .carousel-item-right.active,
  .carousel-inner .carousel-item-next {
      transform: translateX(33%);
  }

  .carousel-inner .carousel-item-left.active,
  .carousel-inner .carousel-item-prev {
      transform: translateX(-33%);
  }
}

@media (max-width: 768px) {
  .carousel-inner .carousel-item>div {
      display: none;
	  	  transition: none !important

  }

  .carousel-inner .carousel-item>div:first-child {
      display: block;
	  transition: none !important

  }
	.carousel-item { 
transition:none !important
	}
}
@media (max-width: 420px) {
	.carousel-item { 
transition: none !important
	}
	#myCarousel p.mb-1 {
    line-height: 1.5;
    font-size: .875rem !important;
}
	#myCarousel h3 {
    max-width: 90%;
    font-size: 2rem;
    line-height: 1 !important;
}
}
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: block;
}

.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left {
  transform: translateX(0);
}
	.img-fluid {
		width:100%;
		height:auto;
	}
	.carousel-control-prev-icon:hover, .carousel-control-next-icon:hover {
		opacity:.5
	}
.carousel-item {
color:#333 
}
.carousel-item hr {
background-color:rgba(0,0,0,.5) !important;
}
ol.carousel-indicators {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    justify-content: center;
    padding-left: 0;
    margin-right: 0;
    margin-left: 0;
    list-style: none;
    margin: auto;
    height: fit-content;
    display: block;
    width: 100%;
    background: none !important;

}
.carousel-indicators li {
 flex: 100%;
    cursor: pointer;
    background: none !important;
    background-clip: padding-box;
    border-bottom: 0px solid #fff;
    border-top:0 !important;
    opacity: .625;
    transition: opacity .6s ease;
    display: block;
    text-indent: 0;
    z-index: 1;
    width: 100%;
    margin: 0 auto;
    float: none;
    min-width: 100%;
    height: fit-content;
    padding: 10px 0;
    font-size: 1.25rem;
text-shadow:none !important;
}
.carousel-indicators li:hover {
opacity:1;
text-shadow:none !important;
    background: rgba(255,255,255,1) !important;


}
	.carousel-indicators li svg {
		fill:none !important;
		stroke:#FFF;
		stroke-width:1px;
		width:100%;
		height:auto;
		max-width:13px;
	}
	.carousel-indicators li svg:hover {
		opacity:.5;
		
	}
	.carousel-indicators li.active svg, .carousel-indicators li.active svg circle {
		fill: #ffffff !important;
		stroke:#ffffff !important;
		opacity:1 !important;
	}
/* NEW CAROUSEL STYLES FOR BOTTON INDICATORS */ 
.carousel-indicators li {
    flex: 100%;
    cursor: pointer;
    background: none !important;
    background-clip: padding-box;
    border-top: 0 !important;
    opacity: 1;
    transition: opacity .6s ease;
    display: inline-block;
    text-indent: 0;
    z-index: 1;
    margin: 0 2px;
    float: none;
    height: fit-content;
    padding: 15px 0 5px 0;
    text-shadow: none !important;
    width: fit-content;
    min-width: 20px;
	color:rgba(255,255,255,.5);
	

}
	.carousel-indicators .active {
    opacity: 1;
    color: #fff;
		border-color:rgba(255,255,255,1)
}
	.carousel-indicators li:hover {
    opacity: 1 !important;
    text-shadow: none !important;
    color: #fff;
		background:none !important;
		  
				border-color:rgba(255,255,255,1);
	}
ol.carousel-indicators {
    position: absolute;
    text-align: center;
    display: inline-block;
    width: 100%;
	bottom:1rem;
}

.carousel-control-next, .carousel-control-prev  {
		opacity:.85 !important;
	width:10%;
	}

/* NEW CAROUSEL STYLES */
.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: .8rem;
    height: .8rem;
    padding: 0;
    margin-right: .4rem;
    margin-left: .4rem;
    text-indent: -999px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, .175);
    background-clip: padding-box;
    border: 0;
    border-top: 0;
    border-bottom: 0;
    opacity: 1 !important;
    transition:  .25s ease-in-out;
    border-radius: 50px !important;
}
.carousel-indicators .active {
    opacity: 1;
    background-color: rgba(0, 0, 0, .55);
    border:none;
}
.carousel-indicators button:hover  {
    opacity: 1;
    background-color: rgba(0, 0, 0, .35);
    border:none;
	    transition:  .25s ease-in-out;

}
	/*PERCENTAGES
---------------------------*/


.single-chart {
  width: 33%;
  justify-content: space-around ;
}

.circular-chart {
  display: block;
  margin: 10px auto;
	width:100%;
  max-height: 250px;
}

.circle-bg {
  fill: none;
  stroke: #eee;
  stroke-width: .75;
}

.circle {
  fill: none;
  stroke-width: 1.25;
  stroke-linecap: none;
  animation: progress 1.5s ease-out forwards;
}

@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

.circular-chart.orange .circle {
  stroke: #999;
}

.circular-chart.green .circle {
  stroke: #4CC790;
}

.circular-chart.blue .circle {
  stroke: #3c9ee5;
}

.percentage {
  fill: #000;
font-family: 'Urbanist', sans-serif;
font-weight:900;
	letter-spacing:-.01rem;
	font-size: 0.5em;
  text-anchor: middle;
}	
/*STYLES FOR THIS PAGE ONLY
---------------------------*/
.down:hover {
color:#000 !important;
}
footer a.nav-link.js-scroll-trigger {
font-family: neuzeit-grotesk, sans-serif;
font-weight: 400;
font-style: normal;
font-size:1.5rem
}
.btn.bg-white {
border:2px solid #000 !important
}
.btn.bg-white:hover {
background:#000 !important;
color:#fff !important;
border:2px solid #fff !important;
}
.svg-inline--fa {
color:#000 !important;
}
.svg-inline--fa:hover {
color: inherit !important;
}
	a.text-white.more:hover {
		color:#000 !important
	}
/* Tabs Styles
---------------------------*/

#pills-tab li, #pills-tab li a {
font-size:1.5rem;
			font-family: 'Work Sans', sans-serif;
			font-family: mokoko, serif;
			font-style: normal;
color:#212529;
font-weight:300;
	border-radius:0;
	border:0 !important;
	box-shadow:none !important

		
}
#pills-tab li a:hover {
color:#000 !important;
}

   #pills-tab li a.text-white {
border:1px solid rgba(0,0,0,0) !important;
}
   #pills-tab li a.text-white:hover {
opacity:.75 !important;
color:#fff !important;
}
#pills-tab li a.text-white.active {
border:1px solid #fff !important;
	background:none;
color:#fff !important;
	}
	#pills-tab li a.bg-transparent.text-black.active {
		
	border-bottom:1px solid #000 !important;
color:#000 !important

		
}
  .lead {
		font-size:1.375rem;
	} 

.w-100 {
	width:100%;
}
.w-95 {
	width:95% !important
}
	.w-90 {
	width:90%
}
.w-85 {
	width:85%
}
.w-80 {
	width:80%
}
	.w-75 {
	width:75%
}
	.w-70 {
	width:70%
}
		
.w-65 {
	width:65%
}
	.w-60 {
	width:60%
}
.w-55 {
	width:55%
}
	
	.w-50 {
	width:50%
}
	
.w-45 {
	width:45%
}
	
.w-40 {
	width:40%
}
	
.w-35 {
	width:35%
}
.w-30 {
	width:30%
}
	.w-25 {
	width:25%
}
	.w-20 {
	width:20%
}
	.w-22 {
	width:22%
}
	.w-23 {
	width:23%
}
	.w-24 {
	width:24%
}
	.w-26 {
	width:26%
}
	.w-27 {
	width:27%
}
	.w-28 {
	width:28%
}
	.w-29 {
	width:29%
}

	.w-15 {
	width:15%
}
	
.w-10 {
	width:10%
}
.w-fit, .w-fit-content{
	width:fit-content !important;
}
.w-max, .w-max-content {
	width: max-content !important;
}
.h-fit {
	height:fit-content !important;
}
.h-max {
	height:max-content !important;
}
.lh-1125 {
	line-height: 1.125;
}
.lh-125 {
	line-height:1.25
}
.lh-1375 {
	line-height: 1.375
}
.lh-1625 {
	line-height: 1.625
}
.lh-175 {
	line-height:1.75
}
.lh-95 {
	line-height: .95;
}
.lh-90 {
	line-height: .9
}
	
.ratio .rollover {
	opacity:0;
		transition:.5s ease-in-out;

}
.ratio .rollover:hover {
	opacity:1;
	transition:.5s ease-in-out;
}
.towson .towson-cred {
	opacity:0;
			transition:1.5s ease-in-out;

	
}
.towson:hover .towson-cred {
	opacity:1;
		transition:1.5
}
/* MAIN NAV */
a.mega-menu {
	  transition:.5s ease-in-out;

}
a.mega-menu:hover, a.sidebar:hover {
	    filter: invert(1);
    transition: .5s ease-in-out;
}
#sidebar.offcanvas {
max-width: 440px;
    width: 100%;
    border: none;
}
a.close-x {
	opacity:1;
	  transition:.5s ease
}

a.close-x:hover {
	opacity:.5;
	  transition:.5s ease
}
div#sidebar.offcanvas.offcanvas-end.show {
	z-index:9992 !important
}

/* CAROUSEL */
.carousel a i.bi-circle-fill {
	    font-size: 12px;
    margin: 0 5px;
}


#work .card .carousel-indicators [data-bs-target] {
 
    width: 12px;
    height: 12px;
}

/* BUTTON STYLES */

.btn-new {
	
    font-family: 'Urbanist', sans-serif;
    font-weight: 800;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0;
    padding-bottom: 0;
    border: 2px solid #000;
    letter-spacing: -.005rem;
    background: #000;
    color: #fff;
	    box-shadow: -5px 5px 0px rgba(0,0,0,0) !important;


}
.btn-new.text-white:hover {
	color:#000 !important;
	border: 2px solid #000 !important;
    background: #fff;
		transition:.3s ease;

    box-shadow: -5px 5px 0px #000 !important;


}
nav a.menu {
	    border: 2px solid rgba(0,0,0,0);
    background: #fff;
    max-width: 60px;
}
nav a.menu:hover {
	        border-color: #000 !important;
    transition: .3s ease;
    box-shadow: -5px 5px 0px #000 !important;
    overflow: visible;
    background: #fff;
    filter: none;
    color: #000 !important;

}

#work .card .card-body p {
	 -webkit-line-clamp: 3;
	font-size: calc(1rem + .0vw);
	line-height:1.55 !important;
}
/* TIMELINE */
ul.timeline.nav-pills button.nav-link {
		border-bottom:3px solid rgba(0,0,0,.2) !important;
	height:120px;

}

.timeline .nav-item button {
	padding:0;
	position:relative
}
.timeline .nav-item button.nav-link img {
	min-width:64px;
	max-width:100px;
	padding: 7px;
}
.timeline .nav-link.active {
	background-color:transparent;
	position:relative;
		transition:.25s ease;
}
/* .timeline .nav-link.active::after {
	content: "";
    background-color: transparent;
    color: #000;
    font-weight: bold;
    position: absolute;
    bottom: -10px;
    text-align: center;
    font-size: 40px;
    height: 20px;
    width: 20px;
    left: calc(50% - 10px);
    background: #000;
    border-radius: 100px;

	
} */
.timeline #pills-1-timeline.nav-link.active::after {
   content: "";
    background-color: transparent;
    color: #000;
    font-weight: bold;
    position: absolute;
    bottom: -4px;
    text-align: center;
    font-size: 40px;
    height:5px;
    width: 50%;
    left: 0%;
    background: #000;
    overflow: hidden;
		transition:.25s ease;

}
.timeline #pills-2-timeline.nav-link.active::after {
    content: "";
    background-color: transparent;
    color: #000;
    font-weight: bold;
    position: absolute;
    bottom: -4px;
    text-align: center;
    font-size: 40px;
    height: 5px;
    width: 150%;
    left: -100%;
    background: #000;
    overflow: hidden;
		transition:.25s ease;

}
.timeline #pills-3-timeline.nav-link.active::after {
    content: "";
    background-color: transparent;
    color: #000;
    font-weight: bold;
    position: absolute;
    bottom: -4px;
    text-align: center;
    font-size: 40px;
    height: 5px;
    width: 250%;
    left: -200%;
    background: #000;
    overflow: hidden;
		transition:.25s ease;

}
.timeline #pills-4-timeline.nav-link.active::after {
    content: "";
    background-color: transparent;
    color: #000;
    font-weight: bold;
    position: absolute;
    bottom: -4px;
    text-align: center;
    font-size: 40px;
    height: 5px;
    width: 250%;
    left: -200%;
    background: #000;
    overflow: hidden;
		transition:.25s ease;

}
.timeline #pills-5-timeline.nav-link.active::after {
    content: "";
    background-color: transparent;
    color: #000;
    font-weight: bold;
    position: absolute;
    bottom: -4px;
    text-align: center;
    font-size: 40px;
    height: 5px;
    width: 350%;
    left: -300%;
    background: #000;
    overflow: hidden;
		transition:.25s ease;

}
.timeline .nav-item button.nav-link img::after {
	  content: " - Remember this";
  background-color: yellow;
  color: red;
  font-weight: bold;
}
.active-timeline {
	opacity:0;
}

.nav-link.active .active-timeline {
    position: absolute;
    opacity: 1;
    width: 23px !important;
    bottom: -13.5px;
    left: calc(50% - 12.5px);
    height: 23px;
    min-width: 0 !important;
    z-index: 3;
    max-width: 24px !important;
    background: #fff;
    border-radius: 100px;
    transition: .25s ease;
    border: 5px solid #000;
    opacity: 100;
	

}
.timeline-name {
	
      position: absolute;
    width: 18px;
    height: 18px;
    border: 3px solid #fff;
    top: -10px;
    left: calc(50% - 10px);
    border-radius: 100px;
    background: #000;

}
#carouselpokekmart {
	background: url(../images/portfolio/featured/bkg.jpg); background-size: cover; background-position: center; 
}
#carouselpokekmart button {
	opacity:0;
	    transition: .5s ease;
	min-width:45px !important

} #carouselpokekmart button i {
font-size: 40px !important;
}
#carouselpokekmart:hover button {
	opacity:.5;
	    transition: .5s ease;

}
#carouselpokekmart button {
	opacity:.5 !important;
		    transition: .25s ease;

}
#carouselpokekmart button:hover {
	opacity:1 !important;
		    transition: .25s ease;

}

/* RESPONSIVE STYLES FOR THIS PAGE ONLY
---------------------------*/
.text-right-center {
	text-align:right !important;
	}
	.text-left-center {
	text-align:left !important;
	}
	.display-1 {
		font-size:10rem !important;
		line-height:.9 !important
	}
.name-headline {
	font-size: calc(9rem + 3.5vw) !important;
	letter-spacing:-5px !important;
}
footer a:hover {
	opacity:.7;
		transition:.25s ease ;
}
footer i {
			font-size:1.125rem !important
		}

#skills .card h1.display-6 { 
	font-size: 2.25rem !important;
}
	#work .card .carousel-indicators button.carousel-control-prev,#work .card .carousel-indicators button.carousel-control-next {
			display:none !important
		}

#history .tab-pane a img {
		transition:.25s ease ;
	opacity:1;
	filter:none;

}
	#history .tab-pane a img:hover {
filter:brightness(.75);
		opacity:.6;
	transition:.25s ease ;
	

}
.timeline button img {
	transition:.25s ease ;
	opacity:1;
	filter:none;
	border-radius:1000px

}
/*
 .timeline button.active img { 
	 border-color:#000;
	 }

.timeline button#pills-1-timeline.active img {
		 border-color:#fff;

} */
	 .timeline button img:hover {
padding:0px !important;
	transition:.25s ease ;
}
#work .sticky-top.tab-nav {
	padding-top: 75px;
}
#history .nav-pills button.nav-link.active img {
	 padding:0px
}
#history .skills-badge {
	margin-left: -2px !important;
}
/* #skills .fs-3 {
	font-size:1.625rem !important
} */


.pb-125 {
	 padding-bottom:.125rem !important
}

#skills .card-container .front .fs-5 {
	font-size:1.125rem !important 
}
section.hero-intro .border.border-2 {
border-color:rgba(0,0,0,.25) 
}



/* BUTTONS NEW */
.button-new {
    border: 2px solid #000;
    color: #fff !important;
	background-color:#000 !important;
    font-family: "Urbanist";
    font-weight: 800;
    line-height: 2.65;
    display: inline-block;
    padding: 0 1.45rem 0px 1.55rem;
    white-space: nowrap;
    width: fit-content;
	    transition: .3s ease;

}

.button-new:hover {
	    color: #000 !important;
    border: 2px solid #000 !important;
    background-color: #fff !important;
    transition: .3s ease;
    box-shadow: -5px 5px 0px #000 !important;
}
#featured .slide-tag {
     background-image: none;
    background-repeat: no-repeat;
    background-position: 9px center;
    background-size: 7px 100%;
  /*  background-color: rgb(236 238 240) !important;
    background-color: rgb(237 238 239) !important; */
    line-height: 1;
    padding: 8px 12.5px 8px 14px;
    white-space: nowrap;
    font-size: 1rem;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 1rem !important;
    margin-right: calc(1rem - 2px) !important;
    border: 0;
    background-color: #0064d2 !important;
    font-weight: 600 !important;
	    transition: .3s ease;

}
#featured a.slide-tag:hover {
	    background-color: #000 !important;
    transition: .3s ease;

}
/*#featured .skills-badge {
	background-color:#fff !important;
}*/
#featured .intro-text {
			font-size:calc(1.1rem + 0vw) 
 		}
#featured .border-2{
	border-width:1.5px !important
}
#work .work-description {
	 overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2; /* Set the desired number of lines */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis; /* Optional: adds ellipses (...) to truncated text */
	
}
img.figma {
	max-width:25px;
}
a img.figma {
	opacity:1;
	 transition: .3s ease;
}
a:hover img.figma {
	opacity:.7;
	 transition: .3s ease;
}

button.submit:hover {
	background-color: #000 !important;
		 transition: .3s ease;
	border-color:#000;

}
/* TABLET & MOBILE SIZES START */

	@media (max-width: 990px) {
    .text-right-center,.text-left-center {
	text-align:center !important;
	}
		.display-1 {
			font-size:6rem !important;
		}
	}
			@media (max-width: 768px) {

    h4.text-white.font-weight-light {
        font-size:1.425rem !important;
    }
			
	.display-2 {
		font-size:4rem;
	}
	.lead.nav {
		font-size:1rem !important;
	}
	.lead span {
		font-size:1.375rem;
	}
	.anchor-top {
		font-size:1.325rem !important
	}
	#pills-tab li, #pills-tab li a {
    font-size: 1.325rem;
	}
				 a.nav-logo {
			max-width:110px !important
				}
	}
	@media (max-width: 480px) {
		body {
			max-width:100vw;
			overflow-x:hidden;
			
		}
		.display-1 {
					font-size:7rem !important
				}
	a.social-top i {
		zoom:.85;
	}
		.hero-row {
			max-height:656px !important
		}
		section {
    padding: 75px 0;
}
		.display-3 {
    font-size: calc(1.75rem + 4.5vw);
}
		.form-control, .custom-select {
			font-size:1.2rem;
		}
		button.submit {
			font-size:1.5rem;
		}
		.bio-carousel .carousel-indicators li {
margin-left: .25rem !important;
        margin-right: .25rem !important;
        padding-bottom: 20px !important;
        font-size: 1.35rem !important;
        padding-left: .35rem !important;
        padding-right: .35rem !important;
		}
		.bio-carousel .carousel-indicators .active {
			background-size: auto 11px !important;
		}
		.bio-carousel .carousel-inner {
			height: 550px !important
		}

#sidebar.offcanvas {
max-width: 100%;
    width: 100%;
    border: none;
}
		.towson-cred {
	display:none;
	
}
			a i.bi,bi-arrow-right-circle {
			font-size: 2.25rem;
		}
		.display-6 {
			    font-size: calc(1.75rem + 2vw);
		}
		.skills-badge {
    background-image: url(https://karasiegert.com/hello/images/icons/dot-gray.svg);
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 5px 100%;
    background-color: rgb(236 238 240) !important;
    line-height: 1;
    padding: 7px 10px 7px 20px;
    white-space: nowrap;
    font-size: .875rem;
    margin-left: 0.15rem !important;
    margin-bottom: 0.15rem !important;
    margin-right: .15rem !important;
    margin-top: .15rem !important;
    border-radius: .25rem !important;
}
		.card-tabs h3, .card-tabs h4 {
			line-height:1.5 !important
		}
		.card-tabs h3 {
			        font-size: 1.625rem !important
		}
			.card-tabs h4 {
			        font-size: 1.375rem !important
		}
		.cards-tabs .fs-3 {
    font-size: calc(1.5rem + .6vw) !important;
}
		section.hero {
			padding: 0 !important
		}
		footer i {
			font-size:1.25rem !important
		}.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: .6rem;
    height: .6rem;
    padding: 0;
    margin-right: .35rem;
    margin-left: .35rem;
		}
		#work .nav-pills button.nav-link {
  
    font-size: .9rem !important;
		}  a.nav-logo {
			max-width:110px !important
		}
		.carousel-indicators {
			margin-bottom:.65rem;
		}
		#work .card  .carousel .carousel-indicators {
opacity:1;
	margin-bottom:.375rem !important;
zoom: .6 !important


}
				#work .card  .carousel .carousel-indicators .carousel-control-next i, #work .card  .carousel .carousel-indicators .carousel-control-prev i {
					
font-size: 1rem !important;
					margin: 0 0 .6rem 0 !important
}
#work .card .carousel-indicators [data-bs-target] {
    width: .5rem;
    height: .5rem;
	margin-right: .3rem;
        margin-left: .3rem;
}
	#work .card .carousel-indicators button.carousel-control-next {
			margin-left: .25rem !important;
		}
		#work .card .carousel-indicators button.carousel-control-prev {
			margin-right: .25rem !important;
		}
		#work .card h4.card-text {
			font-size:1.5rem !important;
			padding-bottom: 0 !important
		}
		#work .card .card-body p {
	 -webkit-line-clamp: 5;
}
#skills .material-symbols-outlined  {
    font-size: calc(1.5rem + .9vw) !important;
	font-weight:400;
		}
#skills .card .card-tabs .fs-3
		{
		
    font-size: calc(1.375rem + .75vw) !important
}
#skills .card .card-tabs .fs-3 .material-symbols-outlined  {
    font-size: calc(1.5rem + .9vw) !important;
	font-weight:400;
	
	
		}
		#skills .card h1.display-6 {
font-size: calc(2rem + 2vw) !important;
        margin-bottom: .65rem !important;
        margin-top: 1.375rem !important;
    
		}

	#skills .card .front	h1 span.fs-3 {
			        font-size: calc(1.5rem + .75vw) !important;
        line-height: 1.25 !important;
    }
		#work .nav-link.fs-4 {
			font-size: calc(1.25rem + .4vw) !important;
		}
		#work .card .carousel-indicators button.carousel-control-prev,#work .card .carousel-indicators button.carousel-control-next {
			display:none !important
		}
		section.hero-intro .funko {
			         margin-top: -230px !important;
        max-width: 200px !important;
		}
		.timeline-item-name {
			font-size:0 !important
			} 
		a.menu {
			margin-top: .75rem !important;
		}
		a.menu svg {
			max-width:30px !important
		}
		.hero-logo {
			opacity:0 ;
			min-width:100px !important;
						max-width:100px !important;

		}
#work .sticky-top.tab-nav {
    padding-top: 90px;
    margin-top: -90px;
}
		#work .card {
			box-shadow:none !important
		}
		.hide-m {
			display:none !important;
			visibility: hidden!important
		}
		ul.timeline.nav-pills button.nav-link {
			height:90px
		}
		#history h3 {
			    font-size: calc(1.425rem + 1vw); 
		}
#history .skills-badge {
	margin-left: -1px !important;
	        margin-bottom: .125rem !important;
        margin-top: .325rem !important;
}
		nav a svg {
			    max-width: 22px !important;
		}
		.hero-container {
			padding-bottom: 2.5rem !important;
		}
#skills .card-container .front img {
	margin-top:2.5rem !important
}
		#history ul {
padding-right:0;
}
		ul.timeline.nav {
	padding:0 !important;
}
	

		footer p.fs-5 {
			    font-size: 1.125rem !important;

		}
		.intro-text {
			font-size:calc(1rem + .175vw) !important
 		}
		#featured .slide-tag { 
		        font-size: 11.5px !important;
        padding: 6px 8px 5.5px 9px;
        margin-bottom: 6px !important;
        margin-right: 5px !important;
        border-radius: .25rem !important;
				display:none !important;
			
			}
		#featured .slide-tag i {
			display:none;
		}

#carouselpokekmart button {
    min-width: 35px !important;
}

#carouselpokekmart button i {
    font-size: 30px !important;
}
		#carouselpokekmart .carousel-inner .carousel-item>div {
			display:block;
			  	  transition: .5s ease !important

		}
	
			
.button-new {
 
    line-height: 2.825;
    padding:0 1.35rem .5px 1.35rem;
    white-space: nowrap;
    width: fit-content;
    transition: .3s ease;
    font-size: 1rem !important;
		}
#work .work-description {
	 overflow: hidden;
  display: block ;
  -webkit-line-clamp: none; /* Set the desired number of lines */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis; /* Optional: adds ellipses (...) to truncated text */
	
}

#work a.figma {
   display:none !important
}}