/* CSS reset */
body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,th,td { 
    margin:0;
    padding:0;
}


* {
  box-sizing: border-box;
}


body {	width: 100%;
  		font-family: Helvetica, sans-serif;  
	}

#maintext 	{
			width: 100%;
			margin: 6em auto 0;
			padding: 1.5em;
			text-align: justify;
			line-height: 1.7em;
			font-size: 1em;
			color: #666;
			}


@media screen and (max-width: 600px)
	{
	#maintext { font-size: 0.9em;
			 line-height: 1.5em;
			margin-top: 8em;
			}
	}


article	{width: 80%; float:left;
		margin: 0 10%; 
		}

.me		{width: 50%;
		float: left;
		padding-right: 1em;
		}

@media screen and (max-width: 992px)
	{
	article	{width: 90%;
			margin: 0 5%;
			}
	}
@media screen and (max-width: 600px)
	{
	article	{hyphens: auto;
			}
	}

.pics	{width: 80%; float: left;
		margin: 0 10% 5em 10%;
		}



.category	{border: solid 2px #888;
			border-radius: 0 0 15px 15px;
			margin-right: 1.5em;
			}

.thanks 
			{font-size: 1.5em; 
			font-family: Times, serif; 
			text-align: center;
			}
	
@media screen and (max-width: 600px)
	{
	.category	{margin:  2% 30%;
				}
	}


@media screen and (max-width: 992px)
	{
	.pics	{width: 90%;
			}

	.thanks {text-align: left;
			}
	}

	 a:link
	{text-decoration: none; color: #000;
	}
	a:visited
	{text-decoration: none; color: #000;
	}
	a:hover
	{text-decoration: underline; color: #666;
	}
	a:active
	{text-decoration: underline; color: #666;
	}

/****PICTURES****/

figure 	{margin: 5px;
		border: solid 1px #ccc;
		float: left;
		width: 180px;
		}

figure:hover
		{
		border: solid 1px #777;
		}

figure img
		{
		width: 100%;
		height: auto;
		}


figcaption 	{padding: 0 2px;
			height: 3em;
			text-align: center;
			font-size: 0.8em;
			line-height: 1em;
			}

/* header */

.header {
 /* background-color: #fff; */
background-image:url("banner2.jpg");
background-size : 100% 100%;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);  position: fixed; top: 0;
  width: 100%; height: 6em;
  z-index: 3;
}

.header ul {
  margin: 0;
  padding-top: 20px;
  list-style: none;
  overflow: hidden;
}

@media screen and (max-width: 992px)
	{
		.header ul 	{width: 100%;
					background-color: #fff;				
					}

	}

.header li a {
  display: block;
  padding: 20px 20px;
 border-radius: 10px;
  text-decoration: none;
  color: #2a2d7e;
}



.header li a:hover,
.header .menu-btn:hover {
  background-color: #eee;
  color: #333;
}

.header .logo {
  display: block; 

  float: left;
  font-size: 2.5em; 
  color: #2a2d7e;
  padding: 30px 10%;
  text-decoration: none; 
}

@media screen and (max-width: 992px)
	{
	.header .logo {
  		display: block; 
  		float: left;
		font-size: 2em;
		padding-left: 8%;
		}

	}

@media screen and (max-width: 600px)
	{
	.header .logo {
					font-size: 1.7em;
					}

	}



/****************** menu ****************/

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: hand;
  display: inline-block; float: right;  
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative; right: 3em;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 20em;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 992px) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }


}





footer
{ position: relative; top: 6em; clear: both;
padding-top: 1em;
border-top: solid 1px #888;
font-family: Verdana, Arial, sans-serif; 
font-size: 1em; text-align: center;
}




	@media screen and (max-width: 992px)
		{
			footer li {margin-top: 1.3em ; }

			footer ul {padding-top: 2em;
					}

		}

	@media screen and (max-width: 600px)
		{	
			footer { font-size: 0.85em;
					}

			footer ul {padding-top: 1em;
					}

			footer li {margin-top: 0.5em; }

		}
	



footer #credit		{position: relative;
				top: 1.5em; 
				padding-bottom: 3em;
				text-align: center;
				font-size: 0.75em;
				}


	@media screen and (max-width: 600px)
		{				
			footer #credit {
						font-size: 0.65em;
						}
		}