/* Style The Dropdown Button */
.btn {
    background-color: #a3b8ed;
    font-weight: bold;
    color: black;
    padding: .5em;
    padding-left: 2em;
    margin-left:2em;
    width:6em;
    font-size: 14px;
    border: none;
    cursor: pointer;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

/* Change the background color of the dropdown button when the dropdown content is shown */
.btn:hover .btn {
    background-color: #ccd8ff;
}

/* Button 1 */

a.button1{
	display:inline-block;
	padding:0.35em 1.2em;
	border:0.1em solid #FFFFFF;
	margin:0 0.3em 0.3em 0;
	border-radius:0.12em;
	box-sizing: border-box;
	text-decoration:none;
	font-family:'Roboto',sans-serif;
	font-weight:300;
	color:#FFFFFF;
	text-align:center;
	transition: all 0.2s;
}
a.button1:hover{
	color:#000000;
	background-color:#FFFFFF;
}
@media all and (max-width:30em){
 a.button1{
	display:block;
	margin:0.4em auto;
	}
}

/* Button #2 
*/


a.button2{
	display:inline-block;
	padding:0.5em 3em;
	border:0.16em solid #FFFFFF;
	margin:0 0.3em 0.3em 0;
	box-sizing: border-box;
	text-decoration:none;
	text-transform:uppercase;
	font-family:'Roboto',sans-serif;
	font-weight:400;
	color:#FFFFFF;
	text-align:center;
	-webkit-transition: all 0.15s; /* Safari */
	transition: all 0.15s;
}
a.button2:hover{
	color:#DDDDDD;
	border-color:#DDDDDD;
}
a.button2:active{
	color:#BBBBBB;
	border-color:#BBBBBB;
}
@media all and (max-width:30em){
 a.button2{
	display:block;
	margin:0.4em auto;
	}
}

/* Button #3
*/

a.button3{
	display:inline-block;
	padding:0.3em 1.2em;
	margin:0 0.3em 0.3em 0;
	border-radius:2em;
	box-sizing: border-box;
	text-decoration:none;
	font-family:'Roboto',sans-serif;
	font-weight:300;
	color:#FFFFFF;
	background-color:#4eb5f1;
	text-align:center;
	transition: all 0.2s;
}
a.button3:hover{
	background-color:#4095c6;
}
@media all and (max-width:30em){
 a.button3{
	display:block;
	margin:0.2em auto;
	}
}

/* Button #4 
*/

a.button4{
	display:inline-block;
	padding:0.3em 1.2em;
	margin:0 0.1em 0.1em 0;
	border:0.16em solid rgba(255,255,255,0);
	border-radius:2em;
	box-sizing: border-box;
	text-decoration:none;
	font-family:'Roboto',sans-serif;
	font-weight:300;
	color:#FFFFFF;
	text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
	text-align:center;
	transition: all 0.2s;
}
a.button4:hover{
	border-color: rgba(255,255,255,1);
}
@media all and (max-width:30em){
 a.button4{
	display:block;
	margin:0.2em auto;
	}
}

/* Button #5
*/

a.button5{
	display:inline-block;
	padding:0.46em 1.6em;
	border:0.1em solid #000000;
	margin:0 0.2em 0.2em 0;
	border-radius:0.12em;
	box-sizing: border-box;
	text-decoration:none;
	font-family:'Roboto',sans-serif;
	font-weight:300;
	color:#000000;
	text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
	background-color:#FFFFFF;
	text-align:center;
	transition: all 0.15s;
}
a.button5:hover{
	text-shadow: 0 0 2em rgba(255,255,255,1);
	color:#FFFFFF;
	border-color:#FFFFFF;
}
@media all and (max-width:30em){
 a.button5{
	display:block;
	margin:0.4em auto;
	}
}

/* Button #6
*/
a.button6{
	display:inline-block;
	padding:0.7em 1.4em;
	margin:0 0.3em 0.3em 0;
	border-radius:0.15em;
	box-sizing: border-box;
	text-decoration:none;
	font-family:'Roboto',sans-serif;
	text-transform:uppercase;
	font-weight:400;
	color:#FFFFFF;
	background-color:#3369ff;
	box-shadow:inset 0 -0.6em 0 -0.35em rgba(0,0,0,0.17);
	text-align:center;
	position:relative;
}
a.button6:active{
	top:0.1em;
}
@media all and (max-width:30em){
 a.button6{
	display:block;
	margin:0.4em auto;
	}
}

/* Button #7 
*/
a.button7{
	display:inline-block;
	padding:0.7em 1.7em;
	margin:0 0.3em 0.3em 0;
	border-radius:0.2em;
	box-sizing: border-box;
	text-decoration:none;
	font-family:'Roboto',sans-serif;
	font-weight:400;
	color:#FFFFFF;
	background-color:#3369ff;
	box-shadow:inset 0 -0.6em 1em -0.35em rgba(0,0,0,0.17),inset 0 0.6em 2em -0.3em rgba(255,255,255,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
	text-align:center;
	position:relative;
}
a.button7:active{
	box-shadow:inset 0 0.6em 2em -0.3em rgba(0,0,0,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
}
@media all and (max-width:30em){
 a.button7{
	display:block;
	margin:0.4em auto;
	}
}


/* Button #8 
*/
a.button8{
	display:inline-block;
	padding:0.2em 1.45em;
	margin:0.1em;
	border:0.15em solid #CCCCCC;
	box-sizing: border-box;
	text-decoration:none;
	font-family:'Segoe UI','Roboto',sans-serif;
	font-weight:400;
	color:#000000;
	background-color:#CCCCCC;
	text-align:center;
	position:relative;
}
a.button8:hover{
	border-color:#7a7a7a;
}
a.button8:active{
	background-color:#999999;
}
@media all and (max-width:30em){
 a.button8{
	display:block;
	margin:0.2em auto;
	}
}

/* Animated Buttons #9 

Requires this in HTML:

<a href="something" class="button1 bouncy">Facebark</a>
<a href="something" class="button1 bouncy" style="animation-delay:0.07s">SJWHub</a>
<a href="something" class="button1 bouncy" style="animation-delay:0.14s">Plebbit</a>
<a href="something" class="button1 bouncy" style="animation-delay:0.21s">4chin</a>

*/
.bouncy{
	animation:bouncy 5s infinite linear;
	position:relative;
}
@keyframes bouncy {
	0%{top:0em}
	40%{top:0em}
	43%{top:-0.9em}
	46%{top:0em}
	48%{top:-0.4em}
	50%{top:0em}
	100%{top:0em;}
}