/*
color patterns:
4C0908 (dark red)
990200 (red)
084C1D (dark green)
*/

/***********************************

****   CSS - ON DOM ELEMENTS

***********************************/

/* be sure the css link works */
body{
	display:block;
	margin:0px;
	padding:0px;
	background-image: url("../images/white_wave.png");
	background-repeat: repeat;
	
	font-family: 'Roboto,Arial,Helvetica,sans-serif';
	font-style: normal;
	font-weight: 400;
	font-size: 1.05em;
	line-height:1.1;
	color:#919191;
}

h1{
	text-align:center;
	height:2em;
	line-height:2em;
	vertical-align:middle;
	color: #084C1D;
	font-size:1.4em;
}

h2{
	font-size: 1.2em;
	color: rgb(79,100,57);	
	font-weight: 600;
}


/***********************************

****   CSS - NAVIGATION - MOBILE VERSION

***********************************/
/* when media is smaller than 768px then.. */
@media only screen and (max-width: 768px) {
	#mnu{
		position:fixed;
		display:inline-block;
		
		top: 10px;
		right: 5px;
		
		background-image: url("../img/backgroundLines.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: fill;
		background-color:white;
		
		border-style:solid;
		border-width:2px;
		border-color:grey;
		
		width: 45px;
		height: 45px;
	}
	
	#mobileNav ul{
	  list-style-type: none;
	  padding:0px;
	}

	#mobileNav ul li{
	  list-style-type: none;
	  display: block;
	  color: #000;
	  padding: 8px 16px;
	  text-decoration: none;
	}

	#mobileNav ul li.active {
	  background-color: #04AA6D;
	  color: white;
	}

	#mobileNav ul li:hover:not(.active) {
	  background-color: #555;
	  color: white;
	}
}
/* when media is bigger than 768px then.. */
@media only screen and (min-width: 768px) {
	#mnu{
		display:none;
	}
}

/***********************************

****   CSS - NAVIGATION - DESKTOP VERSION

***********************************/
@media only screen and (max-width: 768px) {
	#navigation{
		display:none;
	}
	
}

/* when media is bigger than 768px then.. */
@media only screen and (min-width: 768px) {
	/* the navigation-bar */
	#navigation{

		/*border:solid 1px black;*/

		background: #EEEEEE;
		height:2.2em;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.075);
		color: black;
		cursor: default;
		width: 100%;
		z-index: 100;
			
		letter-spacing: 0.075em;
		text-transform: uppercase;
		text-align:right;
		line-height:2.2em;
		vertical-align:middle;
	}
	
	#navigation nav ul{
		margin:0px;
	}

	/* place the list-items horizontally without bullets */
	#navigation nav ul li {
		display: inline-block;
		height:100%;
	}

	#navigation nav ul li a{
		display:block;
		color:black;
		padding-left:1em;
		padding-right:1em;
		text-decoration:none;	
	}

	#navigation nav ul li a:hover{
		background-color:#084C1D;
		color:white;
	}

	#navigation nav ul li a.active{
		background-color:gray;
		color:white;
	}

	#navigation nav ul li a span:before{
		padding-right:5px;
	}

	/* leave the navigation bar at the default place */
	#navigation.alt{
		position:relative;
	}


	#navigation.sticky{
		background-image: url("../images/boom.jpg");
		background-repeat: no-repeat;
		background-position: 5% 50%;;
		background-size: contain;
		
		position:fixed;
		top:0em;
		left:0em;
		
		/* animation: name duration timing-function delay iteration-count direction fill-mode play-state; */
		-webkit-animation: fadeIn 0.35s ease-in 0s 1;
		-moz-animation:    fadeIn 0.35s ease-in 0s 1;
		-o-animation:      fadeIn 0.35s ease-in 0s 1;
		animation:         fadeIn 0.35s ease-in 0s 1;
	}
}





/***********************************

****   CSS - HEADER

***********************************/
/* add a logo on top of the banner */
#logo{
	min-height: 4em;
	background-image: url("../images/ArdoplantBoom.jpg");
	background-attachment: scroll;
	background-position: 5% 50%;
	background-repeat: no-repeat;
	background-size: contain;
	background-color: white;
}

/* add a top banner */
#banner {
	display:block;
	background-color: black; 
	/* background-size: 25em, 25em, auto, cover;*/
	color: white;
	cursor: default;
	padding: 2em 0;
	
	background-image: url("../images/banner_01_magnolia_400h.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	
	text-align: center;
	vertical-align: middle;
	line-height: 2em;
	letter-spacing:0.4em;
	/*text-shadow: 2px 2px 1px #333333;*/
}


/***********************************

****   CSS - PAGE

***********************************/
.myGrid{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap:20px;
}

.usp{
	padding:2em; 
	margin-top: 1em; 
	margin-bottom: 1em; 
	border-style: solid; 
	border-width:2px;
}

@media only screen and (max-width: 768px) {
	.myGrid{
		display:inline;
	}
}

/* use a lot of vertical height + make sections without space between each other */
section{
	overflow: hidden;
	box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.05), inset 0 0.1em 0.1em 0 rgba(0,0,0,0.025);
	background-color:#FFFFFE;
	text-align:center;
	padding:3vw 10vw 3vw 10vw;
}

/* when media is smaller than 1280 then.. */
@media only screen and (max-width: 1280px) {
	section{
		padding:2vw 4vw 2vw 4vw;
	}
	footer{padding:2vw 4vw 2vw 4vw;
	}
}

/* when media is smaller than 768px then.. */
@media only screen and (max-width: 768px) {
	section{
		padding:1vw 2vw 1vw 2vw;
	}
	
	footer{padding:1vw 2vw 1vw 2vw;
	}
}

/***********************************

****   CSS - FOOTER

***********************************/
footer{
	background-color:#444444;	
	padding:3vw 10vw 3vw 10vw;
	min-height:250px;
}

.breadcrumb ul li a{
	color:white;
	text-decoration:none;
}

.breadcrumb ul li a:link{
	color:white;
}

.breadcrumb ul li a:hover{
	color:pink;
}

.breadcrumb ul li a:visited{
	color:white;
	text-decoration:none;
}


.breadcrumb:last-child{
	border-style: solid; 
	border-width :0px 0px 0px 1px;
	padding-left:1em;
}

/* when media is smaller than 768px then.. */
@media only screen and (max-width: 768px) {
	.breadcrumb:last-child{
		margin-top: 2em;
		border-style: none; 
		border-width :0px 0px 0px 0px;
	}

}

.breadcrumb ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.breadcrumb ul li{
	padding-top: 0.5em;
}


/*
.breadcrumb li {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  
  text-decoration;none;
}

.breadcrumb ul li:before{
  content: '\f105';
}

.breadcrumb{
	padding:2em; 
	margin-bottom: 1em; 
	/*border-style: solid; 
	border-width:1px;*/
	
}


footer .myFooter{
	display:block;
	min-height:18em;
	background-color:#555555;
}


.logo{
	display:inline-block;
	position:relative;
	background: url("../images/logo_white.png") no-repeat 0 50%;
    background-size: contain;
    width: 100%;
    height: 100px;
    font-size: 0;
}
	

footer .myFooter .myGrid h2{
	color:white;
}

#location{
	display: list-item;
}
 


/* trick place the content right, when clicking on nav bar depending if the nav bar is relative or fixed */
section.alt{
	position:relative;
	top:0em;
}

section.sticky{
	position:relative;
	top:4.4em;
	
	-moz-transition: all 0.45s ease-in-out;
	-webkit-transition: all 0.45s ease-in-out;
	-o-transition: all 0.45s ease-in-out;
	-ms-transition: all 0.45s ease-in-out;
	transition: all 0.45s ease-in-out;
}

section div div{
	text-align:center;
}

section:nth-child(odd){
	background-color: #FFFFFF;
}