@charset "utf-8";
/* CSS Document 


.box-1 {
	display:block;
	max-width: 900px;
	max-height:120px;
	padding: 0;
	position: absolute;
	bottom: 0px;
	right: 0%;
	overflow: hidden;
	z-index:1100;
	
}
*/

.topbtn {display:none;}


/* Start of slide-out-side menu */
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1015;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

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

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

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

.openbtn {
  position: absolute;
  font-size: 15px;
  cursor: pointer;
  background-color: #636;
  color: white;
  padding: 5px 10px;
  border: none;
  left: 5px;
  bottom: 10px;
  width:100px;
  z-index: 1015;
  
}

.openbtn:hover {
  background-color: #444;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

.top1 {
  position:absolute;
  top:5px;
  text-align:center;
  width:100%;
  font-size: 15px;
  color:white;
  z-index: 6;
  max-width:100%;
  margin:0 auto;
  
} 




.top2 {
  
  position: absolute;
  top:25px;
  text-align:center;
  font-size: 12px;
  color:white;
  width:100%;
  z-index: 5;
 
	}
	



.top1 h1 {font-family:Verdana, Geneva, sans-serif; font-size:0.85em; color:#FFF;}
.top2 h2 {font-family:Verdana, Geneva, sans-serif; font-size:0.75em; color:#FFF;}

.top1 a:link {text-decoration: none; display:inline-block;color:#FFF;}
.top1 a:visited {text-decoration: none;color:#FFF;}
.top1 a:hover {text-decoration: underline; color:#FFF;}
.top1 a:active {text-decoration: none;color:#FFF;}

.top2 a:link {text-decoration: none; display:inline-block;color:#FFF;}
.top2 a:visited {text-decoration: none;color:#FFF;}
.top2 a:hover {text-decoration: underline; color:#FFF;}
.top2 a:active {text-decoration: none;color:#FFF;}

.top2 p {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:14px; color:#FFF; text-align:center; padding:10px;}

/* end of slide-out-side menu end */

@media screen and (min-width: 400px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
  
 
}



@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
   
}


@media only screen and (min-width:1200px) {

.topbtn {
  display:block;
  font-size: 22px;
  cursor: pointer;
  background-color: #F00;
  color: white;
  padding: 10px 25px 10px 25px;
  border: none;
  position: fixed;
  right: 260px;
  top: 0px;
  z-index: 10;
  border: #000 thin solid;
  border-top:none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius:0px 0px 8px 8px;

  
}

.topbtn:hover {
  background-color: #444;
}

.topbtn a:link {text-decoration: none; display:inline-block;color:#FFF;}
.topbtn a:visited {text-decoration: none;color:#FFF;}
.topbtn a:hover {text-decoration: none;color:#FFF;}
.topbtn a:active {text-decoration: none;color:#FFF;}

.openbtn {
  position: absolute;
  font-size: 20px;
  cursor: pointer;
  background-color: #636;
  color: white;
  padding: 5px 10px;
  border: none;
  left: 5px;
  bottom: 10px;
  width:100px;
  z-index: 1015;
  
}

.top1 {
  position:absolute;
  top:5px;
  text-align:center;
  width:100%;
  font-size: 15px;
  color:white;
  z-index: 6;
  max-width:100%;
  margin:0 auto;
  
} 


.top2 {
  
  position: absolute;
  top:35px;
  text-align:center;
  font-size: 12px;
  color:white;
  width:100%;
  z-index: 5;
 
	}


.top1 h1 {font-family:Verdana, Geneva, sans-serif; color:#FFF;}
.top2 h2 {font-family:Verdana, Geneva, sans-serif; color:#FFF;}
	
.top1 a:link {text-decoration: none; display:inline-block;color:#FFF;}
.top1 a:visited {text-decoration: none;color:#FFF;}
.top1 a:hover {text-decoration: underline; color:#FFF;}
.top1 a:active {text-decoration: none;color:#FFF;}

.top2 a:link {text-decoration: none; display:inline-block;color:#FFF;}
.top2 a:visited {text-decoration: none;color:#FFF;}
.top2 a:hover {text-decoration: underline; color:#FFF;}
.top2 a:active {text-decoration: none;color:#FFF;}

	.box-1-small {
	display:none;
	
	}

.box-1 {
	display:block;
	width: 800px;
	height:90px;
	padding: 0;
	position: absolute;
	bottom: 0px;
	left: 20%;
	overflow: hidden;
	z-index:20;
	
	
}

}


@media only screen and (min-width:1500px) {
	
	.box-1 {
	display:block;
	width: 1000px;
	height:90px;
	padding: 5px;
	position: absolute;
	bottom: 0px;
	left: 30%;
	overflow: hidden;
	z-index:20;
	
	
}

}