*,
*::before,
*::after {
  box-sizing: border-box;
}
:root{
	--light-blue:#d5effb;
	--dark-blue: #3aa1da;
	--acc-dark-blue: #93d7f6;
	--acc-light-blue: #c6eafb;
	--white: #e1f4fd;
	--light-text-blue: #6ac0ec;
	--darkest-blue: #024481;


	--main-white: #E2EAE4;
	--main-black:  #040404;
	--main-grey: #9FA2A0;
	--main-green: #3F6948;
	--light-green:#99C5A1; 
	--main-blue: #6883BA;
	--main-orange: #fa824c;
	--main-red: #990000;
	--font-title: Source Sans Pro;
	--light-grey: #919D93;
	--main-brown: #695d3f;
	--main-purple: #693f60;
	
	--light-brown: #E3D4AD;
	
	
	}
	
.fa-check {
 color: var(--main-green);
}

html {
    position: relative;
    min-height: 100%; 
}

p {
margin: 1em;
}
body {
	
	background-color: var(--main-white);
	color:var(--main-black);
	font-family: Oswald;
	text-align: center;
font-size: 1em;
padding: 0px;
margin: 0px;
}
footer {
	position: relative;
	z-index: 7;
	background-color: var(--light-grey);
	color: var(--main-brown);
	margin: 0px;
	padding: 5px;
	height: 200px;
	
}
footer a{
font-size: 1.5em;
text-decoration: none;
color: var(--main-green);

}
h1 {
font-size: 2.1em;
}

h2 {
font-size: 1.7em;
}
h3 {
font-size: 1.3em;
}
h1, h2, h3 {

	font-family: var(--font-title);
	text-align: center;
color: var(--main-green);
}



article {
	max-width: 80%;
	margin: auto;
	margin-bottom: .7em;
	margin-top:.7em;
	background-color: var(--light-brown);
border-radius: .7em;
padding-bottom: .3em;
}



#Bloghead, h1, h2 {
	margin-bottom: 0px;
	padding-bottom: 0px;
}




.w3-animate-fading{animation:fading 5s infinite;}
@keyframes fading{0%{opacity:0;}20% {opacity:100;}80% {opacity:100;}100%{opacity:0;}}
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
#slideshowDiv {
	/*background-color: white;*/
	padding: .3em;
	
}
.mySlides, 
.galleryImage{
	max-width: 80%;
	max-height: 75vh;
	margin: auto;
}

.smLink{
	text-decoration: none;
	width: 4em;
	font-size: 4em;
	color: var(--main-green);
	display: block;
	flex-basis: 20%;
	margin: .3em;
}
.smLink:hover{
	font-size: 5em;
	
}
#socialLinks {
	display: flex;
	justify-content: center;
	
}
a.foot {
	font-size: 1.5em;
text-decoration: underline;
}

ul {
text-align: left;
width: fit-content;
margin: auto;
}

.bio img {
max-height: 50vh;
margin: 1em;
}
.bio {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}

.bio h1, h2, h3 {
flex-basis: 100%;
margin: .2em;
}

.bio h3 {
font-size: 1em;
}

.pair {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.pair img {
	flex-basis: 45%;
	object-fit: contain;
}

.pair p {
	flex-basis: 45%;
}


#blog_posts{
	margin-bottom: 2em;
}

.galleryArticle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	background-color: var(--main-green);
	color: var(--main-white);
	border-radius: .4em;
	margin: .5em auto 2em auto;
	margin-bottom: 2em;
	width: 95%;
	padding-bottom: .5em;
}
.galleryTitle {
	flex-basis: 95%;
}
.galleryCreateInfo {
	flex-basis: 95%;
}
.galleryVideo{
	flex-basis: 95%;
	width: 90%;
}
.galleryImage {
	/*flex-basis: 95%;*/
	
}
.galleryDescription {
	flex-basis: 95%;
}



#mailJoin, button, #viewGalBtn{
	background-color: var(--main-green);
	border: none;
  color: var(--main-grey);
  padding: .5em .7em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5em;
  font-family: var(--font-title);
  margin-bottom: .5em;
  margin-top: .5em;
  border-radius: .2em;
}



/* forms */


input[type=text], textarea, input[type=email] { 
  width: 75%;
  margin-top: 10px;
  border: 1px solid #ccc; 
  height: 1.5 em;
  font-size: 1.5em;
  
  	font-family: var(--font-title);
	padding: .5em;


}
input[type=email] {
text-align: center;	
	
}

#GalleryDiv{
 display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
padding: 5px;

}
{
flex-basis: 33%;
}

.galleryImg  {
    
  height: 33vh;
	flex-grow: 1;
}
.galleryImg  img {
     max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}


.topnav {
  position: fixed;
  /*overflow: hidden;*/
  background-color: var(--light-green);
  top:0;
  width: 100%;
  margin-bottom: 20px;
  height: 84px;
  z-index: 999;
}
.topnavLogo {
	height: 67px;
	width: auto;
	display: inline-block;
	padding:0px;
	margin: 3px 10px;
	float: left;
	margin-top: -9px;
	margin-right: 33px;
}

.topnav a {
  float: left;
  display: block;
  color: var(--main-brown);
  text-align: center;
  padding: 18px 18px;
  text-decoration: none;
  font-size: 26px;
  

}

.topnav a:hover {
  background-color: var(--main-grey);
  color: var(--main-black);
}

.topnav .active {
  
  color: var(--main-grey);
}

.topnav .icon {
  display: none;
  width: 100px;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 21px;    
  border: none;
  outline: none;
  color: var(--main-green);
  background-color: var(--main-white);
  padding: 14px 8px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--main-white);
  color: var(--main-green);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: var(--light-green);
  color: var(--main-green);
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
  background-color: var(--light-green);
}


.clrLink {
	text-decoration: none;
	color: var(--main-green);
	font-weight: bold;
	text-shadow: 1px 1px var(--alt-blue);
	display: inline-block;
}
.clrLinkbeta {
	text-decoration: none;
	text-align: left;
	color: var(--main-green);
	font-weight: bold;
	text-shadow: 1px 1px var(--main-black);
	display: inline-block;
}

#servicesCont, #packageDiv, #nonstPriceDiv{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	background-color: var(--main-white);
}
.serviceDiv, .pricePackage, .nonstPrice {
	width: 40vw;
	border-style: solid;
	border-radius: 1vw;
	margin: 1vw;
	background-color: var(--light-brown);
}
div.section {
  position: relative;
  background-color: var(--light-brown);
  width: 100%;
  min-height: 10vh;
  padding: 1vh;
  z-index: 1
}
div.parallax-image* {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  top: 0;
}

div.parallax-image1 {
	
  background: no-repeat center/100%  url("../img/power_roof.jpg");
  z-index: -1;
}
div.section-header {
  position: relative;
  width: 100%;
  height: 33vh;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  z-index: 2;
}
/*
.parallax-image* {
  /* The image used */
 

  /* Set a specific height 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  top: 0;


  
}

.parallax-image-s1 {
 background-image: url("../img/behind.scene.jpg");
}
*/

.sticky {
  margin-top: -100vh;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(45deg, red, blue);
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 0;
}


.siteLink {
	color: var(--main-green);
	text-decoration: none;
	font-size: 21px;
	
}
#intro {
	text-align: center;
}
#floatContact {
       bottom: 15px;
       right: 15px;
       position: fixed;
       z-index: 3000;
}
a.contactFloat {

  font-size: 18px;
  border: none;
  outline: none;
  background-color: var(--main-green);
  color: var(--main-white);;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}




/*         mobile support               */








@media screen and (min-width: 1000px){
	#floatEmail{
	display:block;
	z-index: 334;
}
#floatPhone{
	display: none;
	z-index: 332;
}
}
@media screen and (max-width: 999px) {
	#floatEmail{
	display:none;
	z-index: 332;
}
#floatPhone{
	display: block;
	z-index: 334;
}
	body{
		font-size: 19px;
		overflow-wrap: break-word;
	}
	
  .topnav a:not(:first-child), .dropdown .dropbtn {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }

  .topnav.responsive {position: relative; background-color: var(--main-white); z-index:777;}
  .topnav.responsive .icon {
    position: absolute;
	
    right: 0;
    top: 0;
  }
	
	.topnav.responsive a:nth-child(2){
	margin-top: 62px;
}

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: right;
	color: var(--main-green);
	background-color: var(--main-white);
	z-index:999;
  }
  .topnav.responsive a:hover {
	background-color: var(--light-green);
	color: var(--main-green);
}
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 80%;
    text-align: left;
  }
  
  .prodImgCont {
	  flex-wrap: wrap;
  }
  .productImg {
	  flex-basis: 100%;
  }
  .serviceDiv {
	width: 80vw;
	border-style: solid;
	border-radius: 1vw;
	margin: 1vw;
}
.pair img {
	flex-basis: 80%;
}
.pair p {
	flex-basis: 80%;
}
#GalleryDiv{

justify-content: flex-start;


}
.mySlides, 
.galleryImage{
	max-width: 95 vw;
	max-height: 75vh;
	margin: auto;
	height:auto !important;
}

article {
	max-width: 90%;
	margin: auto;
	margin-bottom: .7em;
	margin-top:.7em;
	
border-radius: .7em;
padding-bottom: .3em;
}

h1 {
font-size: 1.7em;
}

h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.3em;
}

#mailJoin, button, #viewGalBtn{
	
  padding: .2em .3em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.1em;
  font-family: var(--font-title);
  margin-bottom: .2em;
  margin-top: .2em;
  border-radius: .1em;
}

div.parallax-image1 {
	
  background: no-repeat center/100%  url("../img/power_roof.mobile.png");
  z-index:-1;
}

footer {
	height: 250px;
	
}

}