/*_________________________*/ 
	 /*large settings defaults*/

html {
  scroll-behavior:smooth;
}
body{
	font-family: 'Muli', sans-serif;
	color:black;
	font-size:20pt;
	text-color:black;
	line-height:28pt;
	margin:3%;
}
html, body {
  height: 100%;
  margin: 0;
}
img{
	max-width:100%;
}

.outline{
	border:1px solid lightgrey;
}
/*_________________________*/ 
   /*responsive defaults*/

.grip-wrapper{
	margin:5%;
	min-height:100%;
}

.arrow{
	position:fixed;
	bottom:2%;
	right:2%;
	width:100px;
}


/*_________________________*/ 
   /*navigation*/

   
   
   
   
/*

nav{
	display:none;
	background-color:#a5abea;
	height:100%;
	position:fixed;
	right:0;
	width:50%;
}
nav>ul>li{
	margin-bottom:20%;
}

.hamburger{
  background:none;
  position:absolute;
  top:3%;
  right:3%;
  line-height:45px;
  padding:5px 15px 0px 15px;
  color:#999;
  border:0;
  font-size:3em;
  font-weight:bold;
  cursor:pointer;
  outline:none;
  z-index:10000000000000;

}

.enhanced #menu {
    display: none;
}
.main-nav {
  z-index: 150;
}
*/

/*_________________________*/ 
	 /*images*/
.thumbnail{
	width:100%;
}

.zoom:hover{
	 transform: scale(2.2);
}

/*_________________________*/ 
	 /*Typeography*/
	 .name{
		 font-size:45pt;
		 line-height:50pt;
	 }

h1{
	text-size:36pt;
	padding-left:10%;
	font-family: 'Spirax', cursive;
}
/*_________________________*/ /*_________________________*/ /*_________________________*/ 
@media (max-width:1000px){
	
   
	/* Important styles */
	
	
	/*Hamburger*/
	#toggle {
	  display: block;
	  /*hamburger container*/
	  width: 20%;
	  height: 50px;
	  margin: 50px auto 10px;
	}
	/*middle hamburger bar*/
	#toggle span:after,
	#toggle span:before {
	  content: "";
	  position: absolute;
	  left: 0;
	  top: -20px;
	}
	/*bottom hamburger bar*/
	#toggle span:after{
	  top: 20px;
	}
	#toggle span {
	  position: relative;
	  display: block;
	}

	#toggle span,
	#toggle span:after,
	#toggle span:before {
	  width: 100%;
	  height: 8px;
	  background-color: black;
	  transition: all 0.3s;
	  backface-visibility: hidden;
	  border-radius: 6px;
	}

	/* on activation */
	#toggle.on span {
	  background-color: transparent;
	}
	#toggle.on span:before {
	  transform: rotate(45deg) translate(5px, 5px);
	}
	#toggle.on span:after {
	  transform: rotate(-45deg) translate(7px, -8px);
	}
	#toggle.on + #menu {
	  opacity: 1;
	  visibility: visible;
	}

	/* menu appearance*/
	
	
	/*Menu Open*/
	#menu {
	
	  color: #999;
	  width: 100%;
	  padding: 10px;
	  padding-left:5%;
	  background: #5806aa;
	  box-shadow: 0 1px 8px rgba(0,0,0,0.05);
	  /* just for this demo */
	  opacity: 0;
	  visibility: hidden;
	  transition: opacity .4s;
	}
	
	ul, li, li a {
	  
	  display: block;
	  margin: 0;
	  padding: 2%;
	}
	li a {
	  padding: 5px;
	}
	


	/*Text Color*/

	#menu a:active{
		background-color:green;
	}

	h1 a:visited{
		color:black;
	}

	h1 a:link{
		color:black;
	}
	#menu a:visited{
		color:white;
	}

	#menu a:link{
		color:white;
	}


}

/*_________________________*//*_________________________*//*_________________________*//*_________________________*/
@media (min-width:600px){
	
	
	.name{
		font-size:60pt;
	}

}/*_________________________*/ /*_________________________*//*_________________________*//*_________________________*/  /*end of 600px*/



@media (min-width:1000px){
	/*_________________________*/ 
		/*skroller*/
	
	
  	 .bubble{border-radius:50%;
  		 background-color:green;
  		 width:300px;
  		 height:300px;
		 position:fixed;
	 }
	 
	 /*_________________________*/ 
		 /*Typeography*/
		 body{
			 font-size:15pt;
		 }
	
	p{
		width:75%;
	}
	
	/*_________________________*/ 
		 /*images*/
	.thumbnail{
		width:70%;
	}

	.zoom:hover{
		 transform: scale(2.2);
	}
	/*_________________________*/ 
		/*responsive nav*/
	

	nav>ul>li{
		margin-bottom:40%;
	}
	nav{
		display:block;
		position:static;
	}
	header>div{
		position:block;
	}
	
	.arrow{
		display:none;
	}

	/*_________________________*/ 
		/*inner nav*/
	.inner-nav>li{
		display:inline;
		margin-right:5%;
		padding:0 2% 0 2% ;
		border-right:solid 1px black;
		border-left:solid 1px black;
	}
	.inner-nav{
		margin-bottom:15%;
	}
	.current-page {
		background-color:rgb(42, 124, 32);
		
		
	}

	.current-page a{
		color:white;
		width:10%;
	}
	
	
	/*_________________________*/ 
		/*grid*/
	header>div{
		position:fixed;
	}
	.grid-wrapper{
		display:grid;
		grid-template-columns: 20% 80%;
		grid-gap:2%;
	
	}
	.grid-3{
		display:grid;
		grid-template-columns: 32% 32% 32%;
		grid-gap:1%;
		margin-right:15%;
	}
	.grid-2{
		display:grid;
		grid-template-columns: 50% 50%;
		grid-gap:1%;
	
	}
	
	
	/*_________________________*/ 
		/*header*/
	header{
		background-color:#5806aa;
	}
	

	
	/*_________________________*/ 
		/*responsive links*/


	header a:visited{
		color:white;
	}

	header a:link{
		color:white;
	}
	header a:hover{
		color:rgb(42, 124, 32);
	}
	
} /*_________________________*/ /*_________________________*//*_________________________*//*_________________________*/  /*end of 1000px*/



/*_________________________*/ 
/*footer*/
.footer-back{
	background-color:lightgrey;
}
h4{
	font-size:24;
}
footer{
	padding:2.5%;
	   bottom:0;
	   width:100%;
	   height:20%;   /* Height of the footer */
	   margin:5% 0  0 7% ;
}
.social{
	
	padding:1%;
	 height:50px; 
	 width:50px;
}
.social>img{

	display:inline;
	
}
/*_________________________*/ 
/*links*/



header a:hover{
	color:rgb(42, 124, 32);
}

.inner-nav a:hover{
	color:lightgreen;
}
.inner-nav a:visited{
	color:#5f0ab5;
}

a{
	text-decoration:none;
	color:#5f0ab5;

}
a:hover {
    color: rgb(42, 124, 32);
}
a:visited{
	color:grey;
}

ul{
	list-style:none;
}