* {
	box-sizing:border-box;
}

body, html {
	height: 100%;
	margin: 0;
   
}

.blutextArea { 
	/* background: linear-gradient(90deg,#F4FAF9, white, white, white, #F4FAF9); */
	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%);
	position:relative;
	z-index: 4;
}

a:link{
	color:teal;
	text-decoration:none;
}

/* give this class the aritifika font face */
.artifika {font-family: Artifika;}


/* Fixed BACKGROUND IMAGES */
.pearltechBG, .stripeBG, .headerBG{
	position: relative;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.pearltechBG, .stripeBG{
	opacity:1;
}


/* short bluetech background */
.bluetech-BG {
	position: relative;
	opacity: 0.8;
	min-height: 80px;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.bluetech-BG {	
	background-image:url("/portfolio-images/bluetech.gif");
	min-height: 80px;
	padding:30px 80px; 
	text-align:left; 
	margin:-14px 0;
}
     
.headerBG::after {	
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
	background-image:url("/portfolio-images/HI-sky.webp");  
	background-size:cover;
	min-height: 120px;
	opacity: 0.8;
}

	
/*======= ABOUT ME BACKGROUND ============*/
.introBG{
	position: relative;
	/*background-repeat: repeat-y;*/
    background-size: cover;
	background-image:url("/portfolio-images/introBG-tall.png");    
	background-repeat: repeat-y;
	padding: 10%;
	opacity: 0.8;
	animation: aboutgraphic 64s linear infinite;
   /* animation-direction: alternate; */
    }
	
@keyframes aboutgraphic {
    0% {background-position: top}
    100% {background-position: 100%}
}	


.pearltechBG {  
	background-image:url("/portfolio-images/pearltech.jpg");
	min-height: 280px;
  
}

.stripeBG {
	background-image:url("/portfolio-images/stripeBG.jpg");
	min-height: 200px;
}

.border-groove {
	border-top-style: groove;
	border-bottom-style: groove;
	border-color:silver;
	border-width:6px;
 }

/* ---------------------------BEGIN CAROUSELS & TESTIMONIAL CROWD---------------- */

blockquote {
   	 border-left:none;	 
}

cite{
	color: #000;
	font-size:18px;
}


#fadeCarousel {
	position: relative;
	margin-top: 1em;
}

.carousel-indicators {
	background-color: #2A7BB5;         
	background: -webkit-linear-gradient(to bottom right, #DAF9ED, transparent 40%, #CEF6F5),
			 -webkit-linear-gradient(to top right,  #ddd, transparent 50%,  #1C67B1 ) #1C67B1;	
	background: -o-linear-gradient(to bottom right, #DAF9ED, transparent 40%, #CEF6F5),
			 -o-linear-gradient(to top right,  #ddd, transparent 50%,  #1C67B1 ) #1C67B1;	
	background: -moz-linear-gradient(to bottom right, #DAF9ED, transparent 40%, #CEF6F5),
			 -moz-linear-gradient(to top right,  #ddd, transparent 50%,  #1C67B1 ) #1C67B1;	
	background: linear-gradient(to bottom right, #DAF9ED, transparent 40%, #CEF6F5),
			 linear-gradient(to top right,  #ddd, transparent 50%,  #1C67B1 ) #1C67B1;	
	left:68%;
	width:25%;
	z-index: 2;
	border-radius: 20px;	  
}

.carousel-inner .item blockquote{padding: 5em;}

.carousel-inner > .item > a > img, 
.carousel-inner > .item > img,
.carousel-inner img {
	width: 80%; 
	margin: auto;
}

/* fade in carousel images */

.carousel-fade .carousel-inner .item {
	opacity: 0;
	transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
	opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
	left: 0;
	opacity: 0;
	z-index: 1;
}

.carousel-fade .carousel-inner .nextone.left,
.carousel-fade .carousel-inner .previous.right {
	opacity: 1;
}

.carousel-fade .carousel-control {
	z-index: 2;
}

@media and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.nextone,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.previous,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.nextone.left,
    .carousel-fade .carousel-inner > .item.previous.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

/* this sizes the carousel of websites on monitors on home page */
.item img{width: 80%; height: auto;}


.testimonial-indicators{ 
	position:absolute;
	bottom:20px;
	left:38%;
	width:25%;
	padding-left:0;
	text-align:center;
	list-style:none;
	background-color: #8FCFCF;   
	border-radius: 20px;    
    opacity: 0.8; 
	z-index: 2;
}

.testimonial-indicators li{
	display:inline-block;
	width:10px;
	height:10px;
	margin:1px;
	text-indent:-999px;
	cursor:pointer;
	background-color:rgba(0,0,0,0);
	border:1px solid #fff;
	border-radius:10px;
}

.testimonial-indicators .active{
	width:12px;
	height:12px;
	margin:0;
	background-color:#fff;
}

/*------------------
                   PLACE ANIMATED GIF OF TESTIMONIAL CROWD----------*/

.testimonialCrowd{
	background: url('/portfolio-images/testimonialCrowd.gif');
	background-repeat: no-repeat;
	z-index: -1;
	width: auto;
	height: 200px;
	margin-left: 12%;

}
     
/*-----------------END FADE IN CAROUSEL & TESTIMONIAL CROWD GIF----------------*/

	

	/* Chrome Borders of .subject-heads */
.chromeBorder-btm, .chromeBorder-top {
	width: 100%; 
	height: auto; 
	position:relative;
	z-index:4;
}

.chromeBorder-btm {
	margin-top: 0;
	margin-bottom:-10px;
	}	
	
.chromeBorder-top {
	margin-top: -22px;
	}
	
/* CONTACT MODAL */
/* SnapHost container */

#contact {
	background-color: #E1FA9A; 
	z-index:15;
}

#myform {margin-right: 9em;}

.contactbox {
	border-style: solid; 
    color:white; 
	border-width: 1px; 
	padding: 6px; 
	width:10%; 
	height: auto; 
	margin:auto;
	text-align:center;

} 

.contactbox:hover {
  background-color: #ccc !important;
}

.contactbox:hover h4 {
   color: #000 !important;
}

.contact-panel {
	text-align:center; 
	background-color: #942424; 
	padding:20px 80px; 
	margin:-14px 0;
}
 
.contact-panel p{ text-align: center; }
.contact-panel a {color: white;}

/* Contact footer item icons and styling */
.contactme:before{content:"\f007"}
.envelope:before{content:"\f0e0"}
.phone:before{content:"\f095"}

            
h1 {
	text-align:left; 
	color:silver;
 }
 
h1.load-text {
	font-family: 'Fascinate Inline', cursive; 
	color:#f4511e;	
	text-align:center;
	text-shadow: 0 2px 2px #000;

}

h2.orbitron {
	color: silver;
	letter-spacing: 5px;
	text-transform:uppercase;
	font-size:24px;
	font-family: 'Orbitron', sans-serif;
	text-shadow: 2px 2px 2px black;
	margin-left: 3%;
	background-color:transparent;
	z-index:2;

}

			
h3 {
	letter-spacing: 5px;
	font: 20px "Lato", sans-serif;
	color: #111;
}

h4.skills {
	font-size: 170%;
	color: #f4511e; 
	margin-left:-4px;
	font-family: 'Fascinate Inline', cursive; 
	text-align:center; 
	text-shadow: 0 2px 2px #000;
}	

.introsection {
	margin-top:10%;
}
  
  
 /* -----------------------
	Experience CounterUp
 -------------------------- 
.section-counter {
  background-image: url(/portfolio-images/bluebubbleBG.png);
  background-repeat: repeat;
  background-attachment: fixed;
  background-size: 200%;
  background-position: center center;
  animation: aboutgraphic 30s alternate infinite;
}
*/
#counterBG{
  background-image: url(/portfolio-images/bluebubbleBG.png);
  background-repeat: repeat-y;
/*  background-attachment: fixed;
  background-size: 200%; */
  animation: aboutgraphic 120s linear infinite; 
  position: relative;
  z-index: -1;
}
 
.countercontainer {
	width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  position: relative;
   margin-bottom: -180px;
}


.countercontainer .col-sm-3.col-lg-3 {
	margin: auto;
}

.counteroverlay {
  position: absolute;
  top: -100px;
  left: 0px;
  padding: 0;
  height: 490px;
  width: 100%;
  opacity: 0.7;
  background-color: #2a647138;  
  z-index: 1;
}

.paralax-mf {
  position: relative;
  padding: 8rem 0;
}


.counterrow {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin:auto;
}

.icon-inner {
display: block;
  height: 100%;
  width: 100%;
}

.counter-box {
  color: #f26a07;
  text-align: center;
  margin-bottom: 1.8rem;
}

.counter-ico {
  margin-bottom: 1rem;
}

.counter-ico .ico-circle {
  height: 90px;
  width: 90px;
  line-height: 4.1;
  box-shadow: 0 0 0 4px #cde1f8;
  font-size: 2rem;
  border-radius: 50%;
  margin: 0 auto;
  text-align: center;
  display: block;
  background: radial-gradient(circle at center, rgb(26, 146, 192),rgb(102, 218, 252));
}

.counter-text, 
.counter-num .counter {
	font-family: Artifika;
	color: transparent;
	background: #061543;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	text-shadow: 0px -2px 0px rgba(255,255,255,0.5);
}

.counter-text {
	font-size: 1.3em;
}

.counter-num .counter {
  font-size: 2rem;
  margin-bottom: 0;
  text-align: center;
  font-weight: 800;
}

.md.hydrated {
   font-size: 60px;
   margin-top: 10px;
}
/* ------------------------------------
                   BEGIN LIGHTBOX MODAL --------------------------------*/

#myModal {
	margin-top: 0;
	z-index:22;
	}
	

.row-1, .row-2, .row-3{text-align:center;}

.row-1 >.column, .row-2 >.column, .row-3 >.column {
  padding: 0 8px;
    -webkit-animation:animatezoom 1s;animation:animatezoom 1s}
	@-webkit-keyframes animatezoom{from{-webkit-transform:scale(0)} to{-webkit-transform:scale(1)}}
	@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}   
	
.row-1::after, .row-2::after, .row-3::after {
	content: "";
	display: table;
	clear: both;
}

.column {
	float: left;
	width: 25%;
	color: white;
	margin-bottom: 4em;
}

.column img {
	width:200px;
	height:200px; 
	object-fit:cover;
	border-radius: 50%;
	border: solid 8px #f0fffc;
}
 
.image-samples { 	
	padding: 10% 0;
}
             
	
/* image containers for page preview displays of slide images*/
.imgBox, .imgCir {
	width:14em; 
	height:14em; 
	margin-bottom: 40px; 
	margin-left: 10px; 
	cursor: pointer;
}

.imgCir {border-radius: 50%;}

/* ON HOVER SCALE BUTTONS UP */
.imgCir:hover, .imgBox:hover{ 
	-ms-transform: scale(1.2,1.2); /* IE 9 */
	-webkit-transform: scale(1.2,1.2); /* Safari */
	transform: scale(1.2,1.2); /* Standard syntax */
	transition: 0.5s ease;  
	box-shadow: 10px 10px 18px #777;    
}

/* The Lighbox Modal background */
.modal {
	margin-top: 2%;
	display: none;
	position: fixed;
	z-index: 4;
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: #474747; 
}

/* Modal Content */
.modal-content {
	position: relative;
	background-color: #BFBEBE;
	margin: auto;
	padding: 0;
	width:80%;
	max-width: 1000px; /* max-width determines size of displayed slide */
}

/* The Close Button */
.close {
	color: white;
	position: absolute;
	top: 10px;
	right: 25px;
	font-size: 65px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

img {
	margin-bottom: -4px;
}

.mySlides {
	display: none;
}

.cursor {
	cursor: pointer;
}

/* Next & prev named buttons  CAUSES CAROUSEL TO JUMP*/
.previous,
.nextone {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -50px;
	color: white;
	font-weight: bold;
	font-size: 30px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	-webkit-user-select: none;
	background-color: rgba(0, 0, 0, 0.3);
}

/* Position the "next button" to the right */

.nextone {
	right: 0;
	border-radius: 3px 0 0 3px;
}


/* Number text (1/3 etc) */
.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}


.caption-container {
	text-align: center;
	background-color: #F3E2A9;
	padding: 2px 16px;
	color: black;
	font-family: 'Orbitron', sans-serif;
	font-size: 150%;
}

.demo {
	opacity: 0.6;
}

.active,
.demo:hover {
	opacity: 1;
}

img.hover-shadow {
	transition: 0.3s
}

.hover-shadow:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* ================== END LIGHTBOX MODAL =================*/

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

/* Text descriptions of the Index page's Graphics samples  */
p.desc-lg {
	font-family: Artifika;
	font-size: 1.3em;
	margin-top: -9px;
	margin-left:80px;
	color: transparent;
	background: #061543;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
	text-shadow: 0px 3px 0 rgba(255,255,255,0.5);
}	

p.desc-sm  {
	font-family: Artifika;
	font-size: 100%;
	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);
	margin-bottom:-5px;
}	

.panel-row {
	display: flex; 
	margin: auto;
}

table.snaphost-table{
	height:500px; 
	width:550px;
}

.snaphost-capcha-tbl{
	border:none; 
	background-color:#ffcc66;
}


 .subject-head{ 
    padding:30px 80px; 
    text-align:left; 
    margin:-16px 0;
	background-color:#1C67B1;
	background: -webkit-linear-gradient(to bottom right, #DAF9ED, transparent 35%, #CEF6F5),
				 -webkit-linear-gradient(to top right,  #ddd, transparent 30%,  #1C67B1 ) #000;	
	background:  -o-linear-gradient(to bottom right, #DAF9ED, transparent 35%, #CEF6F5),
				 -o-linear-gradient(to top right,  #ddd, transparent 30%,  #1C67B1 ) #000;
    background:  -moz-linear-gradient(to bottom right, #DAF9ED, transparent 35%, #CEF6F5),
				 -moz-linear-gradient(to top right,  #ddd, transparent 30%,  #1C67B1 ) #000;				 
     background: linear-gradient(to bottom right, #DAF9ED, transparent 35%, #CEF6F5),
				 linear-gradient(to top right,  #ddd, transparent 30%,  #1C67B1 ) #000;	
	background-size: 500% 200%;
	animation: subjectgrad 8s linear infinite;
    animation-direction: alternate;
	position: relative;
	z-index: 4;
    }
	
@keyframes subjectgrad {
    0% {background-position: 0%}
    100% {background-position: 100%}
}	

/*========= WHAT DO YOU NEED SKILLS SLIDER =========*/

.text-column {
    margin-top: 5em; 
	height: 120px;
	width: 510px;
	margin: 1em auto;
	background: -webkit-radial-gradient(#CEF6F5, transparent 40%, #82A6D3),
             -webkit-radial-gradient(#ddd, transparent 50%,  #ddd ) #FCFCFC;
     background: -o-radial-gradient( #CEF6F5, transparent 40%, #82A6D3),
             -o-radial-gradient( #ddd, transparent 50%,  #ddd ) #FCFCFC;		
     background: -moz-radial-gradient( #CEF6F5, transparent 40%, #82A6D3),
             -moz-radial-gradient(  #ddd, transparent 50%,  #ddd ) #FCFCFC;
     background: radial-gradient( #CEF6F5, transparent 40%, #82A6D3),
             radial-gradient(#ddd, transparent 50%,  #ddd ) #FCFCFC;	
	 background-size: 500% 500%;
	 animation: skillgrad 6s linear infinite;
     animation-direction: alternate; 
     border-radius: 12px;
	 opacity:0.95; filter: alpha(opacity=95);
	 box-shadow: 2px 2px 19px inset #4496b6;
     border-radius: 18px;
}
	
@keyframes skillgrad {
     0% {background-position: 0%}
     100% {background-position: 100%}
}

.text-column p {
	font-family: 'Abel', sans-serif;
	font-size: 1.5em;
	text-align:center;
}	
	
.skill-content {
	padding-top: 2.3em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slider-wrapper {
	font-size:20px;
	color:#333;
}

.slider{
	height: 42px;
	padding-left:15px;
	overflow: hidden;
}
.slider div {
	color: #fff;
	height: 42px;
	margin-bottom: 38px;
	text-align: center;
	box-sizing: border-box;
	border-radius: 12px;
	border: 3px groove teal;
	font-size: 22px;
	padding: 1px 0;

}

.fa, .fab, .far, .fas {
	height: 32px;
	width: 32px;
	border: double 2px #fff;
	border-radius: 50%;
	padding: 1px;
	font-size: 26px;
}

.fa.envelope, .fa.contactme {
	border:none;
	font-size: 18px;
}

.slider-text1 {
	background: #498C52;
	animation: slide 15s linear infinite;
}
.slider-text2, .slider-text6 {
	background: #498A8C;
}
.slider-text3, .slider-text7 {
	background: #4AB0C1;
}
.slider-text4, .slider-text8 {
	background: #415E9D;
}
.slider-text5 {
	background: #191919;
}

.slider-text9 {
	background: #A55A88;
}

@keyframes slide {
	0% {margin-top:-720px;}
	5% {margin-top:-640px;}
	11% {margin-top:-640px;}
	16% {margin-top:-560px;}
	22% {margin-top:-560px;}
	27% {margin-top:-480px;}
	33% {margin-top:-480px;}
	38% {margin-top:-400px;}
	44% {margin-top:-400px;}
	49% {margin-top:-320px;}
	55% {margin-top:-320px;}
	60% {margin-top:-240px;}
	66% {margin-top:-240px;}
	71% {margin-top:-160px;}
	77% {margin-top:-160px;}
	82% {margin-top:-80px;}
	88% {margin-top:-80px;}
	93% {margin-top:0px;}
	100% {margin-top:0px;} 
}

 /* Home page biography text block */
 .desc-row {
	display: flex;
	flex-direction: column;
    margin: 2% 7% 1% -3%;
	padding: 50px 30px 0 170px;  
}
	
.textcontent {
	margin-left:20%;
	margin-right:20%;
	padding: 10% 0;
} 
	
.w3-modal-content {
	padding:32px; 
	margin-top: 3%;
}

/* Contact modal zoom */
.w3-modal-content.zoom {
	animation: zoom 1s linear;
}

@keyframes zoom{
0% {
    transform: scale(0);
 }
50% {
    transform: scale(0.5);
 }
100% {
    transform: scale(1);
 }
}

table, tr, td {
	margin-left:10%;
	color:#000;
}	

table {
    border-collapse: collapse;
    width: 100%;
}

.talentScale {
	max-width:600px; 
	margin-left:10%;
}

th, td {
    padding: 15px;
}

/* ======== BACKGROUND VIDEO =========== */
video#bgvid { 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: -webkit-linear-gradient(to bottom right, #DAF9ED, transparent 20%, #CEF6F5),
				 -webkit-linear-gradient(to top right,  #ddd, transparent 50%,  #ddd ) #FFFFEE;
	background: -o-linear-gradient(to bottom right, #DAF9ED, transparent 20%, #CEF6F5),
			 -o-linear-gradient(to top right,  #ddd, transparent 50%,  #ddd ) #FFFFEE;	
	background: -moz-linear-gradient(to bottom right, #DAF9ED, transparent 20%, #CEF6F5),
			 -moz-linear-gradient(to top right,  #ddd, transparent 50%,  #ddd ) #FFFFEE;
	background: linear-gradient(to bottom right, #DAF9ED, transparent 20%, #CEF6F5),
			 linear-gradient(to top right,  #ddd, transparent 50%,  #ddd ) #FFFFEE;	 
	opacity:0.95; filter: alpha(opacity=95); 
    background-size: cover; 
}


/* THIS GOES WITH THE IE SHIM IN PORTFOLIOHEAD.PHP */
video { display: block; }
  	

.webaddress{
	font-size:14px;
	text-align: right;
	margin-left:20px;
	color:#FFF;
}


/* keep content centered on larger screens 
#wrapper, .navbar{
    margin: 0 8%; 	
}

/*==== ======== MEDIA QUERIES ===== =========
===========================*/

@media screen and (max-width:1700px) {
	#wrapper, 
	.navbar{
		margin: 0;
		}
	.item img {
		width: 80%; 
		}
} 

@media screen and (max-width: 1579px){
	.contactbox{
		width:60%; margin-bottom: 22px;
	}
	#counterBG {
		height: 500px;
		}
	.counteroverlay {
		height:530px;
		top: -190px;
	}
}
@media screen and (max-width:1403px) {.contactbox{width: 40%; margin-bottom: 22px;}}
@media screen and (min-width: 1201px){
	#fadeCarousel {
		width:1100px;
		height: auto;
		margin-left: 50%;
		transform: translate(-50%,0);
		}
}
@media screen and (max-width: 1200px) { 
	.textcontent {
		margin-left: auto; 
		margin-right:auto;
		}
	#fadeCarousel { 
		width:100%;
		} 
	.text-column{width:100%;}
}

@media screen and (min-width: 1031px){
	p.desc-sm {display:none;}
	.mobile-footer {display:none;}
}	

@media screen and (max-width: 1030px){
	p.desc-lg {display:none;}
		
	.testimonialCrowd {margin-left:1%;}

/* table only used on contact me modal */

	.w3-modal-content {
		padding: 32px 0;
	}
	.text-column {padding: 9px 18px;} 

	.desktop-footer{display:none;}
	
}


@media screen and (min-width: 969px) and (max-width: 1201px){
	.introsection{margin-top:18.8%;}
}

@media screen and (min-width: 969px) {
	table.snaphost-table td > input	{width:350px;}
}
@media screen and (max-width: 968px){
	.introsection{margin-top:2%;}
	.panel-row {
	  content: "";
	  display: table;
	  clear: both;
   }
   #fadeCarousel, 
   .text-column {
	   width: 90%; 
	   }    
	   
	.carousel-indicators, .testimonial-indicators{
		display:none;
	  }
		
	/* table only used on contact me modal */
	table, tr, td,
    table.snaphost-table {
      margin-left:0;
  }	
    table.snaphost-table {
	  width: auto;
	}
  
    table.snaphost-table td > input{width:250px;}
   
  	.w3-modal-content {
	  padding: 32px 0;
	}
		
	.w3-modal-content {width: auto;}
	.w3-container {padding:0;}
	.w3-center {text-align: left!important;}
	
}
  
@media screen and (max-width: 800px) {
 /*   html {
		background: -webkit-linear-gradient(to bottom right, #DAF9ED, transparent 20%, #CEF6F5),
				 -webkit-linear-gradient(to top right,  #ddd, transparent 50%,  #ddd ) #FFFFEE;
		background: -o-linear-gradient(to bottom right, #DAF9ED, transparent 20%, #CEF6F5),
				 -o-linear-gradient(to top right,  #ddd, transparent 50%,  #ddd ) #FFFFEE;	
		background: -moz-linear-gradient(to bottom right, #DAF9ED, transparent 20%, #CEF6F5),
				 -moz-linear-gradient(to top right,  #ddd, transparent 50%,  #ddd ) #FFFFEE;
		background: linear-gradient(to bottom right, #DAF9ED, transparent 20%, #CEF6F5),
				 linear-gradient(to top right,  #ddd, transparent 50%,  #ddd ) #FFFFEE;	 
		opacity:0.95; filter: alpha(opacity=95); 
    }
*/
	
	#fadeCarousel {width:80%;}
	.desc-row {
		padding-left: 110px;
	    margin: 0 12% 0 0;
	}
	
	.testimonialCrowd{display:none;}
	
    video#bgvid {
        display: none; 
    }
}

@media screen and (min-width:770px){
#counterBG{
	height: 420px;
	margin-top: -180px;
	margin-bottom: -180px;
	background-position: center; 
/*	background-repeat: no-repeat; */
	background-size: 200%;
	}
	.carousel-inner > .item > a > img, 
.carousel-inner > .item > img,
.carousel-inner img {
	height: 500px;
	}
}
@media screen and (max-width:769px){
	#counterBG{
		height: 150%;
		margin-top: -150px;
		z-index:0;
	}
	.countercontainer {
		margin-top: -880px;
		margin-bottom: 30px;
	}
	.counteroverlay {display:none;}
	.counter-box {margin-bottom: 3.8rem;}
}

@media screen and (min-width:722px) and (max-width: 1010px){
	.imgCir {
     margin-left: 1px; width: 10em; height: 10em;}
	 }  

@media screen and (max-width:721px){
	.imgCir{ 
	left:0; 
	width: 7em; 
	height: 7em;
	}
	#fadeCarousel {width: 70%;margin-top: 5em;}
	.introBG {animation:none;}
	.skill-content{display:block;}
	.contactbox{border:none;}
	
	h4.skills{
	font-size: 160%;
	margin-top: -20px;
	text-align: center;
   }
} 

@media screen and (max-width: 631px){
	h1.imagery-title {
	margin-bottom: 1.5em;
}
	
	p.desc-sm {display:none;}
	.imgCir{ 
		margin-left:2em; 
		width: 6em; 
		height: 6em;
	}
	.image-samples {margin-left: -1.3em;}

}	

@media screen and (max-width: 600px){
	#fadeCarousel {width:60%;}
	.desc-row {margin:0 10% 0 0;}
	
	.carousel-inner > .item > a > img, 
	.carousel-inner > .item > img,
	.carousel-inner img {
		width: 100%;
	}
}


@media screen and (min-width: 501px) and (max-width:800px){
   .text-column {
	   width: 90%; 
	   }
}

@media screen and (min-width: 501px){
	.hide-desktop {display:none !important;}
	table.snaphost-table td.textarea-sm {display:none;}
}

@media screen and (max-width:500px){
	.hide-mobile {display:none !important;}
	.introBG{
		background-image: none;
	}	
	.slider {padding-left:0}
	.desc-row{ 
	   padding: 10px 8px 30px 10px;
	   margin: auto;
	 }
	
	.carousel-inner .item blockquote{padding: 1em;}
	
	.subject-head {padding: 30px 20px;}
	
	.image-samples {margin-left: -3.3em;}	
	
	h1 {font-size:20px; margin-left:8px;}
	
	.modal {overflow: hidden;}
	
	.w3-modal-content {margin: 0;}
	
	th, td {padding:0;}
	
	table.snaphost-table td > input{
		width: 200px;
	}
	
	table.snaphost-table td.textarea-md {display:none;}
	
	#contact .snaphost-capcha-tbl td {
		content:"";
		display: table;
		clear: both;
	}

	#counterBG {
		height: 700px;
		margin-bottom: -200px;
		z-index: 0;

	  }
	.countercontainer {
		margin-top: -460px;
		margin-bottom: -10px;
		background-image: url(/portfolio-images/bluebubbleBG.png);
		background-repeat: repeat;
		 animation: aboutgraphic 12s alternate infinite;
	  }
}

@media screen and (max-width:420px) {
	.contactbox{width: 200px;}
	#fadeCarousel{width:43%;}


}

@media screen and (max-width:400px){
	.text-column {width: 100%;}
	#fadeCarousel {width:37%;}
	.desc-row{ 
	  margin-left: 0;
     }
}	

@media screen and (max-width:370px) {
	.contactbox{margin-left: 2em;}

}
@media screen and (max-width:325px) {
	#fadeCarousel {width:30%;}
	.contactbox{margin-left: 0.5em;}
}

@media screen and (max-width: 250px){
	.mobile-footer {text-align: left;}
	.contact-panel {padding: 16px 8px;}	
	#fadeCarousel {  display: none; }
}