@media only screen and (min-width : 320px) {
	.searchLogoButton {
		margin-top:10px;
	}
}
@media only screen and (min-width : 768px) {
	.searchLogoButton {
		margin-top:0;
	}
}

.logoButton {
	/* display: block; */
	/* margin: 2em auto 0; */
	/* padding:1em; */
	padding-left: 1em;
	padding-right: 1em;
	letter-spacing:0.05em;
	background:url(/assets/ecl-polo/images/trailhead_button_images/top-left_button_bg.png) top left no-repeat,
    url(/assets/ecl-polo/images/trailhead_button_images/bottom-right_button_bg.png) bottom right no-repeat;
	background-color:#69A1BF;
	background-size:40%;
	/* width: 5em; */
	text-align:center;

	border-top-left-radius: 20% 45%;
	border-top-right-radius: 30% 40%;
	border-bottom-right-radius: 20% 40%;
	border-bottom-left-radius: 30% 35%;
	color: #fff;
	box-shadow: -0.025em 0.25em 0.5em 0 rgba(0,0,0,0.1), inset 0.025em -0.125em 0.125em 0.075em rgba(0,0,0,0.025);
	
	
	

	transition: background-color 0.5s ease, transform 0.5s ease-in-out;
	/* font: normal normal 700 30px/30px Raleway, Avenir, Helvetica, Arial, sans-serif; */
	font-family: Raleway, Avenir, Helvetica, Arial, sans-serif;
}
.logoButton:hover {
	text-decoration: none;
	color: #fff;
	background-color:#81B1C6;
	transform: scale(1.025);
}
.logoButton:link {
	text-decoration: none;
	color: #fff;
}
.logoButton:active {
	text-decoration: none;
	color: #fff;
	background-color:#69A1BF;
	transform: scale(1);
	transition: background-color 0.05s ease, transform 0.05s ease-in-out;
}
.logoButton:visited {
	text-decoration: none;
	color: #fff;
}
.logoButton div {
	color: #fff;
}

.inactiveLogoButton {
	background-image:url(/assets/ecl-polo/images/trailhead_button_images/top-left_button_inactive_bg.png),
    url(/assets/ecl-polo/images/trailhead_button_images/bottom-right_button_inactive_bg.png);
	background-color:#C7C7C7;
	cursor:default;
	
	border-top-left-radius: 30% 40%;
	border-top-right-radius: 20% 40%;
	border-bottom-right-radius: 30% 35%;
	border-bottom-left-radius: 20% 45%;
	
	transition: background-color 0.5s ease, transform 0.5s ease-in-out;
	
	border-color:#C7C7C7;
}
.inactiveLogoButton:hover {
	text-decoration: none;
	color: #fff;
	transform:scale(1)
}
.outlineLogoButton {
	
	
	/* display: block; */
	/* margin: 2em auto 0; */
	/* padding:1em; */
	padding-left: 1em;
	padding-right: 1em;
	letter-spacing:0.05em;
	background-size:40%;
	/* width: 5em; */
	text-align:center;

	border-top-left-radius: 20% 45%;
	border-top-right-radius: 30% 40%;
	border-bottom-right-radius: 20% 40%;
	border-bottom-left-radius: 30% 35%;
	
	/* font: normal normal 700 30px/30px Raleway, Avenir, Helvetica, Arial, sans-serif; */
	
	
	
	background:none;
	background-color:none;
	box-shadow:none;
	
	transition: color 0.5s ease, border 0.5s ease, transform 0.5s ease-in-out;
	
	border:0.125em solid #69A1BF;
	color:#69A1BF;
}
.outlineLogoButton:hover {
	text-decoration: none;
	transform: scale(1.025);
	border-color:#81B1C6;
	color:#81B1C6;
}
.outlineLogoButton:active {
	transform: scale(1);
	transition: color 0.05s ease, border-color 0.05s ease, transform 0.05s ease-in-out;
	color:#69A1BF;
	border-color:#69A1BF;
}
.outlineLogoButton.inactiveLogoButton {
	border:0.125em solid #C7C7C7;
	color:#C7C7C7;
}