html {
	scroll-behavior:smooth;
	backgroud:transparent;
	}
   
body{   
	height: 100%;
	margin: 0;
	color: #000;   
	data-scroll-time: 4;
}

a:link{
	cursor:pointer;
	text-decoration:none;
}

p, ul {   
	text-align: left;
	color: #000;
	font: 400 20px/1.8 "Montserrat", sans-serif;
}

.pearltech-BG { 
	background-image:url("/portfolio-images/pearltech.jpg");  
	position: relative;  
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;	
    }

.bluetech-BG {	
	background-image: url("/portfolio-images/bluetech.gif");
	background-size: 150% 230%;
	animation: bluetech 35s linear infinite;
    animation-direction: alternate;
    }
@keyframes bluetech {
    0% {background-position: 0%}
    100% {background-position: 100%}
}
/*
.orangetech-BG {    
	background-image: url("/portfolio-images/orangetech_resume.gif");
	background-size: 200% 200%;
	animation: orangetech 25s linear infinite;
    animation-direction: alternate;
    }
@keyframes orangetech {
    0% {background-position: 0%}
    100% {background-position: 100%}
}
*/

.border-groove {
	border-top-style: groove;
	border-bottom-style: ridge;
	border-color:silver;
	border-width:6px;
  }
  
.educ {		/*spacing of school names in Education panel*/
    word-spacing: 4px; 
	margin-left:10px;
}

.honors {
	font-size:16px; 
	padding-left: 30px;
	position: relative;
	top:-6px;
}

.eduInfo{	/*Education panel color*/
	opacity:.9; 
    background-color:#506D91;
}

.eval {		/*employer evaluation quotes*/
	background-color:#FBFEAE;
	opacity:.8; 
	font-size:16px;
	width: 70%;
}
.emp {margin-left:150px;}

.empname{
	font-size: 1.1em;
	letter-spacing: 1px;
	margin-right: 1.3em;
}

.empdate,
.empdatemobile {
	color:darkcyan;
	font-size: 16px;
}

@media screen and (min-width:1060px){
	.empdate{padding-left:40px;}
	.empdatemobile{display:none;}
}
@media screen and (max-width:1050px){.empdate{display:none}}
@media screen and (max-width:731px){.emp{margin-left:10px;}}

 /* HORIZONTAL SEPARATION LINES IN JOB HISTORY ONLY ON SMALL PHONES */
 
/* Create a horizontal divider */
.pg-divider{padding-bottom:12px;text-align:center}.pg-divider-line{width:150px;height:1px}.pg-divider-line,.pg-divider-tick{display:inline-block;background-color:#929292;vertical-align:middle}.pg-divider-tick{width:1px;height:9px;margin:0px 3px}.pg-divider-line,.pg-divider-tick{display:inline-block;background-color:#929292;vertical-align:middle}
.pg-skinny{width:100%;max-width:600px;margin-left:auto;margin-right:auto}

@media screen and (min-width: 1110px){#mobile-job {display:none;}} 
@media screen and (max-width: 500px){.pg-divider-line{width:100px;}}
@media screen and (max-width: 250px){.pg-divider-line{display:none;}}


 /* ======= h1 section heading text ============== */
h1 {
	color: beige;
	text-shadow: 2px 2px 2px black;
	margin-left: 6%; 
}  

/* Objective and Profile headers of top Intro section*/
h2 {		
	letter-spacing: 2px;
	text-transform: uppercase;
	font: 24px 'Artifika';
	margin-left: 30px;
	background-color: transparent;
	color: transparent;
	background: #061543;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	text-shadow: 0px 3px 3px rgba(255,255,255,0.5);

}

@media screen and (min-width: 241px) and (max-width: 601px){
	h1 {font-size:35px;  margin-left:-14px;}     
	h2 {margin-left: -0.2em;}
	
}
 
@media screen and (max-width: 241px){
	h1 {margin-left: -2em; font-size:25px;}
	h2 {margin-left: -0.4em; font-size: 18px;}
	}
			
h3 {
	letter-spacing: 5px;
	font: 20px "Montserrat", sans-serif;
	color: #111;  
  }

/* =============HEADER NAV CONTENT ============*/

.address{		/*position contact info in nav bar and hide/show for responsive display*/
	font-size:16px;
	text-align: right; 
	margin-left:20px; 
	color: #2A7BB5;
	font-family: 'Raleway', sans-serif;	
	text-shadow: 0 1px 0 rgba(255,255,255,.3),0 -1px 0 rgba(0,0,0,.7);
}

/* Large personal name fades in as .main-name fades out */
.lgname {
	font-size: 28px;
	color: white;
	text-shadow: 0 1px 0 rgba(255,255,255,.3),0 -1px 0 rgba(124, 80, 33,.7);
	line-height: 2em;
}  

/* personal name on small nav display */
h3.mobile-name{    
	margin-top: 2em; 
	margin-left: 1.5em;
	color: #FFF;
	text-shadow: 0 1px 0 rgba(255,255,255,.3),0 -1px 0 rgba(0,0,0,.7);
}

/* opening personal name atop address that fades in & out on scroll */
 .main-name{  
	color:#ffffff; 
	font-size:22px;
	text-shadow: 0 1px 0 rgba(255,255,255,.3),0 -1px 0 rgba(0,0,0,.7);
}  

/* WEBSITE NAME & HEADER INFO ON SMALL NAV */

@media screen and (max-width: 1010px) {#fade-in-content {display:none;}}

@media screen and (min-width:760px){
	h3.mobile-name{display:none;}
}


@media screen and (max-width: 760px){
	.f-in, .f-out, .main-name, span.lgname, .address {display:none;}
} 

@media screen and (max-width:731px){
 .portrait{display:none;}
 } 

/* mylogo is my portrait in header  */
 #mylogo, #mylogo2 {
	width:110px; 
	height:110px; 
	float:left; 
	margin: 5px 20px 2px 3px; 
	border-radius:50%;
}

@media screen and (max-width: 968px){
 #mylogo, #mylogo2 {
	margin: 1em 4em 2em 5em;
	width: 80px;
	height: 80px;
	}
}
  

/* =============== END HEADER NAV CONTENT ===================== */		

.infopanel {		/*panels containing text*/
    background:
	linear-gradient(to right, hsl(215, 100%, 93.5%) 0%, hsla(214, 100%, 90%, 0%) 20%, hsla(214, 100%, 90%, 0%) 50%, hsla(214, 100%, 90%, 0%) 80%, hsl(215, 100%, 95.3%) 100%);
	padding-bottom: 50px;
 }  

.introsection{		/*introduction panel qualities*/
	position:relative; 
	margin-bottom:-9px;
}

@media screen and (min-width:1030px) {
	.introsection{		/*introduction panel qualities*/
		padding-top: 200px;
	}	
}
/* @media screen and (min-width: 965px) and (max-width: 1201px){.introsection{margin-top:18.8%;}} */
.itemtitle{	       /* containers of resume item titles*/ 
	padding:30px 80px; 
    text-align:left; 
    opacity: .8;
    
    }
    
main {margin-top:-12%;}

@media screen and (max-width: 501px){
	main, .introsection{margin-top:20px;} 
	.itemtitle {padding: 30px;}
}
@media screen and (min-width: 502px) {main, .introsection{padding-top: 70px;}}
@media screen and (min-width:766px) and (max-width: 969px){.introsection{padding-top:150px;}} 


 
p, ul {		
	text-align: left; 
	color:#000; 
	font: 400 20px/1.5 "Montserrat", sans-serif;
} 

ul.inline-list li {list-style: none}

ul.inline-list li a {padding-left: 8px;}

ul.inline-list li:before {
   content:"\2636";
}

	 /* courseload popup box on "Certificate" */
.popover{z-index:2;}	

.popover-title {
    background-color: #f6a186; 
}

.popover-content {
    background-color: #eee;
}
/* popup right-hand arrow */
.arrow {
    border-right-color: lightblue !important;
  }	
 
/* PROGRESS BARS */
.skill{
	width: 0;
	background: linear-gradient(white,teal, silver);  
	height: 30px;
	line-height: 30px;
	padding-left:12px;
	border-radius: 16px;
}

.progressbars{  /* container for progress bars */
    width: 90%;
    background: #eee;
    height: 30px;
    margin: 8px 1px;
    border-radius: 16px;
}

.lg-graphScale{		/*position skills graphic*/
	display: flex;
  flex-wrap: wrap;
  justify-content: center;
	margin-left:5%;
}
 
.sm-graphScale {
	margin-left:8%;
	display: flex;
	flex-wrap: wrap;
}

.graphtext{		/*position white text of progressbars*/ 
	font-size:18px; 
	line-height: 30px;
	text-shadow:0 -1.5px 0 #777;
	color: honeydew;
	padding-left:8px; 
	margin-top:-1px;
} 


.sm-graphtext{
	font-size: 16px; 
	color: #777;
}

@media screen and (min-width: 961px){
    .sm-graphtext, .sm-graphScale{display:none;}
} 

@media screen and (max-width: 960px){
	.lg-graphtext, .lg-graphScale {display:none;}
	
}
 
table, tr, td {
	margin-left:10%; 
	color:#000;
}	

table {		/*table in Employment History panel*/
    border-collapse: collapse;
    width: 100%;
}

.textcontent, .texteducation, .textskills{		/*text positioning in panels containing text */
	margin-bottom: -9px; 
	opacity: .8;
}
.texteducation, .textskills{
	padding: 4em 0 2em;
}

.textcontent {
	padding-top: 70px !important;
	padding-bottom:60px;
}
 
.textcontent, .textskills{
	margin-left:15%;
	margin-right:15%; 
}  
  
.textemployment{	/*text positioning in table of Employment History panel*/
	margin-left:18%;
	margin-right: 22%;
	opacity:.8;
	padding: 5em 0;
}

.texteducation {
	margin-left: 12%;
}

a.coursepop {
	color: #000;
}
a.coursepop:hover {
	color: teal;
}
a.coursepop span.fa {
	color: #063d65;
}

@media screen and (min-width:900px) {
.textcontent p.worklog {
	margin-bottom: 2em;
	}
}

@media screen and (max-width: 1400px){
	.texteducation, .textskills{
   margin-right:10%;
    }
}  

@media screen and (max-width:960px){
	.textemployment table td, .textcontent p{
		content: " ";
		display: table;
		clear: both;
		margin-bottom:1em;
	}
}

 
@media screen and (max-width:770px)	{
	.texteducation, .textskills {
		margin-left: 5%;
		margin-right: 5%;
	}
}
	
@media screen and (max-width: 501px){
	.textcontent, .textemployment table td, .texteducation {
       margin: 0 8%; 
 }
	.textskills{
		padding-right:2em;
		margin: 0 5%;
		}	
 }	 

th, td {
    padding: 15px;
    font-size: 18px;
}

.download {
	float:left; 
	width: 150px;
	height: 80px;
	margin: -25px 0 0 10px; 
	background-color:powderblue; 
	border-radius: 8px; 
	padding: 3px 5px 0;
	text-align:center;
	transition: 500ms;
	box-shadow: 4px 4px 4px gray;
}

.download:hover {
	box-shadow:none;
	border: inset 1px;
	background-color: #a6e2a9;
}

.download p {
	color: #777;
	font-size:14px;
}

.download a > i.fa.fa-arrow-circle-down {
	font-size:52px; 
	color: #777; 
	border:none;
	margin-left: -16px;
	
}
	
@media screen and (max-width:1700px) {
	#wrapper, .navbar {
		margin: 0;
		}
}

.volunteer {
	position:relative;
}

.volunteer a {
	padding-right: 1em;
	color: transparent;
	background: #061543;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	text-shadow: 0px 3px 3px rgba(255,255,255,0.5);
	font-family: Artifika;
}

.volunteer a:hover {
	color: transparent;
	background: #ee420b;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	text-shadow: 0px 3px 3px rgba(255,255,255,0.5);
}

.volunteer-title {
	background-color:#81B9D5;
	text-align:left; 
	padding: 4px 20px; 
	opacity: .9;
}