/*  GENERAL PAGE STYLING CSS
-------------------------------------------------------------------*/
* {box-sizing: border-box;}

html{scroll-behavior:smooth}


a:link{
	color:#E1FCFC; 
	text-decoration:none;
}

#particles-js canvas {
    display: block;
    vertical-align: bottom;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
    transition: opacity .8s ease, transform 1.4s ease
}

#particles-js {
	background-color: #234a6c;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -10;
    top: 0;
    left: 0
}
/*
body {
	//  background-image: url('/portfolio-images/sandBG-moz.jpg'); 
	background-image: linear-gradient(99deg, rgba(188, 188, 188, 0.02) 0%, rgba(188, 188, 188, 0.02) 12.5%,rgba(86, 86, 86, 0.02) 12.5%, rgba(86, 86, 86, 0.02) 25%,rgba(221, 221, 221, 0.02) 25%, rgba(221, 221, 221, 0.02) 37.5%,rgba(159, 159, 159, 0.02) 37.5%, rgba(159, 159, 159, 0.02) 50%,rgba(159, 159, 159, 0.02) 50%, rgba(159, 159, 159, 0.02) 62.5%,rgba(86, 86, 86, 0.02) 62.5%, rgba(86, 86, 86, 0.02) 75%,rgba(241, 241, 241, 0.02) 75%, rgba(241, 241, 241, 0.02) 87.5%,rgba(46, 46, 46, 0.02) 87.5%, rgba(46, 46, 46, 0.02) 100%),linear-gradient(285deg, rgba(179, 179, 179, 0.02) 0%, rgba(179, 179, 179, 0.02) 25%,rgba(69, 69, 69, 0.02) 25%, rgba(69, 69, 69, 0.02) 50%,rgba(76, 76, 76, 0.02) 50%, rgba(76, 76, 76, 0.02) 75%,rgba(199, 199, 199, 0.02) 75%, rgba(199, 199, 199, 0.02) 100%),linear-gradient(76deg, rgba(143, 143, 143, 0.01) 0%, rgba(143, 143, 143, 0.01) 12.5%,rgba(116, 116, 116, 0.01) 12.5%, rgba(116, 116, 116, 0.01) 25%,rgba(118, 118, 118, 0.01) 25%, rgba(118, 118, 118, 0.01) 37.5%,rgba(183, 183, 183, 0.01) 37.5%, rgba(183, 183, 183, 0.01) 50%,rgba(196, 196, 196, 0.01) 50%, rgba(196, 196, 196, 0.01) 62.5%,rgba(235, 235, 235, 0.01) 62.5%, rgba(235, 235, 235, 0.01) 75%,rgba(194, 194, 194, 0.01) 75%, rgba(194, 194, 194, 0.01) 87.5%,rgba(86, 86, 86, 0.01) 87.5%, rgba(86, 86, 86, 0.01) 100%),linear-gradient(28deg, rgba(238, 238, 238, 0.03) 0%, rgba(238, 238, 238, 0.03) 16.667%,rgba(243, 243, 243, 0.03) 16.667%, rgba(243, 243, 243, 0.03) 33.334%,rgba(201, 201, 201, 0.03) 33.334%, rgba(201, 201, 201, 0.03) 50.001000000000005%,rgba(129, 129, 129, 0.03) 50.001%, rgba(129, 129, 129, 0.03) 66.668%,rgba(40, 40, 40, 0.03) 66.668%, rgba(40, 40, 40, 0.03) 83.33500000000001%,rgba(97, 97, 97, 0.03) 83.335%, rgba(97, 97, 97, 0.03) 100.002%),linear-gradient(290deg, rgba(241, 241, 241, 0.02) 0%, rgba(241, 241, 241, 0.02) 20%,rgba(86, 86, 86, 0.02) 20%, rgba(86, 86, 86, 0.02) 40%,rgba(128, 128, 128, 0.02) 40%, rgba(128, 128, 128, 0.02) 60%,rgba(83, 83, 83, 0.02) 60%, rgba(83, 83, 83, 0.02) 80%,rgba(81, 81, 81, 0.02) 80%, rgba(81, 81, 81, 0.02) 100%),linear-gradient(0deg, rgba(159, 159, 159, 0.01) 0%, rgba(159, 159, 159, 0.01) 12.5%,rgba(131, 131, 131, 0.01) 12.5%, rgba(131, 131, 131, 0.01) 25%,rgba(249, 249, 249, 0.01) 25%, rgba(249, 249, 249, 0.01) 37.5%,rgba(156, 156, 156, 0.01) 37.5%, rgba(156, 156, 156, 0.01) 50%,rgba(145, 145, 145, 0.01) 50%, rgba(145, 145, 145, 0.01) 62.5%,rgba(149, 149, 149, 0.01) 62.5%, rgba(149, 149, 149, 0.01) 75%,rgba(144, 144, 144, 0.01) 75%, rgba(144, 144, 144, 0.01) 87.5%,rgba(170, 170, 170, 0.01) 87.5%, rgba(170, 170, 170, 0.01) 100%),linear-gradient(195deg, rgba(109, 109, 109, 0.03) 0%, rgba(109, 109, 109, 0.03) 12.5%,rgba(254, 254, 254, 0.03) 12.5%, rgba(254, 254, 254, 0.03) 25%,rgba(121, 121, 121, 0.03) 25%, rgba(121, 121, 121, 0.03) 37.5%,rgba(221, 221, 221, 0.03) 37.5%, rgba(221, 221, 221, 0.03) 50%,rgba(229, 229, 229, 0.03) 50%, rgba(229, 229, 229, 0.03) 62.5%,rgba(225, 225, 225, 0.03) 62.5%, rgba(225, 225, 225, 0.03) 75%,rgba(79, 79, 79, 0.03) 75%, rgba(79, 79, 79, 0.03) 87.5%,rgba(200, 200, 200, 0.03) 87.5%, rgba(200, 200, 200, 0.03) 100%),linear-gradient(318deg, rgba(177, 177, 177, 0.02) 0%, rgba(177, 177, 177, 0.02) 25%,rgba(83, 83, 83, 0.02) 25%, rgba(83, 83, 83, 0.02) 50%,rgba(184, 184, 184, 0.02) 50%, rgba(184, 184, 184, 0.02) 75%,rgba(191, 191, 191, 0.02) 75%, rgba(191, 191, 191, 0.02) 100%),linear-gradient(90deg, rgb(45, 133, 170),rgb(86,96,93));
	background-size: 300% 100%;
	animation: jotsBG 20s linear infinite;
    animation-direction: alternate;
}

@keyframes jotsBG {
    0% {background-position: 0%}
    100% {background-position: 100%}
}
	*/
	
blockquote {
   	border-left:none;
	 
}

 /*-----------------Sliding Head Title-------------------*/
 h1.heading{
	font-family: 'Caveat Brush', cursive;
	font-size: 3em;
	text-align:center;  
	margin-top:2em;
	padding-bottom: 10px;
	background-image:url('/portfolio-images/sand-slide.jpg');
	/* color: #4B360C; 
	text-shadow: 0 2px 2px #000; 
	padding-bottom: 5%;	
	background-size: auto, auto; */
	background-clip: border-box, border-box;
    background-size: 200px;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    animation: imgtitle 45s infinite linear;
}

@keyframes imgtitle {
  from {
    background-position: 0 0%;
  }
  to {
    background-position: -200px;
  }
}

.movetext{
	position: absolute;
	overflow: hidden;
	margin-left:43%;
	margin-top: -7%;  
	padding: 0;
	border-radius: 50px;
}

@media screen and (min-width:1800px){.movetext{margin-top:-4%; margin-left: 45%;}}
@media screen and (max-width:1010px){.movetext{display:none;}}	

.slidingEffect {
    position:absolute;
    top:0; 
	bottom:0; 
	right:0;
	width:100%;
    background-image:url('/portfolio-images/sand-slide.jpg');
    -moz-animation: showHide 5s ease-in alternate infinite; /* Firefox */
    -webkit-animation: showHide 5s ease-in alternate infinite; /* Safari and Chrome */
    -ms-animation: showHide 5s ease-in alternate infinite; /* IE10 */
    -o-animation: showHide 5s ease-in alternate infinite; /* Opera */
    animation: showHide 5s ease-in alternate infinite;
}	

@-webkit-keyframes showHide { /* Chrome, Safari */
    0% {width:100%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:100%;}
}
@-moz-keyframes showHide { /* FF */
    0% {width:100%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:100%;}
}
@-ms-keyframes showHide { /* IE10 */
    0% {width:100%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:100%;}
}
@-o-keyframes showHide { /* Opera */
    0% {width:100%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:100%;}
}

@keyframes showHide {
    0% {width:100%}
    40% {width:0%}
    60% {width:0%;}
    100% {width:100%;}
}

/* ------------End slidingEffect Title----------------------*/
	
img.chromeBorder-top {
	background: #7ed8f4;
    padding: 4px 0;
	margin-bottom: 18px;
}
	
#stlogo {   
	padding:0;
	width: 6em;
  margin: -290px auto 0px 58px;

}

@media all and (min-width: 1894px){
	#stlogo{
	   height:9em;  
	}
}
	
@media all and (max-width:1100px){
	#stlogo{
	  margin: -2em 0 4em 35%;
	
	}
}

#main {margin: -3% 2% 3% 0; }	

/* DESCRIPTIVE TEXT BLOCKS ATOP PAGE */

.jots-marquee {
  display:flex;
  margin: auto;
  font: bolder 2.3em 'Open Sans', sans-serif;
  color: white;
  justify-content: space-around;
}
.jots-marquee span {
  animation: instruct 2s infinite alternate; 
  letter-spacing: 8px;
  font-family: Artifika;
}
@keyframes instruct {
  5% {
	  opacity: 0.3; 
	  color: #ffea00;
	}
  100% {
	color: #021e2f; 
	text-shadow: 1.4px 2px 2.4px #f00, 5px 5px 5px #929292;	
    }
}
span:nth-child(2) {
  animation-delay: .25s;
}
span:nth-child(3) {
  animation-delay: .50s;
}
span:nth-child(4) {
  animation-delay: .75s;
}
span:nth-child(5) {
  animation-delay: 1s;
}
span:nth-child(6) {
  animation-delay: 1.25s;
}
span:nth-child(7) {
  animation-delay: 1.50s;
}
span:nth-child(8) {
  animation-delay: 1.75s;
}
span:nth-child(9) {
  animation-delay: 2s;
}
span:nth-child(10) {
  animation-delay: 2.25s;
}
span:nth-child(11) {
  animation-delay: 2.5s;
}
span:nth-child(12) {
  animation-delay: 2.75s;
}
span:nth-child(13) {
  animation-delay: 3s;
}
span:nth-child(14) {
  animation-delay: 3.25s;
}
span:nth-child(15) {
  animation-delay: 3.5s;
}


/*.toptext-box is the container div and background for: .toptext is "A sandbox...";
.ie-text is small description text*/
.toptext-box, .ie-text {
	background: linear-gradient(115deg,wheat,tan,tan,tan,wheat);
	opacity: .7;
	border-radius: 12px;
	padding: 0;
	height: auto;
	margin-left: 5%; 
	color: #4B360C;
	text-align:center; 
	font-family: 'Artifika', serif;
	font-size: 1.3em;
	text-shadow: 2px 1px wheat;
	border: 1px ridge cornflowerblue;

}

.ie-text { 
	font-weight: 900;
	font-size: 1.3em;
	
}

.toptext {
	font-size:25px;
  }

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

@media screen and (min-width: 2500px) {#wrapper{margin: 0 20%;}}
@media screen and (max-width:1700px) {#wrapper{margin: 0;}}

/* add dynamic zoom effect to stlogo logo on page load */
.zoom {-webkit-animation:animatezoom 0.8s;animation:animatezoom 0.8s}
@-webkit-keyframes animatezoom{from{-webkit-transform:scale(0)} to{-webkit-transform:scale(1)}}
@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
	
/* ITEM DIVS WITHIN ROWS
------------------------------------------------------------------------ */	

#todo { 
	width: 200px;
	margin-left: 70%; 
	margin-top: -300px; 
	margin-bottom: 300px;

	}

.jot-item {display:inline;}	 

@media screen and (max-width:1010px){
	.jot-item{
		content:"";
		display:block;
		clear:both;
	}
}

.row{
	margin-top: 140px;
	margin-bottom: 120px;
}		

chromeBorder-top {
	margin-left: -140px;
  width: 120%;
}


iframe {border:none; width:100%; }

/* END GENERAL PAGE CSS
-------------------------------------------------------------------*/


/* REVIEWS MARQUEE
----------------------------------------------------------------------*/

div.local-revs-marquee {
	width: 110%;
	padding: 0 10px 40px;
	padding-bottom: 50px;
	white-space:nowrap;
	animation: marquee 34s linear infinite;	
}


 @-moz-keyframes marquee {
       0%   { -moz-transform: translateX(100%); }
       100% { -moz-transform: translateX(-100%); }
      }
      @-webkit-keyframes marquee {
       0%   { -webkit-transform: translateX(100%); }
       100% { -webkit-transform: translateX(-100%); }
      } 
 @keyframes marquee {
       0%   { -moz-transform: translateX(100%); /* Firefox bug fix */
       -webkit-transform: translateX(100%); /* Firefox bug fix */
       transform: translateX(100%);         
       }
       100% { 
       -moz-transform: translateX(-100%); /* Firefox bug fix */
       -webkit-transform: translateX(-100%); /* Firefox bug fix */
       transform: translateX(-100%); 
       }
      }
	  

div.local-revs-marquee:hover {
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}


div.local-revs-marquee div.marquee-content {
	max-width: 350px;
	text-align: center;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	display: inline-block;
	margin: 3px 20px 5px auto;
	white-space:normal;

}


div.local-revs-marquee div.marquee-content .rev-text {
    background-color: #395730;
    color: white;
    padding: 12px;
	font-family: "SourceSansPro",sans-serif;
    font-size: 16px;
}

div.local-revs-marquee div.marquee-content .rev-date {
	padding: 6px;
	background-color: #fff;
}

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

/* END REVIEWS MARQUEE
--------------------------------------------------------------------------*/


/* HOVER SENSING GRADIENT 
-----------------------------------------------------------------------------*/

/* button styling */

.gradient-track {
	position: relative;
	background: #7983ff;
	padding: 1.5rem 2rem;
	font-size: 1.2rem;
	border: none;
	color: white;
	cursor: pointer;
	outline: none;
	overflow: hidden;
	left:20px;
}

/* text area  */

.gradient-track span {
	position: relative;
}


.gradient-track::before {
	--size: 0;
	content: '';
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: var(--size);
	height: var(--size); 
	background: radial-gradient(circle closest-side, pink, transparent);
	transform: translate(-50%, -50%);
	transition: width 0.2s ease, height 0.2s ease;
}

.gradient-track:hover::before {
	--size: 70px;
}
/* --------------------	 END TRACKING GRADIENT ------------------*/


/* ALBUM CSS
------------------------------------------------------------------------------*/ 
.jssorb05 {
	position: absolute;
}
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
	position: absolute;
	/* size of bullet elment */
	width: 16px;
	height: 16px;
	background: url('/jots/img/b05.png') no-repeat;
	overflow: hidden;
	cursor: pointer;
}
.jssorb05 div { background-position: -7px -7px; }
.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
.jssorb05 .av { background-position: -67px -7px; }
.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

/* jssor slider arrow navigator skin 12 css 

.jssora12l                  (normal)
.jssora12r                  (normal)
.jssora12l:hover            (normal mouseover)
.jssora12r:hover            (normal mouseover)
.jssora12l.jssora12ldn      (mousedown)
.jssora12r.jssora12rdn      (mousedown)
*/

.jssora12l, .jssora12r {
	display: block;
	position: absolute;
	/* size of arrow element */
	width: 30px;
	height: 46px;
	cursor: pointer;
	background: url('/jots/img/a12.png') no-repeat;
	overflow: hidden;
}
.jssora12l { background-position: -16px -37px; }
.jssora12r { background-position: -75px -37px; }
.jssora12l:hover { background-position: -136px -37px; }
.jssora12r:hover { background-position: -195px -37px; }
.jssora12l.jssora12ldn { background-position: -256px -37px; }
.jssora12r.jssora12rdn { background-position: -315px -37px; }

/* END ALBUM CSS
------------------------------------------------------------------------------------------ */		

/* SPIN LOGO CSS
-------------------------------------------------------------------------------------------*/
.element { 
	margin:auto;
	background:#2E64FE; 
	opacity:.8;
	width: 210px;
	height: 210px;
	border-radius:15px;
	border-bottom-style: double; 
	border-right-style: ridge;
	border-left-style: ridge; 
	border-color:silver;
	-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
	transition: width 2s, height 2s, background 2s, transform 2s;
}

.element:hover {
    width: 360px;
    height: 360px;
	-webkit-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg);
	box-shadow: 5px 8px 3px #ccc;
}
.element p{\
	color:#fff; font-family: 'Artifika', serif;
	font-size:20px;  
	padding-left:4%;
	padding-top:20%;
	 -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
    transition: width 2s, height 2s, transform 2s;
	
	}
	
.element p:hover{ 
	font-size:50px; 
	padding-bottom:30%;
	-webkit-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg);
}
	
 /*
 End spin Logo CSS ---------------------------------------------------------------*/
 
 /* Footer CONTACT MODAL */
/* SnapHost container */
#contact {
	background-color: #E1FA9A; 
	z-index:15;
}

#myform {
	display: flex;
	margin: auto;
	align-content: center;
	flex-direction: column;
	}

.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"}


@media screen and (max-width: 1579px){.contactbox{width:60%;}}
@media screen and (max-width:1403px) {.contactbox{width: 40%;}}

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

@media screen and (max-width: 800px) {
		.row {margin-left: 2%;}
	}

@media screen and (max-width: 799px) {
		html {display:none;}
	}
	
	
@media screen and (max-width:500px){
	.contact-panel {padding: 16px 8px;}	
  	.contactbox{margin-left: 2em; border:none;}
}

@media screen and (max-width: 350px) {
		.row {margin-left: -3em;}
	}
@media screen and (max-width: 250px){
	.mobile-footer {text-align: left;}
	.contact-panel {padding: 16px 8px;}	
}