@charset "utf-8";
/* CSS Document */
/*font-family: 'Share Tech', sans-serif;
font-family: 'Anton', sans-serif;
font-family: 'Share Tech Mono', monospace;*/



/*

Colors:

#1f1f21 - grey
#08ccab - green regular
#018b73 - green dark

*/



html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

	html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="select"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
select,
textarea {
  font-size: 16px;
}



@font-face {
    font-family: 'Share-TechMono';
    src: url('../fonts/Share-TechMono.eot');
    src: url('../fonts/Share-TechMono.eot?#iefix') format('embedded-opentype'),
url('../fonts/Share-TechMono.woff2') format('woff2'),
url('../fonts/Share-TechMono.woff') format('woff'),
url('../fonts/Share-TechMono.ttf') format('truetype'),
url('../fonts/Share-TechMono.svg#Share-TechMono') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}





body {	font-family: 'Share-TechMono';}




	


@keyframes animateleft {from{left:-300px;opacity:0} to{left:0;opacity:1}}
@-webkit-keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
@-O-keyframes animateleft {from{left:-300px;opacity:0} to{left:0;opacity:1}}
@-moz-keyframes animateleft {from{left:-300px;opacity:0} to{left:0;opacity:1}}

@keyframes animateleft2 {from{left:-300px;opacity:0} to{left:0;opacity:1}}
@-webkit-keyframes animateleft2 {from{left:-300px;opacity:0} to{left:0;opacity:1}}
@-O-keyframes animateleft2 {from{left:-300px;opacity:0} to{left:0;opacity:1}}
@-moz-keyframes animateleft2 {from{left:-300px;opacity:0} to{left:0;opacity:1}}

@keyframes animateleft3 {from{left:-300px;opacity:0} to{left:0;opacity:1}}
@-webkit-keyframes animateleft3 {from{left:-300px;opacity:0} to{left:0;opacity:1}}
@-O-keyframes animateleft3 {from{left:-300px;opacity:0} to{left:0;opacity:1}}
@-moz-keyframes animateleft3 {from{left:-300px;opacity:0} to{left:0;opacity:1}}



	

@keyframes animatetop{
	from{top:-300px;opacity:0} to{top:0;opacity:1}}
@-webkit-keyframes animatetop{
	from{top:-300px;opacity:0} to{top:0;opacity:1}}
@-O-keyframes animatetop{
	from{top:-300px;opacity:0} to{top:0;opacity:1}}
@-moz-keyframes animatetop{
	from{top:-300px;opacity:0} to{top:0;opacity:1}}


	
@keyframes SlideRight {
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}
 @-webkit-keyframes SlideRight{
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}
@-O-keyframes SlideRight{
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}
@-moz-keyframes SlideRight{
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}

@keyframes SlideRight2 {
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}
 @-webkit-keyframes SlideRight2{
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}
@-O-keyframes SlideRight2{
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}
@-moz-keyframes SlideRight2{
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}

@keyframes SlideRight3 {
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}
 @-webkit-keyframes SlideRight3{
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}
@-O-keyframes SlideRight3{
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}
@-moz-keyframes SlideRight3{
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}

@keyframes SlideRight4 {
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}
 @-webkit-keyframes SlideRight4{
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}
@-O-keyframes SlideRight4{
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}
@-moz-keyframes SlideRight4{
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}

@keyframes SlideRight5 {
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}
 @-webkit-keyframes SlideRight5{
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}
@-O-keyframes SlideRight5{
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}
@-moz-keyframes SlideRight5{
		from{right: 200%;opacity: 0;}
		to{right: 0;opacity: 1;}}

/* SLIDE LEFT */

@keyframes SlideLeft {
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}
 @-webkit-keyframes SlideLeft{
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}
@-O-keyframes SlideLeft{
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}
@-moz-keyframes SlideLeft{
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}

@keyframes SlideLeft2 {
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}
 @-webkit-keyframes SlideLeft2{
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}
@-O-keyframes SlideLeft2{
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}
@-moz-keyframes SlideLeft2{
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}

@keyframes SlideLeft3 {
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}
 @-webkit-keyframes SlideLeft3{
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}
@-O-keyframes SlideLeft3{
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}
@-moz-keyframes SlideLeft3{
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}

@keyframes SlideLeft4 {
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}
 @-webkit-keyframes SlideLeft4{
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}
@-O-keyframes SlideLeft4{
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}
@-moz-keyframes SlideLeft4{
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}

@keyframes SlideLeft5 {
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}
 @-webkit-keyframes SlideLeft5{
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}
@-O-keyframes SlideLeft5{
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}
@-moz-keyframes SlideLeft5{
		from{left: 200%;opacity: 0;}
		to{left: 0;opacity: 1;}}

/*
@-o-keyframes
@-webkit-keyframes
@-moz-keyframes

*/

@-o-keyframes vidSlide3 {
    from{left: 1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}
@-webkit-keyframes vidSlide3 {
    from{left: 1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}
@-moz-keyframes vidSlide3 {
    from{left: 1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}


@-o-keyframes vidSlide2 {
    from{left: 1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}
@-webkit-keyframes vidSlide2 {
    from{left: 1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}
@-moz-keyframes vidSlide2 {
    from{left: 1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}



@-o-keyframes vidSlide {
    from{left: 1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}
@-webkit-keyframes vidSlide {
    from{left: 1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}
@-moz-keyframes vidSlide {
    from{left: 1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}


@keyframes LvidSlide {
    from{left: -1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}
@-o-keyframes LvidSlide {
    from{left: -1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}
@-webkit-keyframes LvidSlide {
    from{left: -1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}
@-moz-keyframes LvidSlide {
    from{left: -1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}


@keyframes LvidSlide2 {
    from{left: -1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}
@-o-keyframes LvidSlide2 {
    from{left: -1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}
@-webkit-keyframes LvidSlide2 {
    from{left: -1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}
@-moz-keyframes LvidSlide2 {
    from{left: -1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}


@keyframes LvidSlide3 {
    from{left: -1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}
@-o-keyframes LvidSlide3 {
    from{left: -1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}
@-webkit-keyframes LvidSlide3 {
    from{left: -1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}
@-moz-keyframes LvidSlide3 {
    from{left: -1600px;opacity: 0;}
	to{left: 50%;opacity: 1;}}









@keyframes animateappear{
	from{width: 0;} to{width: 100%;}}

   @-webkit-keyframes animateappear{
	from{width: 0;} to{width: 100%;}}

@-O-keyframes animateappear{
	from{width: 0;} to{width: 100%;}}


@-moz-keyframes animateappear{
	from{width: 0;} to{width: 100%;}}




@keyframes animatefont{
		from{top:-400px;opacity:0} to{top:0;opacity:1}}
@-webkit-keyframes animatefont{
	from{top:-400px;opacity:0} to{top:0;opacity:1}}
@-O-keyframes animatefont{
	from{top:-400px;opacity:0} to{top:0;opacity:1}}
@-moz-keyframes animatefont{
	from{top:-400px;opacity:0} to{top:0;opacity:1}}

@keyframes Fade1 {
		from{opacity: 0;}
		to{opacity: 1;}}

@keyframes Fade2 {
		from{opacity: 0;}
		to{opacity: 1;}}

@keyframes Fade3 {
		from{opacity: 0;}
		to{opacity: 1;}}


@keyframes Rise {
0%{bottom: -25%;right: 4%; transform: scale(1);}
25%{bottom: 4%;right: 4%;transform: scale(1);}
50%{bottom: 4%;right: 4%;transform: scale(1);}
75%{bottom: 4%;right: 20%;transform: scale(1.2);}
100%{bottom: 4%;right: 4%;transform: scale(1);}
}


	
	.cta_black {
		display: block;
		position: relative;
		width: 150px;
		background-color: black;
		text-decoration: none;
		color: white;
		margin: 0 auto 1rem auto;
		text-align: center;
		padding: .4rem .6rem;
	}
	
.cta_black:hover {
	background-color: #08ccab;
	color: black;
	transition: .6s ease-in-out;
	
}


.cta_green{
	display: block;
	margin: .6rem auto;
	width: 150px;
	text-decoration: none;
	color: black;
	background-color: #08ccab;
	text-align: center;
	padding: .4rem .6rem;
	text-transform: uppercase;
	transition: .6s ease-in-out;
}

.cta_green:hover {
	background-color: #1f1f21;
	color: white;
}



.website_titles{font-size: 1.6rem;}
.website_subtitles{
font-size: 1.4rem;
}
.website_descriptions{
font-size: 1rem;
}
.website_buttons{
font-size: .8rem;
}



/*

OPENER END

*/
 /*NAVIGATION
*/

.hamburgerwrapper {
	position: absolute;
	top: 0;
	right: 0;
    display: grid;
	grid-template-columns: 50% 50%;
	float: right;
    cursor: pointer;
	z-index: 99;
	padding: 25px;
	transition-timing-function: ease-in-out;
}

.bar1, .bar2, .bar3, .bar4 {
    width: 36px;
    height: 5px;
    background-color: black;
    margin: 3px 0;
    transition: 0.4s;
	z-index: 1;
	
}

.bar1 {opacity: 0;}
		


.change .bar2 {
 
    transform: rotate(-45deg) ; opacity: 0;
	
}
.change .bar1 { opacity: 1;
	background-color: transparent;
	background-image: url(https://www.magnetizeyourimages.com/magnetizeyourwebimages/png/magnetizeyourweb_black_logo.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	height: 50px;
	width: 50px;
	transform: rotate(360deg);

}

.change .bar3 {transform: rotate(45deg); opacity: 0;}
.change .bar4 {transform: rotate(45deg); opacity: 0;}




/* M Hamburger Menu Start */
.navlogo {
	display: block;
}


/* IE GRID FOR HAMBERGER */
@supports (display: grid) {


.bar1, .bar2, .bar3, .bar4, .bar5, .bar6 {
    width: 22px;
	opacity: 1;
    height: 5px;
    background-color: black;
    margin: 3px 0;
    transition: 0.4s;
	z-index: 1;
}


.change .bar1 {
    transform: rotate(-90deg) translate(-10px, -0px);
	background-image: none;
	background-color: black;
	height: 5px;
	width: 22px;
	
}
.change .bar3 { opacity: 0;}
.change .bar4 {opacity: 0;}
.change .bar6 {transform: rotate(-65deg) translate(7px, -13.5px);border-radius: 5px 0 0 5px;}
.change .bar5 {transform: rotate(65deg) translate(-8.7px, -10px);border-radius: 0 5px 5px 0;}
.change .bar2 { transform: rotate(90deg) translate(10px, 4px);opacity: 1;}
}

#sidebanner{position: fixed;
    display: none;
    left:0;
    top: 0;
    width: 40%;
    max-width: 250px;
    min-width: 230px;
    background-color: #ececec;
    opacity: .95;
    transition: .8s ease-in-out;
    z-index: 98;
    height: 100%;	
    overflow: hidden;
    animation:animateleft 1.4s;}

.logonavwrapper{	
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin: 2rem auto 1rem auto;
padding: .5rem 0;
width: 80%;
border-bottom: solid 1px grey;

}

.navlogo {
	display: block;
margin-bottom: .2rem;}


.navlogotitle{}
.navlogosubtitle{display: none;}
.navlinks{position: relative;
	text-decoration: none;
	color: black;
	padding: 15px;
	display: block;
    border-bottom: solid 1px grey;
    width: 95%;
    margin: 0 auto;

}
.navlinks:hover {
color: white;
}

#fadenav li{transition: .5s ease-in-out;}
#fadenav li:hover {
background-color: #018b73;
}
#lilogo:hover {background-color: none;}

.autowrapper{}
.logowrapper{height: auto;width: 100%;display: block;margin: 0 auto;}
#logo{height: auto;width: 20%;max-width: 150px;margin: 0 auto;display: block;}
.titlewrapper{text-align: center;width: 100%;margin-bottom: 1rem;}
.title{position: relative;font-size: 1.4rem;font-weight: 600;margin: 0 auto;text-align: center;display: block;	padding: 2% 0 0 1%;}
.titlesub{	font-size: .9rem;
}







        
@media screen and (min-width : 1250px) {
	.hamburgerwrapper {display: none;}
	.autowrapper{display: none;}
	.titlewrapper{display: none;}
	.navlogosubtitle{display: block;
font-size: .6rem;}
	#sidebanner {
	display: block;
	position: fixed;
	background-color: white;
	max-width: 99999px;
	width: 100%;
	height: 80px;
	padding: 0;
	margin: 0;
	}
	
	.logonavwrapper{	
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
text-align: center;
margin: 0;
padding: .5rem 0;
width: 260px;
border-bottom: none;

}
	
	#fadenav {
	display: flex;
    flex-wrap: wrap;
	align-items: center;
	padding: 0;
	margin: 0;
	justify-content: space-around;
	}
	
	#fadenav li {
	width: 11%;
	max-width: 130px;
	padding: 0;
	margin: 0;
	}
	
	
.navlinks{position: relative;
	text-decoration: none;
	color: black;
	display: block;
    border-bottom: none;
    width: 95%;
    padding: .5rem;
    text-align: center;
	margin: 0;  
 }
	
.navlinks:hover {
color: black;
}
#fadenav li{transition: .5s ease-in-out;}
#fadenav li:hover {
background-color: transparent;
}
	
	
.navlinks:before {
   content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: #08ccab;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all .6s ease-in-out .3s;
}


.navlinks{
      color: black;
    transition: .6s ease-in-out;
    position: relative;
    text-decoration: none;
    z-index: 50;
    
}

.navlinks:hover:before {
     visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
} 
	
	
}
    
    
   
 /*END NAVIGATION
*/
 
    
    
/*    SVG BUTTON         */

.svgbutton{
    width: 100%;
    display: block;
    position: relative;
    margin: 0 auto;
     text-align: center;
}
/*   
    Spot is the span on the inside of the href that
    fills the parent and makes the hover and link work
    for the entire div
*/

.spot {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
/*
    This is the outer svg wrapper that the SVG itself will 
    fill. Multiple svg-wrapper classes can be put side by side.
*/

.svg-wrapper {
  margin-top: 0;
  position: relative;
  width: 150px;
  /*make sure to use same height/width as in the html*/
  height: 40px;
  display: inline-block;
  border-radius: 3px;
  margin-left: 5px;
  margin-right: 5px;
	cursor: pointer;
	margin: .5rem;
}
/*
  This is where we define the fill, color, thickness,
  and stroke pattern of the SVG when there is no hover.
  The dasharray and offset together define the line position
  under the words. Here's also where the transition speed is set.
*/

#shape {
  stroke-width: 6px;
  fill: transparent;
  stroke: #009FFD;
  stroke-dasharray: 85 400;
  stroke-dashoffset: -220;
  transition: 1s all ease;
}
/* 
    Pushing the text up into the SVG. Without this the
    text would be below the div's.
*/

#text {
  margin-top: -35px;
  text-align: center;
}

#text a {
  color: black;
  text-decoration: none;
  font-weight: 100;
  font-size: .8rem;
}
/* 
    Changing the shape on hover. I change the color of the stroke,
make it thinner, then set it to again wrap around the entire parent element.
*/

.svg-wrapper:hover #shape {
  stroke-dasharray: 50 0;
  stroke-width: 3px;
  stroke-dashoffset: 0;
  stroke: #06D6A0;

}

#videowrapperfull {
	display: none;
	height: auto;
	width: 80%;
    max-width: 700px;
	margin: 0 auto;
	position: relative;
	animation:animatetop 2.4s;
	transition: .8s ease-in-out;
	overflow: hidden;
	box-sizing: border-box;
}

#buttonvideo {
	padding: 5px 10px;
	border: 5px double white;
	display: block;
	width: 200px;
	margin: 0 auto 25px auto;
	cursor: pointer;
	text-transform: uppercase;
	background-color: #08ccab;	
}

#buttonvideo:hover {
	transition: 1s ease-in-out;
	background-color: #1f1f21;
	color: white;
}

#videoembedfull {
	height: auto;
	width: 100%;
}

@media screen and (min-width : 1250px) {

	.svgbutton {
		margin-top: 100px;
	}
	
	
	
}
    
/*   SVG END        */
.index_banner_background {
width: 100%;
overflow: hidden;
display: block;
position: relative;
padding: 1rem 0;
}
.index_banner_wrapper{
display: flex;
flex-wrap: wrap;
max-width: 1200px;
justify-content: space-around;
padding: 1rem 0;
width: 100%;

margin: 0 auto;

}
.slide_wrapper{
box-shadow: 5px 5px 15px 1px #1d1d1f;
max-height: 600px;
width: 32.5%;
height: 48vw;



}

#left_slide{
position: relative;
animation: animateleft 4s ease-in-out;
}
#mid_slide{
position: relative;
animation: animateleft 3s ease-in-out;}
#right_slide{
position: relative;
animation: animateleft 2s ease-in-out;}



#left_img{
background-image: url("../images/jpg/banner1.jpg");
}
#mid_img{
background-image: url("../images/jpg/banner2.jpg");
}
#right_img{
background-image: url("../images/jpg/banner3.jpg");
}



.slide_img{
background-size: cover;
height: 100%;
position: relative;
background-position: center;
background-repeat: no-repeat;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.top_title{
color: white;
width: 100%;
height: 20%;
flex-wrap: wrap;
padding: .2rem;
text-align: center;
align-items: center;

align-self: flex-start;
margin: .2rem 0;
font-size: 1rem;

}
.sub_title{
width: 100%;
align-self: flex-start;
height: 15%;
display: flex;
padding: .1rem;
font-size: 1rem;
color: #08ccab;
}

.banner_desc{color: white;
align-self: flex-start;
display: flex;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
height: 50%;
padding: .6rem .2rem;
font-size: .7rem;


}
.banner_cta{
text-align: center;
position: absolute;
bottom: 0;
text-decoration: none;
color: black;
display: block;
padding: 2%;
width: 90%;
font-size: .9rem;
background-color: #08ccab;
margin: 1rem auto;
align-self: flex-end;
transition: .6s ease-in-out;
}
.banner_cta:hover{
background-color: white;

}

@media screen and (min-width: 450px) {
.top_title{
		font-size: 1.2rem;
	}
	.sub_title{font-size: 1.2rem;padding: 1rem .5rem;}
	.banner_desc{font-size: .9rem;
	padding: 1rem .5rem;}
	.banner_cta{font-size: .9rem;}
	
}
	


@media screen and (min-width: 650px) {
	.top_title{
		font-size: 1.4rem;
	}
	.sub_title{font-size: 1.6rem;padding: 2rem 1rem;}
	.banner_desc{font-size: 1rem;
	padding: 2rem 1rem;}
	.banner_cta{font-size: 1rem;}
	
}



@media screen and (min-width: 1250px) {
	.top_title{
		font-size: 1.6rem;
	}
	.sub_title{font-size: 2rem;}
	.banner_desc{font-size: 1.1rem;}
	.banner_cta{font-size: 1.1rem;}
	
}




















/* MESSAGE STYLES */
.message_background{
padding: 1rem;
display: block;
position: relative;
}
.message_wrapper{
padding: .5rem;
max-width: 600px;
margin: 0 auto;
line-height: 1.5rem;
}
.message_img_wrapper{
width: 80%;
max-width: 350px;
margin: 0 auto;
}

.message_type {
color: black;
width: 150px;
padding: 3px 0;
border-bottom: 1px solid #08ccab;
}
.message_img{width: 100%;}
.message_title{
text-align: center;
font-size: 1.4rem;
font-weight: bold;
padding: 1rem 0;
}
.message_index{
text-align: center;
}
.message_link{
text-decoration: none;
color: white;
background-color: black;
padding: .4rem;
margin: 1rem auto;
position: relative;
display: block;
width: 125px;
text-align: center;
transition: .6s ease-in-out;
}

.message_link:hover {
background-color: #08ccab;
}

/* END MESSAGE STYLES */






/*BANNER SLIDE END */

/*INDEX OPEN START */

.pagetitleopener {
	text-align: center;
	font-size: 1.6rem;
	text-transform: uppercase;

}

.homeopener {
	display: grid;
	position: relative;
	height: 100%;
	width: 100%;	
}
.openimgwrapper{}
.openingimg {
	height: auto;
	width: 80%;
	display: block;
	max-width: 900px;
	position: relative;
	margin: 2rem auto;
}

.opener_title {
font-size: 1.8rem;
text-transform: uppercase;
display: block;
text-align: center;
padding: .5rem 0;
font-weight: bold;
border-bottom: 1px solid black;
}

.descriptionwrapper {
	margin: 1rem auto;
	padding: 1rem;
	max-width: 800px;
	display: block;
	position: relative;
}
    
.description {
	color: black;
	font-weight: 700;
	letter-spacing: .2rem;
	line-height: 2rem;
	font-size: 1.1rem;
	text-align: center;
	padding: .4rem;
	text-transform: uppercase;	
}
.subdescription {
	color: black;
	font-size: 1rem;
	padding: 1rem;
	line-height: 1.7rem;
}


.reportcardwrapper {
	background-color: #1f1f21;
	padding: 1rem;
	
}

.reportcard{
	font-size: 1.6rem;
	text-align: center;
	padding: 1rem;
	color: white;
	
	
	
}
.reportcardsub{
	text-align: center;
	font-size: 1.2rem;
	color: white;
}
.report{
	text-decoration: none;
	display: block;
	margin: 1rem auto;
	text-align: center;
	width: 150px;
	color: black;
	background-color: white;
	padding: .4rem .6rem;

}

.report:hover {
	  background-color: #08ccab;
	transition: 1s ease-in-out;
	transform: scale(1.3);
	color: #1f1f21;
}


@media screen and (min-width : 900px) {
	
	.pagetitleopener {
	font-size: 1.9rem;
}
	.description {
	font-size: 1.6rem;
}
	.subdescription {
	font-size: 1.1rem;
}
	.reportcard{
	font-size: 1.8rem;
	}
	.reportcardsub{
	font-size: 1.3rem;
}
    
    .opener_title {
font-size: 2.6rem;

}

	
}


/*INDEX OPEN END *//*WEBSITES INCLUDE START*/

.websitesincludebackground{}
.websitesincludetitle{
	text-align: center;
	font-size: 1.6rem;
	padding: 1rem;
	 font-family: 'Share-TechMono';
	text-transform: uppercase;
}
.websitesincludewrapper{
display: flex;
justify-content: space-around;
width: 100%;
margin: 0 auto;
max-width: 1400px;
flex-wrap: wrap;
	
}

.websitesincludesections{
	background-color: #1f1f21;
	color: white;
   width: 49%;
   margin-bottom: 5px;
	text-align: center;
	padding: 1rem;
}
.websitesincludesectiontitle{
	color: #08ccab;
	font-size: 1.3rem;
	text-transform: uppercase;
	padding: 1rem;
}
.websitesincludeimg{
	width: 80%;
	padding: 1rem;
	display: block;
	margin: 0 auto;
	max-width: 350px;
}
.websitesincludedesc{
line-height: 1.3rem;
padding: .2rem;
font-size: .8rem;
}


@media screen and (min-width: 850px) {
.websitesincludesections{
 width: 24.5%;
 padding: 1rem;
}	
.websitesincludedesc{
font-size: .9rem;
}

	
}
	/*WEBSITES INCLUDE END*/
	
/* Video Slide Styles */

	.videosecwrapper {
		height: 100%;
		width: 100%; 
		display: block;
		position: relative;
		padding: 0;
		overflow: hidden;
	}
	
	.videosection {
		width: 100%;
		max-width: 900px;
        display: block;
		padding: 1.3rem;
		position: relative;
		margin: 0 auto 1rem auto;
		animation: videoslides 1s ease-in-out;
		
	}
	
	.videotitle {
		display: block;
        text-transform: uppercase;
		position: relative;
		text-align: center;
		font-size: 1.2rem;
		padding: .4rem 0 0 0;
		
	}

	.video {
		width: 100%;
		max-width: 900px;
		display: block;
		margin: 6.9% auto;
	   opacity: 0;
	}
	
    .videoimg {
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate( -50%, -50%);
		max-width: 900px;
		width: 100%;
		display: block;
		margin: 3.6rem auto;
		z-index: -2;
		cursor: pointer;

	}

.play {
		height: 40px;
		
  width: 65px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  position: absolute;
  left: 50%;
   top: 50%;
	transform: translate(-50%, 50%);
	 border-width: 9.5px 0 9.5px 17px;	
	cursor: pointer;
	z-index: 5;
	}

.reset_wrapper {
  height: 40px;
  width: 65px;
display: flex;
justify-content: center;
align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  position: absolute;
   left: 5%;
	top: 15%;
	transform: translate(-50%, 50%);
	 border-width: 9.5px 0 9.5px 17px;	
	cursor: pointer;
	z-index: 5;	
}

.reset_wrapper:hover {
  background-color: rgba(0, 173, 239, 0.9);
  opacity: 1;
}

.reset_wrapper:hover .reset_icon {
-moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
transform: rotate(360deg);
}

.reset{
height: 30px;
width: 30px;
position: relative;

}

.reset_icon {
width: 100%;
opacity: .8;
transition: .6s ease-in-out;
}
	
	.playwht {
		  content: "";
		
  display: block;
  position: absolute;
  top: 10.5px;
  left: 24px;
  margin: 0 auto;
  border-style: solid;
  border-width: 9.5px 0 9.5px 17px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 1);
		
	}

#vid1pse { display: none;}
#vid2pse { display: none;}
#vid3pse { display: none;}
#vid4pse { display: none;}
#vid5pse { display: none;}
#vid6pse { display: none;}
#vid7pse { display: none;}
#vid8pse { display: none;}
#vid9pse { display: none;}
#vid10pse { display: none;}
#vid11pse { display: none;}
#vid12pse { display: none;}
#vid13pse { display: none;}

#cover1 { display: block;}

#vid1psepl{display: none;}



.pause {

  height: 40px;
  width: 65px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  position: absolute;
  left: 50%;
   top: 50%;
	transform: translate(-50%, 50%);
	cursor: pointer;
	opacity: 0;
	z-index: 0;
	
	}

.pausewht {
	 position: absolute;
	 top: 50%;
	transform: translate(-50%, -50%);
  left: 50%;
  width: 20px;
  height: 25px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 1);
  border-style: double;
  border-width: 0px 0px 0px 20px;
		
	}
	

	



/* Graphic Slide Styles */




#graphicsection {
	background-color: #1f1f21;
	color: white;
padding: 1rem;
}

	.graphicsection {
		width: 100%;
		max-width: 900px;
		display: block;
		margin: 0 auto;
		animation: videoslides 1s ease-in-out;
		padding: 1rem;
	}


.graphictitle {
		display: block;
		position: relative;
		text-align: center;
		font-size: 1.2rem;
		padding: 1rem;
	color: white;
		
	}

.fixed_height_wrapper {

}

.graphic_img_wrapper{
max-width: 600px;
margin: 0 auto;
}


.graphicimg {
display: block;
position: relative;
width: 100%;
margin: 0 auto;
animation: webSlide3 .6s ease-out;
cursor: pointer;
}



	.graphiclearnmore {
		display: block;
		position: relative;
		width: 150px;
		background-color: white;
		text-decoration: none;
		color: black;
		margin: 0 auto 1rem auto;
		text-align: center;
		padding: .4rem .6rem;
	}

.graphiclearnmore:hover {
		background-color: #08ccab;
	color: black;
	transition: .6s ease-in-out;
	
}




/* Website Slide Styles */

.sectiontitle{
	text-align: center;
	font-size: 1.6rem;
	padding: 1rem 0 0 0;
	text-transform: uppercase;
}

	.wrapperbtnvid {
		position: relative;
		display: block;
		max-width: 1050px;
		margin: 0 auto;
	}

.websitesection{
	margin-bottom: 0;
	padding: 0 1rem 1rem 1rem;
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
    cursor: pointer;
      height: 55vw;
    max-height: 470px;
    
	
	}

.web_img_wrapper {
animation: SlideRight 1s ease-in-out;
position: relative;
}

	.websiteimg {
		display: block;
		position: relative;
		top: 0;
		width: 80%;
		margin: 0 auto;
		animation: webSlide .6s ease-out;
   
	}



.nextbtn {	
	background-color: rgba(17,0,0,.5);
	height: 35px;
	width: 105px;
	position: absolute;
	right: 5%;
	top: 50%;
cursor: pointer;
	transform: translate(-5%, 50%);
	border-radius: 1rem;
	
	}
	.prevbtn {
		background-color: rgba(17,0,0,.5);
	height: 35px;
	width: 105px;
	position: absolute;
	left: 5%;
	cursor: pointer;
	top: 50%;
	cursor: pointer;
	transform: translate(-5%, 50%);
	border-radius: 1rem;
	}
	
	.nextwht {
		color: white;
		text-align: center;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		cursor: pointer;

		
	}
	
	.prevwht {
		color: white;
			text-align: center;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		cursor: pointer;
	}
	





	.pausewht:hover, .pause:hover , .play:hover, .nextbtn:hover, .prevbtn:hover {
  background-color: rgba(0, 173, 239, 0.9);
  opacity: 1;
}



.bioimg {
	height: auto;
	width: 35%;
	display: block;
	margin: 0 auto;
	opacity: .75;
	max-width: 300px;
	border-radius: 50%;
	
}




.aboutwrapper {
	width: 100%;
	display: block;
	position: relative;
	background-color: #1d1d1f;
	
}



.abouttitle {
	font-size: 1.6rem;
	color: white;
	text-align: center;
	padding: .5rem 0 .3rem 0;
}


.aboutdescription {
	font-size: 1rem;
	color: white;
	max-width: 800px;
		padding: 2rem;
	display: block;
    	text-align: center;
	position: relative;
	margin: 0 auto;
	line-height: 2rem;
}

.contactformbackground{
  background-color: #1f1f21;
display: block;
width: 100%;
    
    
    
}

.contactformwrapper {
    display: flex;
flex-direction: column;
    padding: .4rem;
    
}
    

    
.form-sections {
	display: block;
	position: relative;
	width: 100%;
    max-width: 800px;
    padding: 1rem;
	
}



.input-row{
padding: .4rem 0;
	
}

.input-field {

}

input[type=submit]{
	width: 100%;
  background-color: #08ccab;
  color: white;
  padding: 14px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  max-width: 800px;
  display: block;
  margin: 1rem auto;
  transition: .6s ease-in-out;
  
	
}


input[type=submit]:hover {
	 background-color: white;
     color: black;
     font-weight: bold;
}

.input-row label {
	color: white;
	font-size: 1rem;
    text-transform: uppercase;
    line-height: 1.4rem;
}

.contact_textarea {
width: 100%;
display: block;
position: relative;
height: 125px;
padding: 12px 16px;
}


.form-container input[type=text], input[type=email], input[type=tel], .textarea, select, input[type=url] {
  width: 100%;
  padding: 12px 20px;
  display: block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  max-width: 800px;
  margin: 0 auto;
}

.form-container button[type=submit] {
  width: 100%;
  background-color: #08ccab;
  color: white;
  padding: 14px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  max-width: 800px;
  display: block;
  margin: 1rem auto;
    transition: .6s ease-in-out;
  
}

.formwrapper button[type=submit]:hover {
  background-color: #03D9B5;
}
	
#statusMessage {
	color: white;
	
}


.formdesctitle {
	color: #08ccab;
	font-size: 1.8rem;
	width: 100%;
	margin-bottom: 1rem;
	text-align: center;
    text-transform: uppercase;
}

.formdescript {
	display: block;
	position: relative;
	font-size: 1.4rem;
	color: white;
	margin-bottom: 3rem;
	text-align: center;

}

.formtitilewrapper {
	display: block;
	position: relative;
	color: white;
	width: 100%;

	
}

.titleform {
	display: block;
	width: 100%;
	color: white;
	font-size: 1.6rem;
	text-align: center;
}





#spfield {
opacity: 0;
position: absolute;
top: 0;
left: 0;
height: 0;
width: 0;
z-index: -1;
}







@media screen and (min-width : 900px) {
	.contactformwrapper {
    display: flex;
flex-direction: row;
    padding: .4rem;
        justify-content: center;
        align-items: center;
    
}
    
    .formdesctitle {
	color: #08ccab;
	font-size: 2rem;
	width: 100%;
	margin-bottom: 1rem;
	text-align: center;
    text-transform: uppercase;
}

.formdescript {
	display: block;
	position: relative;
	font-size: 1.5rem;
	color: white;
	margin-bottom: 3rem;
	text-align: center;

}
    
    .input-field {
font-size: 1.1rem;
}
    
    .input-row label {
	color: white;
	font-size: 1.1rem;
    line-height: 2rem;
}
    
	
}
.socialbackground {
    margin: .4rem 0;
	background-color: #1d1d1f;
	display: block;
	position: relative;
	width: 100%;
    
	
}




.socialwrapper {
    display: flex;
	max-width: 500px;
    justify-content: space-around;
    margin: 0 auto;
    align-items: center;
    padding: 0 1rem;
	
}
.socialtitile {
	text-align: center;
	font-size: 1.4rem;
	padding: .6rem;
	color: white;
}

.socialsections {
	height: auto;
	width: 100%;
	display: block;
	position: relative;
}


.socialicons {
	display: block;
	position: relative;
    margin: 0 auto;
 	width: 35px;
	height: auto;
	margin-bottom: 1rem;
	cursor: pointer;
	transition: .5s ease-in-out;
}


.socialicons:hover {
	filter: grayscale(100%);

}


@media screen and (min-width : 650px) { 
    
    .socialicons {
	width: 50px;

}
}
#modal  {
  display: none;
  position: fixed;
flex-direction: column;
  z-index: 50;
  left: 0;
  top: 0;
align-items: center;
justify-content: center;
  width: 100%;
  height: 100%;
  overflow: auto;
background-color: white;
}


#gr_modal  {
  display: none;
  position: fixed;
flex-direction: column;
  z-index: 50;
  left: 0;
  top: 0;
align-items: center;
justify-content: center;
  width: 100%;
  height: 100%;
  overflow: auto;
background-color: #1f1f21;
}


.modal_img_wrapper {
animation: animateappear 5.8s;	
width: 100%;
display: block;
max-width: 1200px;
margin: 0 auto;
}

.modal_img_wrapper_graphic {
animation: animateappear 5.8s;	
width: 100%;
display: block;
max-width: 700px;
margin: 0 auto;	
}

.modal_text_wrapper {
width: 100%;
color: black;
}

.modalimg {
width: 100%;}

.ourworkwrapper {width: 100%;}
.ourworktitile{text-align: center;padding: 1rem;font-size: 1.6rem;font-weight: 500;}
	

#gr_modaltitle {
color: white;
}

.modaltitle {
	
	text-align: center;
    text-transform: uppercase;
	margin: 2rem;
	font-size: 1.7rem;
	animation:animatefont 5.5s;

}
	
.closebtn {
background-color: transparent;
border: none;
position: absolute;
right: 9%;
top: 9%;
cursor: pointer;
font-size: 1.6rem;
z-index: 100;		
}


.gr_closebtn {
background-color: transparent;
border: none;
position: absolute;
right: 9%;
color: white;
top: 9%;
cursor: pointer;
font-size: 1.6rem;
z-index: 100;		
}
.upcity {
	width: 150px;
	display: block;
	position: relative;
}


.backtotop {
	background-color: white;
	width: 100%;
	display: block;
	position: relative;
}
.top {
	background-color: #1f1f21;
	color: white;
	display: block;
	position: relative;
	margin: 0 auto;
	padding: .4rem .6rem;
}


.background {
	background-color: #1f1f21;
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	padding: .4rem;
}


.footerwrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
	max-width: 1500px;
	
}

#ftlogo {
	width: 100%;
	padding: 1rem;
	
	
}

.sectionfoot {
	width: 50%;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
    margin-bottom: 2px;
}



.foottitle{
	display: block;
	color: white;
	padding: .4rem;
	font-size: .8rem;
	line-height: 1.5rem;
	margin-left: 1rem;
}

.footer_section_link {
text-decoration: none;
color: white;
}

.footlinks{
	display: block;
	text-decoration: none;
	color: rgba(176,176,176,1.00);
	font-size: .8rem;
	line-height: .6rem;
	transition: .5s ease-in-out;
	padding: .4rem;
	margin-left: 1rem;
}



.copyright{
	background-color: #1f1f21;
	color: white;
	font-size: .8rem;
	letter-spacing: .2rem;
	text-align: center;
	display: block;
	margin: 0;
	padding: 1rem;
	
}

.footlogo {
width: 100%;
display: block;
max-width: 150px;
margin: 0 auto;
}

.ftlogo_wrapper {
width: 100%;
position: relative;
display: block;
padding: .5rem;
}


.name {
	color: white;
	text-align: center;
	font-size: 1rem;
    font-weight: bold;
	padding-bottom: .5rem;
}

.info {
	color: white;
	text-align: center;
	font-size: .7rem;
	line-height: 1rem;
	text-decoration: none;
	display: block;
	

	
}


.footlinks:hover {
	color: #08ccab; 
}



@media screen and (min-width : 650px) {

#ftlogo {
width: 100%;
padding: 1rem;
}	
	
#ftservices{ width: 26%;}
#ftwork{width: 26%;}
#ftabout{width: 26%;}
#ftpages {width: 23%;}
#ftcontact {width: 23%;}
#ftsocial {width: 23%;}
#ftterms {width: 23%;}
	
}


@media screen and (min-width : 1200px) {

#ftlogo {
width: 19%;
}	
	
#ftservices{ width: 12%;}
#ftwork{width: 13%;}
#ftabout{width: 14%;}
#ftpages {width: 10%;}
#ftcontact {width: 11%;}
#ftsocial {width: 12%;}
#ftterms {width: 9%;}
	
}



/* FACEBOOK MESSENGER */

#facebook_messenger {
display: none;
animation: Rise 4s ease-in-out;
}

.facebook_messenger {
flex-direction: row-reverse;
text-decoration: none;
align-items: center;
position: fixed;
bottom: 4%;
z-index: 100;
right: 4%;
}

.facebook_messenger_link {
text-decoration: none;
}

.facebook_messenger_icon_wrapper {
width: 55px;
}

.facebook_messenger_icon {
width: 100%;

}

.facebook_messenger_text_wrapper {
border: 1px solid white;
background-color: white;
padding: .5rem 1rem .5rem .5rem;
border-radius: 15px;
position: relative;
}
.facebook_messenger_title {
color: black;
font-weight: bold;
}

.facebook_messenger_text {
color: black;
width: 225px;
}

.fb_messege_clb {
border: none;
background-color: transparent;
display: block;
position: absolute;
top: -15px;
left: -15px;
color: white;
padding: .5rem .4rem;
}.designtypesection{
		display: block;
		position: relative;
		background-color: #1f1f21;
		width: 100%;
		padding: 1rem .2rem;
		margin: 1rem 0;
	
	}
	.designtypewrapper{
		display: flex;
		justify-content: center;
        align-items: center;
		position: relative;
		margin: 0 auto;
		width: 98%;
		max-width: 750px;
	}
	.designtypebutton{
			text-align: center;
        margin: 0 .1rem ;
		text-decoration: none;
		display: block;
		width: 100%;
		background-color: white;
		color: black;
		padding: .3rem .5rem;
		cursor: pointer;
		font-size: .8rem;
	}
	.designtypebutton:hover {
		background-color: #08ccab;
		color: black;
		transition: .8s ease-in-out;
	
	}
@media screen and (min-width : 950px) {
	
	
	.designtypebutton{
		font-size: 1.1rem;
	}
	
}.ourwork-background {
display: block;
position: relative;
padding: 1rem;
}

.ourwork-titile {
text-align: center;
font-size: 1.6rem;
width: 100%;
}

.ourwork-subtitle{
padding: .4rem 0;
text-align: center;
}

.ourwork-titile span {
display: block;
font-size: 1.2rem;
border-bottom: 1px solid black;
padding: .5rem 0;
text-transform: uppercase;
width: 100%;
}

.ourwork-grid {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
text-align: center;
padding: 1rem;
}



.ourwork-section {
padding: .5rem;
width: 100%;
cursor: pointer;
margin-bottom: 1rem;
}

.ourworkwebtitle {
text-align: center;
padding: 1rem 0;
}

.ourworkwebimg {
width: 100%;
}

/* OUR WORK VID */
.our-workvideosection {
height: 100%;
width: 100%; 
display: block;
position: relative;
padding: 0;
overflow: hidden;
margin: .5rem 0;
}

.ourwork-imgvidwrapper{
display: block;
position: relative;
}


.ourwork-videoimg {
position: absolute;
top: 30%;
left: 50%;
transform: translate( -50%, -55%);
max-width: 900px;
width: 100%;
display: block;
margin: 3.6rem auto;
z-index: 1;
cursor: pointer;
}

.video {
display: block;
}



#ourwork_websites {
display: block;
}
#ourwork_graphic {
display: none;
}
#ourwork_video {
display: none;
}

@media screen and (min-width: 800px) {
.ourwork-section {
padding: .5rem;
width: 45%;
}
.our-workvideosection {
width: 45%; 
}
}
@media screen and (min-width: 1200px) {
.ourwork-section {
padding: .5rem;
width: 32%;
}
.our-workvideosection {
width: 32%; 
}
}
@media screen and (min-width: 1920px) {
.ourwork-section {
padding: .5rem;
width: 24%;
}
.our-workvideosection {
width: 24%; 
}
}
@media screen and (min-width: 2220px) {
.ourwork-section {
padding: .5rem;
width: 19%;
}
}



	
.pricing-titles {
		padding: 1rem;
		text-align: center;
		font-size: 1.6rem;
	text-transform: uppercase;
	}


.pricing_subtitle {
display: block;
text-align: center;
font-size: 1.1rem;
text-transform: uppercase;
}

	.pricing-background{
		color: black;
		background-color: #1f1f21;
		display: block;
		position: relative;
		width: 100%;
		margin: 1rem 0;
}
	.pricing-grid{
		display: flex;
	    max-width: 1950px;
        flex-direction: row;
		margin: 0 auto;
	    flex-wrap: wrap;
		justify-content: space-around;
        align-items: center;
		position: relative;
	    width: 100%;
		padding: 1.5rem;
		
	}
	.pricing-section{
		display: block;
		position: relative;
	    cursor: pointer;
		box-shadow: 1px 1px 10px 4px black;
		border-radius: 1rem;
		padding: 1rem;
		margin: 1rem .5rem;
	    max-width: 300px;
        width: 80%;
        background-color: white;
		text-align: center;
		transition: .5s ease-in-out;

	}

#seo_section1, #seo_section2, #seo_section3 {
max-width: 400px;	
}
	
	#section1:hover, #section2:hover, #section3:hover, #section4:hover, #section5:hover{
		background-color: #08ccab;
		cursor: pointer;
		
	}
	
	#section3{
		background-color: gold;
	}

/* ADVERTISING SECTION HOVER EFFECTS */

#ad_section1:hover, #ad_section2:hover, #ad_section3:hover, #ad_section4:hover, #ad_section5:hover {
background-color: #08ccab;
cursor: pointer;
}

#ad_section3 {
background-color: gold;
}


#section1:hover #buynow1{
	background-color: white;
	color: black;
	transition: .6s ease-in-out;
}

#section1:hover #buynowyr1{
	background-color: white;
	color: black;
	transition: .6s ease-in-out;
}

#section2:hover #buynow2{
	background-color: white;
	color: black;
	transition: .6s ease-in-out;
}

#section2:hover #buynowyr2{
	background-color: white;
	color: black;
	transition: .6s ease-in-out;
}

#section3:hover #buynow3{
	background-color: white;
	color: black;
	transition: .6s ease-in-out;
}

#section3:hover #buynowyr3{
	background-color: white;
	color: black;
	transition: .6s ease-in-out;
}

#section4:hover #buynow4{
	background-color: white;
	color: black;
	transition: .6s ease-in-out;
}

#section4:hover #buynowyr4{
	background-color: white;
	color: black;
	transition: .6s ease-in-out;
}


/* SEO SECTION HOVER EFFECTS */

#seo_section1:hover, #seo_section2:hover, #seo_section3:hover {
background-color: #08ccab;
cursor: pointer;
}

#seo_section2 {
background-color: gold;
}
	
	.special{
		position: absolute;
		display: block;
		top: -30px;
	    font-size: .8rem;
		left: 0;
		width:  150px;
		background-color: #08ccab;
		border-radius: 1rem;
		box-shadow: 1px 1px 5px 2px black;
		padding: 1rem;
		
		
	}
	
	.Price {
		font-size: 2.4rem;
		padding: 1rem 1rem 0 1rem;
		
	}
	
	.yearPrice {
		font-size: 2.4rem;
		padding: 1rem 1rem 0 1rem;
	
	}
	
	#yprice1{display: none;}
	#yprice2{display: none;}
	#yprice3{display: none;}
	#yprice4{display: none;}
    #yprice5{display: none;}
	
	#moprice1{display: block;}
	#moprice2{display: block;}
	#moprice3{display: block;}
	#moprice4{display: block;}
     #moprice5{display: block;}

    #buynowyr1 {display: none;}
	#buynowyr2 {display: none;}
	#buynowyr3 {display: none;}
	#buynowyr4 {display: none;}
    #buynowyr5 {display: none;}
	
	 #buynow1 {display: block;}
	#buynow2 {display: block;}
	#buynow3 {display: block;}
	#buynow4 {display: block;}
    #buynow5 {display: block;}
	
	.packagename{
		text-transform: uppercase;
		font-family: 'Share-TechMono';
	    font-size: 1rem;
	}
	
	.pricegrid {
		display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
		justify-content: center;
	}


	.options{
		text-align: center;
		padding: .2rem;
        width: 50%;
	}
	
	.options:hover {
		color: white;
		transition: .6s ease-in-out;
	}
	
	.element {
		text-align: left;
		padding: .2rem;
         width: 50%;
	}
	
		
	
	.setupfee {
		padding: 0 0 1rem 0;
		
	}
	
	.seperator {
		background-color: black;
		width: 100%;
		height: 1px;
		margin: .3rem 0;
	}
	
	.pricing-togglewrapper{
		display: block;
		position: relative;
		margin: 0 auto;
		width: 150px;
		
	}
	.pricing-switchbackground{
		display: block;
		position: relative;
		background-color: rgba(215,215,215,1.00);
		width: 120px;
		height: 35px;
		margin: 1rem 0;
		cursor: pointer;
		
	}
	.pricing-monthly{
		position: absolute;
		right: 8px;
		top: 50%;
	    transform: translate(-2px, -50%);
		transition: .8s ease-in-out;
		
	}
				
	.pricing-yearly{
		position: absolute;
		left: 1px;
		top: 50%;
		transform: translate(2px, -50%);
		opacity: 0;
		
	}
	.pricing-slider{
		position: absolute;
		left: 3px;
		top: 2px;
		height: 30px;
		background-color: white;
		width: 32px;
		cursor: pointer;
		z-index: 100;
		transition: .4s ease-in-out;
		
	}
	
	
	.toggle .pricing-switchbackground {background-color: #08ccab;transition: 2s ease-in-out;}
	.toggle .pricing-monthly{ opacity: 0;right: 0;}
	.toggle .pricing-yearly{opacity: 1; left: 15px;transition: 1s ease-in-out;}
	.toggle .pricing-slider{;
	left: 85px;
	right: 2px;}
	

@media screen and (min-width : 650px) {

    
	
	.pricing-titles {
		font-size: 1.8rem;
	}

	
    
}

@media screen and (min-width : 900px) {

	.pricing-titles {
		font-size: 2rem;
	}
    .Price {font-size: 2.6rem;	}
	.yearPrice {font-size: 2.6rem;	}
    .packagename{
		text-transform: uppercase;
		font-family: 'Share-TechMono';
	    font-size: 1.2rem;
	}
	
 .pricing_subtitle {
font-size: 1.5rem;
}
	
	
}

@media screen and (min-width : 1200px) {


   .pricing-titles {
		font-size: 2.2rem;
	}
    
}

@media screen and (min-width : 1500px) {


   .pricing-titles {
		font-size: 2.2rem;
	}
    
}
.background404 {
	width: 100%;
    display: block;
	height: 500px;
    background: linear-gradient(
      rgba(42,42,42,.50), 
      rgba(42,42,42,.85) ),
    url("https://magnetizeyourweb.com/images/jpg/nonmagnetic.jpg");
	background-repeat: no-repeat;
  	background-position: center;
	background-size: cover;

	
}


.wrapper404{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 100%;
	height: 100%;
	padding: 1rem;
}
.title404{
	color: white;
	font-family: 'Share-TechMono';
	text-transform: uppercase;
	font-size: 1.4rem;
	padding: 1rem 0;
}
.sub404{
	color: white;
	font-family: 'Share-TechMono';
    text-transform: uppercase;
}

.top404 {
	font-size: 1.8rem;
	text-transform: uppercase;
	color: white;
}


@media screen 
and (min-width : 900px) {

	.title404{
		font-size: 2rem;
	}
	.sub404{
		font-size: 1.1rem;
	}
	
	.background404 {
		background-attachment: fixed;
	}
	.top404 {
	font-size: 2.4rem;

}
}

@media screen 
and (min-width : 1400px) {

	
	.top404 {
	font-size: 3rem;
	}
	.title404{
		font-size: 2.5rem;
	}
	.sub404{
		font-size: 1.2rem;
	}
	
	.background404 {
		background-attachment: fixed;
	}
	
}/*PRIVACY POLICY */

.privacy_policy_background {
display: block;
position: relative;
width: 100%;
}

.privacy_policy_wrapper {
display: block;
position: relative;
width: 85%;
max-width: 1200px;
margin: 0 auto;
}

.privacy_policy_title {
font-size: 1.4rem;
	padding: 1rem 0;
text-align: center;

}

.privacy_policy_content {
line-height: 2rem;
padding-bottom: 1rem;
}

.privacy_policy_links {
text-decoration: none;
font-weight: bold;
font-size: 1.1rem;
color: black;
}
.privacy_policy_content strong {
font-weight: bold;
font-size: 1.1rem;
}

.privacy_links strong {
font-weight: bold;
font-size: 1.1rem;	
}

.privacy_link {
text-decoration: none;	
color: black;	
}

.privacy_sources {
padding-bottom: 2rem;
line-height: 1.2rem;
	
}

.privacy_links_wrapper {

}
.privacy_links {
padding: .4rem 0;
}


.personal_info {
padding-bottom: 2rem;
line-height: 1.2rem;
}
.personal_info li{
list-style: disc;
padding: .5rem 0;
}

.privacy_sources li {
list-style: disc;
padding: .5rem 0;
}

.personal_info strong {
font-weight: bold;
font-size: 1.1rem;
}

.privacy_sources strong{
font-weight: bold;
font-size: 1.1rem;
}

.privacy_link:hover {
color: #018b73;
}

.privacy_policy_links {
}

.privacy_policy_subtitle {
font-size: 1.3rem;
padding: .4rem 0;
list-style: decimal-leading-zero;
}

.privacy_bullets {
}

.privacy_link {
transition: .6s ease-in-out;
border-bottom: 1px solid black;
}


/*TERMS OF SERVICE */

.terms_of_service_background {
display: block;
position: relative;
padding: 1rem;
}

.terms_of_service_wrapper {
display: block;
margin: 0 auto;
max-width: 1000px;

}

.terms_of_service_title {
text-align: center;
font-size: 1.6rem;
padding: .5rem;
}

.terms_of_service_section_wrapper {
display: flex;
flex-direction: column;
}

.terms_of_service_section {
padding: .5rem 0;
}

.terms_what_we_do_title {
font-size: 1.2rem;
font-weight: bold;
padding: .5rem 0;
}

.terms_services_wrapper {
display: flex;
flex-direction: column;
}

.terms_services {
display: block;
text-decoration: none;
padding: .4rem .6rem;
width: 100%;
background-color: black;
color: white;
margin: .4rem 0;
text-align: left;
transition: .6s ease-out;
}

.terms_services:hover {
background-color: transparent;
color: black;
}

.terms_category {
padding: 1rem 0;
font-size: 1.5rem;
font-weight: bold;
border-bottom: 1px solid black;
width: 55%;
}

.the_process_wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.the_process_sections {
padding: .3rem 0;
}

.process_titles {
font-size: 1rem;
font-weight: bold;
border-bottom: 1px solid black;
width: 80%;
padding: .4rem 0;

}
.terms_bar {
display: block;
background-color: black;
width: 100%;
height: 9px;
}

.process_desc {
line-height: 2rem;
}

.terms_of_service_content {
line-height: 2rem;
}
@keyframes Left1 {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes Left2 {   from {opacity: 0;}  to {opacity: 1;}}
@keyframes Left3 {   from {opacity: 0;}  to {opacity: 1;}}
@keyframes Left4 {   from {opacity: 0;}  to {opacity: 1;}}
@keyframes Left5 {   from {opacity: 0;}  to {opacity: 1;}}
@keyframes Left6 {   from {opacity: 0;}  to {opacity: 1;}}
@keyframes Left7 {   from {opacity: 0;}  to {opacity: 1;}}
@keyframes Left8 {   from {opacity: 0;}  to {opacity: 1;}}
@keyframes Left9 {   from {opacity: 0;}  to {opacity: 1;}}
@keyframes Left10 {   from {opacity: 0;}  to {opacity: 1;}}
@keyframes Left11 {   from {opacity: 0;}  to {opacity: 1;}}
@keyframes Left12 {   from {opacity: 0;}  to {opacity: 1;}}
@keyframes Left13 {   from {opacity: 0;}  to {opacity: 1;}}
@keyframes Left14 {   from {opacity: 0;}  to {opacity: 1;}}
@keyframes Left15 {   from {opacity: 0;}  to {opacity: 1;}}
@keyframes Left16 {   from {opacity: 0;}  to {opacity: 1;}}
@keyframes Left17 {   from {opacity: 0;}  to {opacity: 1;}}
@keyframes Left18 {   from {opacity: 0;}  to {opacity: 1;}}
@keyframes Left19 {   from {opacity: 0;}  to {opacity: 1;}}





.areas_background {
display: block;
position: relative;
padding: 2rem 0;
margin-bottom: .5rem;
}

.areas_wrapper {
padding: .5rem;
background-color: #1f1f21;
color: white;
    
}

.areas_section_title {
display: block;
position: relative;
text-align: center;
font-size: 1.6rem;
}

.areas_section_sub {
display: block;   
position: relative;
text-align: center;
padding-bottom: .5rem;
}

.areas_section_wrapper {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
}


.areas_section {
display: block;
margin: 0 auto;
position: relative;
width: 100%;
padding: .5rem .5rem 2rem .5rem;


}

.areas {
text-align: center;
text-decoration: none;
color: white;
border-bottom: 1px solid white;
padding: .7rem;
display: block;
position: relative;
width: 185px;
margin: 0 auto;
transition: .6s ease-in-out;   
}

.areas:hover {
border-bottom: 1px solid transparent;
opacity: .5;

}


#area_1_wrapper{}
#area_2_wrapper{display: none;}
#area_3_wrapper{display: none;}
#area_4_wrapper{display: none;}
#area_5_wrapper{display: none;}
#area_6_wrapper{display: none;}
#area_7_wrapper{display: none;}
#area_8_wrapper{display: none;}
#area_9_wrapper{display: none;}

#area_1{}
#area_2{}
#area_3{}
#area_4{}
#area_5{}
#area_6{}
#area_7{}
#area_8{}
#area_9{}


@media screen and (min-width: 400px) {
#area_2_wrapper{display: block;} 
}

@media screen and (min-width: 600px) {
#area_3_wrapper{display: block;} 
}

@media screen and (min-width: 800px) {
#area_4_wrapper{display: block;}
}

@media screen and (min-width: 1000px) {
#area_5_wrapper{display: block;}
}

@media screen and (min-width: 1200px) {
#area_6_wrapper{display: block;}
}

@media screen and (min-width: 1400px) {
#area_7_wrapper{display: block;}
}

@media screen and (min-width: 1600px) {
#area_8_wrapper{display: block;}
}

@media screen and (min-width: 1800px) {
#area_9_wrapper{display: block;}
}


/* Local SEO Pages */

.local_seo_background {
padding: 1rem;
background-color: #1f1f21;
color: white;
}

.local_seo_wrapper {
padding: 1rem;
max-width: 1100px;
margin: 0 auto;
}

.local_seo_title {
font-size: 1.6rem;
padding-top: .5rem;
}

.local_seo_sub {
padding: .2rem 0 .5rem 0;
font-style: italic;
}

.local_seo_p {
text-indent: 50px;
line-height: 1.5rem;
}


.local_seo_p span {
color: #08ccab;

}


.local_seo_list_title {
font-style: italic;
font-size: 1.2rem;
}

.local_seo_subtitle {
font-weight: .8rem;
padding-bottom: .5rem;
border-bottom: 1px solid white;
margin-bottom: .5rem;
}

.local_seo_list1 {
padding: 1rem;
}

.local_seo_list1 li {
list-style: disc;
line-height: 1.5rem;
}

.local_seo_cta {
text-decoration: none;
color: black;
background-color: white;
padding: .6rem;
}

.local_seo_cta:hover {
background-color: transparent;
border: 1px solid white;
color: white;
}

@media screen and (min-width: 900px) {
.local_seo_title {
font-size: 2.3rem;
padding-top: 1rem;
}

.local_seo_sub {
padding: .5rem 0 1rem 0;
font-style: italic;
font-size: 1.1rem;
}

.local_seo_p {
text-indent: 50px;
font-size: 1.1rem;
line-height: 2rem;
}
	
.local_seo_list_title {
padding: .5rem 0;
margin-bottom: .5rem;
font-size: 1.4rem;

}
	
.local_seo_list1 li {
line-height: 1.8rem;
font-size: 1.1rem;
}	
}	

.magnetize_invoice_background {
display: block;
position: relative;
padding: 1rem;

}

.magnetize_invoice_wrapper {
padding: 2rem;
width: 50%;
display: block;
margin: 0 auto;
min-width: 300px;
border-radius: 2rem;
border: 2px solid black;
}

.magnetize_invoice_title {
font-size: 1.6rem;
font-weight: bold;
}

.magnetize_invoice_img_wrapper {
display: block;
width: 90px;
position: relative;
}

.magnetize_invoice_img {
width: 100%;
}

.magnetize_invoice_desc {
margin: 1rem 0;
line-height: 1.5rem;
}

.invoice_end {
padding: 1rem 0;
font-weight: bold;
}


.magnetize_invoice_button {
background-color: #08ccab;
border: none;
padding: .4rem .6rem;
display: block;
width: 125px;
text-align: center;
transition: .6s ease-in-out;
cursor: pointer;
}

.magnetize_invoice_button:hover {
background-color: black;
color: white;
}


#error-message {
	color: red;
	padding: 1rem 0;
   font-size: 1rem;
   border-bottom: 1px solid red;
}