@media only screen and (max-width: 1024px) {
h1 { font-size: 32px !important; }
}
/* footer */
	.footer #button{
		width:35px;
		height:35px;
		border: #727172 12px solid;
		opacity: .8;
		border-radius:35px;
		margin:0 auto;
		position:relative;
		-webkit-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    -o-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	    transition: all 1s ease;
	}
	.footer #button:hover{
		width:20px;
		height:20px;
		border: #3A3A3A 12px solid;
		-webkit-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    -o-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	    transition: all 1s ease;
		position:relative;
	}
	.footer {
		font-size: 19px;
		
		bottom:0;
		left:0;
		position:fixed;
	    width: 100%;
	    height: 2em;
	    overflow:hidden;
	    margin:0 auto;
		-webkit-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    -o-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	    transition: all 1s ease;
		z-index:999;
	}
	.footer:hover {
		-webkit-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    -o-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	    transition: all 1s ease;
		height: 10em;
	}
	.footer #container{
		margin-top:5px;
		width:100%;
		min-width: 400px;
	height:100%;
	  position:relative;
	  top:0;
	  left:0;
		background: #3A3A3A;
	}
	.footer #cont{
	  position:relative;
	  top:-45px;
	  right:190px;
		width:150px;
		height:auto;
		margin:0 auto;
	}
	.footer_center{
		width:500px;
		float:left;
	  text-align:center;
	}
	.footer {
		  text-align: center;
		  color: #6495ED;
		  font-family: Menlo, monospace;
		}
		.footer a{
		  text-align: center;
		  color: #6495ED;
		  font-family: Menlo, monospace;
		}
		.footer a:hover {
			color: #FFF;
		}


/*sidebar*/
	.sidebar {
	  height: 100%;
	  width: 0;
	  position: fixed;
	  z-index: 3;
	  top: 0;
	  left: 0;
	  background-color: #121212;
	  overflow-x: hidden;
	  transition: 0.5s;
	  padding-top: 60px;
	}

	.sidebar a {
	  padding: 8px 8px 8px 32px;
	  text-decoration: none;
	  font-size: 25px;
	  color: #6495ED;
	  display: block;
	  transition: 0.3s;
	}

	.sidebar a:hover {
	  color: #f1f1f1;
	}

	.sidebar .closebtn {
	  position: absolute;
	  top: 0;
	  right: 25px;
	  font-size: 36px;
	  margin-left: 50px;
	}

	.openbtn {
	  font-size: 20px;
	  float: left;
	  cursor: pointer;
	  background-color: #6495ED;
	  color: white;
	  padding: 10px 15px;
	  border: none;
	}

	.openbtn:hover {
	  background-color: #444;
	}
/*header*/
	.header {
		position: sticky;
		top: 0;
		width:  100% ;
		z-index: 3;
		padding-top: 10px;
	 	text-align: center;
	  	background: #121212;
	}
	.header a:hover {
		color: #F1F1F1;
		opacity: .5;
	}
/* main */
	body{

		  font-family: "Sawarabi Mincho", "Helvetica Neue", Helvetica, sans-serif;
		  color:#f1f1f1;
		  background-color: #121212;
		  line-height:1.6;
		}


		.flex-container {
  	display: flex;
  	flex-wrap:wrap;
    flex-direction: row;
}

	#showcase{
	  background-image:url('../PICS/background.jpg'); 
	  background-size:cover;
	  background-position:center;
	  height:1500px;
	  display:block;
	  flex-direction:column;
	  justify-content:center;
	  align-items:center;
	  text-align:center;
	  padding:0 20px;

	}

	#showcase h1{
	  font-size:50px;
	  line-height:1.2;
	}

	#showcase p{
	  font-size:20px;

	}

	#showcase .button{
	  font-size:18px;
	  text-decoration:none;
	  color:#6495ED;
	  border:#6495ED 1px solid;
	  padding:10px 20px;
	  border-radius:10px;
	  margin-top:20px;
	}

	#showcase .button:hover{
	  background:#6495ED;
	  color:#fff;
	}
	#showcase .button:active{
	  background:#6495ED;
	  color:#fff;
	}

	#section-a{
	  padding:20px;
	  background:#121212;
	  color:#fff;
	  text-align:left;
	  opacity: .8;
	  text-indent: 20px;
	}
	.about {
			background-color: #292929;

		}

		.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}
.column {
  flex: 45%;
  max-width: 45%;
  padding: 10px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}
@media (max-width: 1000px) {

    .column { flex: 100%; max-width: 100%;}
}