@charset "UTF-8";
/* CSS Document */
/* body {background: #f7971d !important; font-family: exo-soft-1, exo-soft-2,sans-serif; color: #FFF8EB;} */
--root {--gradient: linear-gradient( 135deg, #ffab39, #ffab39, #ff2d9d, #bb2b9b, #0000ec );
}
body {
  /*background: #ffffff !important;*/
  /*font-family: exo-soft-1, exo-soft-2, sans-serif;*/
  color: #212529;
}
.show {
  display: block !important;
}
.hide {
  display: none;
}
.mt-6 {
  margin-top: 6rem !important;
}
.mb-6 {
  margin-bottom: 6rem !important;
}
.border-lightgray {
  border-color: lightgray !important;
}
.bg-lightblue {
  background-color: #eff7fc !important;
}
.bg-orange {
  background-color: #f7971d !important;
}
a.bg-orange:hover, a.bg-orange:focus, button.bg-orange:hover, button.bg-orange:focus {
  background-color: #f7971d !important;
}
.bg-portfolio-banner {
  background-image: url("../images/daniel-chaparro-design-linkedin-page-banner.png");
}
.bg-cbcap-interviews-google-sheet-top-right {
  background-image: url("../images/Screen Shot 2020-05-16 at 9.33.32 PM.png");
  background-position: right 20px;
  background-size: 40%;
  background-repeat: no-repeat;
}
.bg-cbcap-interviews-google-sheet-top-right-v2 {
  background-image: url("../images/Screen Shot 2020-05-16 at 9.33.32 PM.png");
  background-position: 170% 20px;
  background-size: 60%;
  background-repeat: no-repeat;
  /*opacity: 0.6;*/
}
.bg-cbcap-interviews-google-sheet-top-right-v3 {
  background-image: url("../images/deloitte/cbcap-form-research-1-interview-analysis@2x.png");
  background-position: 120% 0px;
  background-size: 50%;
  background-repeat: no-repeat;
  /*opacity: 0.6;*/
}
.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #eee;
  border-left-width: .25rem;
  border-radius: .25rem;
}
.bd-callout-warning {
  border-left-color: #f0ad4e;
}
.svg-fill-white {
  /*background-color: red;*/
  /*filter: invert(1.0);*/
  fill: #27ae60;
}
/*===*/
/*sticky sections navbar*/
/*===*/
#navbar {
  /*overflow: hidden;*/
  /*background-color: #f8f9fa;*/
  /*display: block;*/
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
/* Navbar links */
#navbar a {
  /*float: none;*/
  /*display: block;*/
  /*color: #f2f2f2;*/
  text-align: center;
  padding: 14px;
  text-decoration: none;
  margin-right: 1rem;
  margin-left: 1rem;
}
.sticky {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 1020;
  margin-top: 3.5rem;
  margin-left: 0;
  background-color: #f8f9fa;
  border-bottom: 1px gainsboro solid;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .06);
}
.sticky + .content {
  /*padding-top: 60px;*/
  /*padding-top: 3.5rem;*/
  padding-top: 0;
}
.sticky + .col-12 {
  /*padding-top: 60px;*/
  /*padding-top: 3.5rem;*/
  margin-top: 3.5rem;
  margin-left: auto;
  margin-right: auto;
}
.sticky-anchor-offset-0 {
  position: absolute;
  top: 0px;
  /* requires element to be placed witin parent with position-relative class assigned */
}
.sticky-anchor-offset-1 {
  position: absolute;
  top: -160px;
  /* requires element to be placed witin parent with position-relative class assigned */
}
.sticky-anchor-offset-2 {
  position: absolute;
  top: -240px;
  /* requires element to be placed witin parent with position-relative class assigned */
}
.sticky-anchor-offset-3 {
  position: absolute;
  top: -320px;
  /* requires element to be placed witin parent with position-relative class assigned */
}
#backtotopBtn {
  background-image: url("../images/arrow_upward-black-18dp.svg");
  background-repeat: no-repeat;
  background-position: center center;
  width: 40px;
  height: 40px;
  left: auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .30);
}
#backtotopBtn:hover {
  background: #007bff !important;
  background-image: url("../images/arrow_upward-white-18dp.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}
/*===*/
/*navbar background blur*/
/*===*/
.bgOrangeBlur {
  -webkit-backdrop-filter: saturate(280%) blur(20px);
  backdrop-filter: saturate(280%) blur(20px);
  /*background-color: rgba(247,151,29,0.9) !important;*/
  /*background-color: rgba(242,135,0,0.85) !important;*/
  /*background-color: rgba(245,136,0,0.85) !important;*/
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffab39+0,f7971d+50,ff2d9d+100&1+0,0.85+50,0.8+100 */
  background: -moz-linear-gradient(-45deg, rgba(247, 151, 29, 1.0) 0%, rgba(247, 151, 29, .90) 50%, rgba(255, 45, 157, 0.80) 100%) !important; /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, rgba(247, 151, 29, 1.0) 0%, rgba(247, 151, 29, 0.90) 50%, rgba(255, 45, 157, 0.80) 100%) !important; /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, rgba(247, 151, 29, 1.0) 0%, rgba(247, 151, 29, 0.90) 50%, rgba(255, 45, 157, 0.80) 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab39', endColorstr='#ccff2d9d', GradientType=1); /* IE6-9 fallback on horizontal gradient */
}
.bgOrangeBlur2 {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffab39+0,f7971d+50,ff2d9d+100;DCD+Orange+to+Fuchia */
  background: rgb(255, 171, 57) !important; /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(255, 171, 57, 1) 0%, rgba(247, 151, 29, 1) 50%, rgba(255, 45, 157, 1) 100%) !important; /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, rgba(255, 171, 57, 1) 0%, rgba(247, 151, 29, 1) 50%, rgba(255, 45, 157, 1) 100%) !important; /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, rgba(255, 171, 57, 1) 0%, rgba(247, 151, 29, 1) 50%, rgba(255, 45, 157, 1) 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab39', endColorstr='#ff2d9d', GradientType=1) !important; /* IE6-9 fallback on horizontal gradient */
}
.bgGradientAnimation {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2d43b+0,ffab39+25,ff2d9d+50,47e5dc+75,f2d43b+100 */
  /*background: #ffab39 !important;*/ /* Old browsers */
	background: #ff0000 !important; /* Old browsers */
  background: -moz-linear-gradient(-45deg, #ff0000 0%, #ffab39 25%, #ff2d9d 50%, #47e5dc 75%, #f2d43b 100%) !important; /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #ff0000 0%, #ffab39 25%, #ff2d9d 50%, #47e5dc 75%, #f2d43b 100%) !important; /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #ff0000, #ffab39, #ff2d9d, #47e5dc, #f2d43b) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab39', endColorstr='#ffab39', GradientType=1) !important; /* IE6-9 fallback on horizontal gradient */
  background-size: 400% 400% !important;
  animation: gradient 30s ease infinite !important;
}
/*=== */
/*css animation*/
/*=== */
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.vertically-Center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
/*===*/
/*bootstrap css addendums*/
/*===*/
hr {
  border-color: #FFBC29;
}
.card:hover {
  /*  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.08);*/
  box-shadow: 0 10px 8px 0 rgba(0, 0, 0, 0.08), 0 10px 15px 0 rgba(0, 0, 0, 0.02), 0 10px 20px 4px rgba(0, 0, 0, 0.06);
}
.btn {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3) !important;
}
.btn.white {
	background-color:aliceblue;
	color:#007bff;
}
.btn.white:hover {
	background-color:#007bff;
	color:aliceblue;
}
.navbar-dark .navbar-brand {
  font-weight: 600 !important;
}
.navbar-dark .navbar-toggler {
  color: rgba(255, 255, 255, 0.0) !important;
  border-color: rgba(255, 255, 255, 0.0) !important;
  font-family: 'Exo', sans-serif;
}
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23007bff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e") !important;
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23007bff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e") !important;
}
.jumbotron {
  border-radius: 0 !important;
}
.w-20 {
  width: 20% !important;
}
.w-30 {
  width: 30% !important;
}
.w-33 {
  width: 33% !important;
}
.w-40 {
  width: 40% !important;
}
.w-60 {
  width: 60% !important;
}
.w-66 {
  width: 66% !important;
}
.w-70 {
  width: 70% !important;
}
.w-80 {
  width: 80% !important;
}
.w-85 {
  width: 85% !important;
}
.w-90 {
  width: 90% !important;
}
.carousel-indicators li {
  width: .7rem !important;
  height: .7rem !important;
  margin-right: .4rem;
  margin-left: .4rem;
  border-radius: 50% !important;
  background-color: #007bff !important;
}
.carousel-indicators .active {
  opacity: 1;
}
/*background color loop effect by TechStacker*/
/*https://techstacker.com/how-to-loop-background-color-animation-css/*/
xbody .bgColorAnimation {
  animation-name: backgroundColorPalette;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
  /* linear is enabled by default, it’s not necessary to add it to make it work, but it can make your code more expressive */
}
@keyframes backgroundColorPalette {
  0% {
    background: #ee6055;
  }
  25% {
    background: #60d394;
  }
  50% {
    background: #aaf683;
  }
  75% {
    background: #ffd97d;
  }
  100% {
    background: #ff9b85;
  }
}
/*Animation Loop by Kevin Powell*/
/*https://www.youtube.com/watch?v=f3mwKLXpOLk&list=LL*/
body .bgAnimation {
	display: flex;
	min-height: 100vh;
	justify-content: center;
	align-items: center;
	background:#ffab39 !important; /* Old browsers */
	background-image: var(--gradient);
	background-size: 400% 400% !important;
	animation: bg-animation 20s infinite alternate ease-in-out;
}
@keyframes bg-animation {
0% {
background-position:left;
}
100% {
background-position: right;
}
}