/* Michael Beaudry Design CSS */


/* Fonts

font-family: "neue-haas-unica", sans-serif;
font-weight: 400;
font-style: normal;

font-family: "neue-haas-unica", sans-serif;
font-weight: 400;
font-style: italic;

font-family: "neue-haas-unica", sans-serif;
font-weight: 500;
font-style: normal;

font-family: "neue-haas-unica", sans-serif;
font-weight: 600;
font-style: normal;

font-family: "neue-haas-unica", sans-serif;
font-weight: 700;
font-style: normal;

*/


@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");

/* Colors

Main Green: #00b875;

*/



/* Universal */

* {
	font-family: neue-haas-unica, sans-serif;
	font-style: normal;
	font-weight: 400;
	color: #000;
	transition: all 0.3s;
}

a {
	color: #00b875;
	text-decoration: none;
}

h1 {
	font-weight: 700;
	line-height: 1em;
	letter-spacing: -0.03em;
}

h1.index-h1 {
		color: #fff;
		line-height: 0.85em;
	}

h2 {
	font-weight: 700;
	line-height: 1em;
	letter-spacing: -0.03em;
}

h3 {
	font-weight: 600;
	line-height: 1.2em;
}

h4 {
	font-weight: 400;
	line-height: 1.4em;
	color: #777;
	padding-bottom: 0.6em;
}


p {
	font-weight: 400;
}

p em {
	font-style: italic;
}

ul li {
	padding-bottom: 0.6em;
}

i {
	font-size: inherit;
	color: inherit;
}

.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}


hr {
	border: none;
	border-bottom: 5px solid #000;
	opacity: 1;
}

hr.thin-divider {
	border: none;
	border-bottom: 1px solid #444;
	opacity: 1;
	margin: 4em 0em;
}

hr.thinner-divider {
	border: none;
	border-bottom: 1px solid #444;
	opacity: 1;
	margin: 1.5em 0em 2em 0em;
}

img, video {
	width: 100%;
}


.space-bottom {
	margin-bottom: 2em;
}


.space-bottom-large {
	margin-bottom: 4em;
}



.rounded-corners {
	overflow: hidden;
	padding: 2.5em;
}


.drop-shadow {
	box-shadow: 10px 15px 30px rgba(0,0,0,0.3);
}


/* Nav, Footer */



.nav-options {
	display: inline-block;
	text-align: right; 
	width: auto;
}

.nav-options a, .nav-options a:visited {
	color: #000;
	color: #777;
	padding: 0.5em 0.8em;
}

.nav-options a:hover, .nav-options a.current {
	color: #00b875;
}

footer {
	padding: 4em 0em 2em 0em;
}

footer .footer-options {
	display: inline-block;
	text-align: center; 
	width: auto;
}

footer .footer-options a, footer .footer-options a:visited {
	color: #000;
	padding: 0.2em 0.4em;
}

footer .footer-options a:hover {
	color: #00b875;
}

footer p.copyright {
	font-size: 1em;
}




/* Links */

a.imglink {
	display: block;
	padding: 1em 0.5em 1.5em 0.5em;
}

a.imglink:hover {
	padding: 0em 0.5em 2.5em 0.5em;
}

.img-holder, a.skillslink {
	display: block;
	overflow: hidden;
	box-shadow: 0px 5px 10px rgba(0,0,0,0.3);
	position: relative;
}


a.imglink:hover .img-holder, a.skillslink:hover {
	/*box-shadow: 0px 10px 20px rgba(0,0,0,0.5);
	margin: 0em 0.5em 2.5em 0.5em;*/
	box-shadow: 0px 8px 25px rgba(0,0,0,0.7);
}

a.imglink .img-holder h3.linktext {
	color: #fff;
	font-weight: 600;
	padding: 0.5em 0.7em;
	position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
	text-shadow: 0px 2px 8px rgba(0,0,0,0.4);
}


 a.skillslink {
 	background: #00b875;

 	margin: 0.5em 0.5em 2em 0.5em;
 }

  a.skillslink:hover {
 	background: #000;
 }

  a.skillslink:hover h3.linktext {
  	color: #00b875;
 }

 a.skillslink i {
 	text-align: right;
 	display: inline-block;
 	float: right;
 	font-size: 80%;
 }

 a.skillslink h3.linktext {
	color: #fff;
	font-weight: 600;
	padding: 0.5em 0.7em;
	/*text-shadow: 0px 2px 8px rgba(0,0,0,0.7);*/
}


a.tag-link, button.expander {
	display: inline-block;
	border-radius: 50px;
	font-weight: 500;
	padding: 0.3em 0.8em;
	margin: 0em 0.5em 0.5em 0em;
	color: #4c4c4c;
	border: 2px solid #4c4c4c;
	background: #fff;
}

a.tag-link:hover, button.expander:hover {
	color: #fff;
	border: 2px solid #000;
	background: #000;
}


button.expander {
	float:right;
}

h4 a i {
	padding-right: 0em;
}

h4 a:hover i {
	padding-right: 0.5em;
}



p a, ul li a {
	color: #00b875;
	text-decoration: none;
	border-bottom: 2px solid rgb(0, 184, 117, 0);
}

p a:hover, ul li a:hover {
	border-bottom: 2px solid rgb(0, 184, 117, 1);
}




/* Tooltip */


.custom-tooltip {
  --bs-tooltip-bg: #00b875;
  --bs-tooltip-color: #fff;
  --bs-tooltip-font-size: 1.7em;
  --bs-tooltip-opacity: 1;
}










/*  Responsive Sizes  */

  	h1 {
		font-size: 3.4em;
	}
/*
	h1.sub-h1 {
		font-size: 3.4em;
	}

	h1.index-h1 {
		font-size: 4em;
	}
*/
	h2 {
		font-size: 2.4em;
	}

	h3 {
		font-size: 2em;
	}

	h4 {
		font-size: 1.5em;
	}

	p, ul li {
		font-size: 1em;
	}
	.nav-options a, footer .footer-options {
		font-size: 1em;
	}

	a.imglink h3.linktext, a.skillslink h3.linktext {
		font-size: 2.3em;
	}
	.container-xxl {
		--bs-gutter-x: 1.5rem;
	}
	a.home-link {
		max-width: 110px;
	}
	.rounded-corners, a.imglink .img-holder, a.skillslink {
		border-radius: 15px;
	}
	nav {
		padding: 1em 0em 2em 0em;
	}

	.space-bottom-xl {
		margin-bottom: 4em;
	}

	.shadow-box {
		padding: 1em;
	}

	button.expander {
		padding: 8px;
		vertical-align: middle;
		text-align:center;
	}
	button.expander i {
		display: inline-block;
		font-size: 1em;
		height: 26px;
		width: 26px;
		border-radius: 50%;
	}





@media (min-width: 576px) {
  	h1 {
		font-size: 5em;
	}
/*
	h1.sub-h1 {
		font-size: 3.6em;
	}

	h1.index-h1 {
		font-size: 5em;
	}
*/
	h2 {
		font-size: 3em;
	}

	h3 {
		font-size: 2em;
	}

	h4 {
		font-size: 1.5em;
	}

	p, ul li {
		font-size: 1em;
	}
	.nav-options a, footer .footer-options {
		font-size: 1em;
	}

	a.imglink h3.linktext, a.skillslink h3.linktext {
		font-size: 2.3em;
	}
	.container-xxl {
		--bs-gutter-x: 2rem;
	}
	a.home-link {
		max-width: 200px;
	}
	.rounded-corners, a.imglink .img-holder, a.skillslink {
		border-radius: 15px;
	}
	nav {
		padding: 1em 0em 3em 0em;
	}

	.space-bottom-xl {
		margin-bottom: 4em;
	}

	.shadow-box {
		padding: 1em;
	}

	button.expander {
		padding: 10px;
		vertical-align: middle;
		text-align:center;
	}
	button.expander i {
		display: inline-block;
		font-size: 1.3em;
		height: 30px;
		width: 30px;
		border-radius: 50%;
	}

}


@media (min-width: 768px) {
	h1 {
		font-size: 6em;
	}
/*
	h1.sub-h1 {
		font-size: 4.5em;
	}

	h1.index-h1 {
		font-size: 8em;
	}
*/
	h2 {
		font-size: 4em;
	}

	h3 {
		font-size: 2.6em;
	}

	h4 {
		font-size: 1.8em;
	}

	p, ul li {
		font-size: 1.2em;
	}
	.nav-options a, footer .footer-options {
		font-size: 1.3em;
	}

	a.imglink h3.linktext, a.skillslink h3.linktext {
		font-size: 2.8em;
	}
	.container-xxl {
		--bs-gutter-x: 3rem;
	}
	a.home-link {
		max-width: 250px;
	}
	.rounded-corners, a.imglink .img-holder, a.skillslink {
		border-radius: 20px;
	}
	nav {
		padding: 1em 0em 4em 0em;
	}

	.space-bottom-xl {
		margin-bottom: 6em;
	}

	.shadow-box {
		padding: 2em;
	}

	button.expander {
		padding: 10px;
		vertical-align: middle;
		text-align:center;
	}
	button.expander i {
		display: inline-block;
		font-size: 1.4em;
		height: 34px;
		width: 34px;
		border-radius: 50%;
	}

}
@media (min-width: 992px) {
	h1 {
		font-size: 8em;
	}
/*
	h1.sub-h1 {
		font-size: 6em;
	}

	h1.index-h1 {
		font-size: 11em;
	}
*/
	h2 {
		font-size: 5em;
	}

	h3 {
		font-size: 2.8em;
	}

	h4 {
		font-size: 2em;
	}

	p, ul li {
		font-size: 1.4em;
	}
	.nav-options a, footer .footer-options {
		font-size: 1.6em;
	}

	a.imglink h3.linktext, a.skillslink h3.linktext {
		font-size: 3em;
	}
	.container-xxl {
		--bs-gutter-x: 4rem;
	}
	a.home-link {
		max-width: 250px;
	}
	.rounded-corners, a.imglink .img-holder, a.skillslink {
		border-radius: 30px;
	}
	nav {
		padding: 1em 0em 5em 0em;
	}

	.space-bottom-xl {
		margin-bottom: 8em;
	}

	.shadow-box {
		padding: 3em;
	}

	button.expander {
		padding: 10px;
		vertical-align: middle;
		text-align:center;
	}
	button.expander i {
		display: inline-block;
		font-size: 1.6em;
		height: 40px;
		width: 40px;
		border-radius: 50%;
	}

}
@media (min-width: 1200px) {
	h1 {
		font-size: 10em;
	}
/*
	h1.sub-h1 {
		font-size: 7em;
	}

	h1.index-h1 {
		font-size: 13em;
	}
*/
	h2 {
		font-size: 6em;
	}

	h3 {
		font-size: 3em;
	}

	h4 {
		font-size: 2.2em;
	}

	p, ul li {
		font-size: 1.6em;
	}
	.nav-options a, footer .footer-options {
		font-size: 2em;
	}

	a.imglink h3.linktext, a.skillslink h3.linktext {
		font-size: 3.5em;
	}
	.container-xxl {
		--bs-gutter-x: 5rem;
	}

	a.home-link {
		max-width: 250px;
	}
	.rounded-corners, a.imglink .img-holder, a.skillslink {
		border-radius: 30px;
	}

	a.tag-link {
		font-size: 1.6em;
	}

	nav {
		padding: 1em 0em 6em 0em;
	}

	.space-bottom-xl {
		margin-bottom: 8em;
	}

	.shadow-box {
		padding: 3em;
	}

	button.expander {
		padding: 10px;
		vertical-align: middle;
		text-align:center;
	}
	button.expander i {
		display: inline-block;
		font-size: 1.6em;
		height: 40px;
		width: 40px;
		border-radius: 50%;
	}

}





.black-top {
	/*background: #000;*/
	margin-bottom: 5em;
	padding-bottom: 5em;
}

.black-top h1, .black-top h3, .black-top p {
	color: #fff;
}

.black-top a.tag-link {
	color: #cecece;
	border: 2px solid #cecece;
	background: #000;
}

.black-top a.tag-link:hover {
	color: #000;
	border: 2px solid #fff;
	background: #fff;
}





/*------------- Fade  ----------------*/



.fade-in-up-on-scroll {
	opacity: 0;
}

/* CSS */
@keyframes fadeInUp {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  20% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.fade-in-up {
  animation: 1.0s both fadeInUp;
} 




/*----- Expander ---------------*/

.expandercontent {
	max-height: 0;
  	overflow: hidden;
}



.expandercontainer button.expander i {
	transform: rotate(0);
}

.expandercontainer.active button.expander i {
	transform: rotate(45deg);
}




/* --------- Home small rotator -------------- */




.home-subtop-rotator img {
	opacity:0;
}

.home-subtop-rotator {
	animation: home-subtop-rotator 20s infinite;
}

@keyframes home-subtop-rotator {
  0% {
    opacity: 0%;
    background: url('../img/subtopimg-lpi.png') no-repeat center;
    background-size: contain;
  } 
  2% {
    opacity: 100%;
  }
  18% {
  	opacity: 100%;
  }
  20% {
  	opacity: 0%;
  	background: url('../img/subtopimg-lpi.png') no-repeat center;
    background-size: contain;
  }
  21% {
    opacity: 0%;
    background: url('../img/subtopimg-hcp.png') no-repeat center;
    background-size: contain;
  } 
  23% {
  	opacity: 100%;
  }
  38% {
  	opacity: 100%;
  }
  40% {
  	opacity: 0%;
  	background: url('../img/subtopimg-hcp.png') no-repeat center;
    background-size: contain;
  }
  41% {
    opacity: 0%;
    background: url('../img/subtopimg-rcs.png') no-repeat center;
    background-size: contain;
  } 
  43% {
  	opacity: 100%;
  }
  58% {
  	opacity: 100%;
  }
  60% {
  	opacity: 0%;
  	background: url('../img/subtopimg-rcs.png') no-repeat center;
    background-size: contain;
  }
  61% {
    opacity: 0%;
    background: url('../img/subtopimg-ascny.png') no-repeat center;
    background-size: contain;
  } 
  63% {
  	opacity: 100%;
  }
  78% {
  	opacity: 100%;
  }
  80% {
  	opacity: 0%;
  	background: url('../img/subtopimg-ascny.png') no-repeat center;
    background-size: contain;
  }
  81% {
    opacity: 0%;
    background: url('../img/subtopimg-aes-2017.png') no-repeat center;
    background-size: contain;
  } 
  83% {
  	opacity: 100%;
  }
  98% {
  	opacity: 100%;
  }
  99% {
  	opacity: 0%
  }
  100% {
    opacity: 0%;
    background: url('../img/subtopimg-aes-2017.png') no-repeat center;
    background-size: contain;
  } 
  
}




/* Preloader -------  */


.page-loader {
    width: 100%;
    height: 100vh;
    position: fixed;
    background: #fff;
    z-index: 6000;
    top: 0;
  	bottom: 0;
  	left: 0;
  	right: 0;
  }

p.pageloader {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  margin: -1.5em -2em;
  width: 5em;
  font-size: 2.8em;
  text-align: center;
  
}

p.pageloader span.elipses::before {
  content: 'Loading';
  animation: pageloader 10s infinite;
  opacity: 0%;
  color: #00b875;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2.5px;
}

@keyframes pageloader {
  0% {
    opacity: 0%;
  } 
  3% {
    opacity: 100%;
  }
  30% {
    opacity: 100%;
  }
  33% {
    opacity: 0%;
  }
  36% {
    opacity: 100%;
  }
  64% {
    opacity: 100%;
  }
 
  67% {
    opacity: 0%;
  }
  70% {
    opacity: 100%;
  }
  97% {
    opacity: 100%;
  }
  100% {
    opacity: 0%;
  }
}