/*
******************
My User Classes 
******************
*/ 

/* P7 SCS (Style Class Switcher)
Source: https://www.projectseven.com/products/tools/scs/guide/index.htm
The animation container.*/
.criss-cross {
overflow: hidden;
position: relative;
padding: 20px;
border-left: 1px dotted;
border-right: 1px dotted;
}
/*Reset margins inside all paragraphs within the container.*/
.criss-cross p {
margin: 6px 0px;
}
/*The Caption element which slides down. This element is a DIV and can contain any type of content, including paragraphs, links, and even images. A CSS transition is set for the transform and opacity properties. The initial animation state sets a vertical translate (offset) of -600px and opacity to zero (totally transparent). The element is absolutely positioned with a bottom position of 10px.*/
.criss-cross .caption {
transition: transform ease-out 1s, opacity linear 1s;
transform: translateY(-600px);
opacity: 0;
position: absolute;
bottom: 10px;
left: 0px;
width: 100%;
padding: 0px 10px;
color: inherit;
font-size: 140%;
}
/*SCS will set the class of this element to running when the criss-cross element is hovered over or tapped, which will trigger the animation. Offset (translateY) will rest the vertical position of the element to zero and opacity will be set to 1 (fully opaque). When your cursor moused off the element (or when it is tapped again), the animation will reverse.*/
.running .caption {
transform: translateY(0px);
opacity: 1;
}
/*The image inside the container is set to animate the transform and opacity properties: the same properties used for the caption animation.*/
.criss-cross img {
transition: transform ease-out 1s, opacity ease .5s;
transform: translateY(0);
opacity: 1;
border-radius: 5px;
display: block;
}
/*When SCS assigns the running class, the image will translate vertically upwards (-600px) and opacity will cause it to fade out to zero (fully transparent).*/
.criss-cross.running img {
transform: translateY(-600px);
opacity: 0;
}
/*When SCS is assigned to the criss-cross container, a class of scs-noscript is automatically assigned. This class allows you to make your animated content acessible in browsers that do not support JavaScript and also to make sure your content is easily editable in Dreamweaver Design View.*/
.criss-cross.noscript,
.criss-cross.scs-noscript .caption,
.criss-cross.scs-noscript img {
position: static;
}
/*
******************
Google Search stuff 
******************
*/ 
.cse .gsc-control-cse,
.gsc-control-cse {
padding: 0px;
}

/*
******************
Scroll Down Buttons 
I think most of this should be deleted!
Source: https://www.solodev.com/blog/web-design/adding-a-scroll-down-anchor-to-your-website.stml
******************

.separator-type, .title-type, .intro-type, .content-type .intro-type p {
  position: relative;
}
.intro-type .container {
  padding: 107px 0px 102px 0px !important;
}
.company-heading h1 {
  margin-bottom: 60px;
  padding-bottom: 50px;
  line-height: 80px;
  color: #fff;
  font-weight: 700 !important;
  text-align: center;
}
.jumbo {
  margin-top: 50px;
}
.seo-header, .product-header, 
.intro-type .container h1.white, 
.company-heading h1 {
  font-weight: 100 !important;
  text-transform: capitalize;
  font-size: 55px;
  margin-bottom: 20px;
}
.parallax {
  background-attachment: inherit !important;
}
.parallax {
  background-attachment: inherit !important;
}
.parallax {
  background-attachment: inherit !important;
  background-repeat: repeat;
  background-size: cover;
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  z-index: -10;
}
*/ 
.ct-btn-scroll {
  width: 100px;
  height: 75px;
  position: absolute;
  bottom: 130px;
  left: 0;
  right: 0;
  margin: auto;
  padding-top: 400px;
  z-index: 9;
  border-radius: 50%;
  -webkit-transition: background-color 0.25s ease-in-out;
  transition: background-color 0.25s ease-in-out;
}
img, 
figure {
  max-width: 100%;
}


.brite-link {
  color: aquamarine
}

.my-shadow-text-column {
font-size: 125%;
color: white;
text-shadow: 2px 2px 4px #000000;
}

.services-panel {
	color: white;
	padding: 0px;
}

.services-hdr {
	color: white;
	padding: 40px;
}

.design
{
	color: white;
}
.marketing-col1 {
	padding: 0px 0px 40px 0px;
}

.snap-container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
}

.snap-container div {
	scroll-snap-align: start;
}

.Logo2abso {
	position: absolute;
	width: 80%;
	left: 15px;
}
.Logo2text {
	padding-top: 10%;
}
.horiz-rule {
	display: block;
	position: relative;
	padding: 0;
	margin: 8px auto;
	height: 0;
	width: 100%;
	max-height: 0;
	font-size: 1px;
	line-height: 0;
	clear: both;
	border: none;
	border-top: 1px solid #aaaaaa;
	border-bottom: 1px solid #ffffff;
}
.text-right {text-align: right}
/* 
Circle is used in About Us
see https://www.youtube.com/watch?v=Gws3C4Phs2k
*/
.circle 
{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	float: left;
	shape-outside: circle();
	margin: 30px 30px 30px 0;
}

.circle-text
{
/*
	margin: 10px 0px 0px 0px;
	padding: 20px 0px 0px 0px;
*/
	margin: 0px;
	padding: 0px;
	text-align: justify;
	line-height: 120%;
}
.circle-h3
{
	margin: 0 0 20px;
	padding: 0;
	line-height: 100%;
}