/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------
:: Shared Styles
:: Index Page
:: Media Query
*/


/* -----------------------------------------
   Shared Styles
----------------------------------------- */
a {
	color: #8E8E8E;
}

a:hover {
	color: #fff;
}

.side-nav li a {
	color: #8E8E8E;
	margin-bottom: 1.5em;
	word-wrap:break-word;
}

.side-nav li a:hover {
	color: #fff;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Segoe UI", Arial, Helvetical, sans-serif;
	color: #fff;
	font-weight: normal;
}

p {
	font-family: "Segoe UI", Arial, Helvetical, sans-serif;
	color: #ddd;
	font-size: 0.9em;
}

.content_style {
	padding: 5px 20px 1px 20px;
}

.content_margin_top {
	margin-top: 1em;
}

.content_margin_right {
	margin-right: 1em;
}

.content_margin_bottom {
	margin-bottom: 1em;
}

.content_padding_top {
	padding-top: 1em;
}

.content_padding_bottom {
	padding-bottom: 1em;
}

.left {
	float: left;
}

.right {
	float: right;
}

.blue {
	color: #3A53A5;	
}

.white {
	color: #fff;
}

.bg_gray {
	background-color: #1A1A1A;
}

.bg_gray_2 {
	/* fallback/image non-cover color */
	background-color: #1A1A1A; 
	
	/* Safari 4+, Chrome 1-9 */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1A1A1A), to(#000000));
	
	/* Safari 5.1+, Mobile Safari, Chrome 10+ */
	background-image: -webkit-linear-gradient(top, #1A1A1A, #000000); 
	
	/* Firefox 3.6+ */
	background-image: -moz-linear-gradient(top, #1A1A1A, #000000);
	
	/* IE 10+ */
	background-image: -ms-linear-gradient(top, #1A1A1A, #000000);
	
	/* Opera 11.10+ */
	background-image: -o-linear-gradient(top, #1A1A1A, #000000);
}

.bg_purple {
	background-color: #755D88;
}

.bg_red {
	background-color: #ED1C24;
}

.bg_green {
	background-color: #2FAB73;
}

.bg_light_blue {
	background-color: #3BA4D7;
}

.bg_dark_blue {
	background-color: #191D6F;
}

.bg_pink {
	background-color: #E7005F;
}

.align_center {
	margin-left: auto;
	margin-right: auto;
}

.align_content_center {
	text-align: center;
}
 
.clear {
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* -----------------------------------------
   Index Page
----------------------------------------- */


.footer {
	font-size: 0.8em;
	font-weight: lighter;
	color: #FFF;
	background: #333;
	padding: 20px 0px 10px 0px;
}

.top-bar-section ul li a div p {
	color: #FFF;
}

.top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
	border-right: solid 2px #2b2b2b;
	border-left: solid 2px black;
	border-color: #000000;
}

.top-bar-section li a:not(.button) {
	padding: 5px 0px;
}

.red_btn, .orange_btn, .green_btn, .blue_btn {
	width: 24.692%;
}

.red_btn a:hover(.button) {
	opacity: 50%;
}

.red_btn a:not(.button) {
	background-color: #ED1C24;
}

.orange_btn a:not(.button) {
	background-color: #F26922;
}

.green_btn a:not(.button) {
	background-color: #17A64A;
}

.blue_btn a:not(.button) {
	background-color: #3A53A5;
}

.nav_warp {
	width: 100%;
	background-color: #000000;
}

.top-bar-section ul li > a {
	background-color: #000000;
}

.top-bar-section ul {
	background-color: #000000;
}

.top-bar {
	background-color: #000000;
}

.main_logo {
	margin: 20px 0px;
}

/* -----------------------------------------
   Media Query
----------------------------------------- */
@media only screen and (max-width: 1024px) {
	.nav_warp {
		width: 100%;
		background-color: #000000;
	}
}

@media only screen and (max-width: 1015px) {
	.red_btn, .orange_btn, .green_btn, .blue_btn {
		width: 24.66%;
	}
}

@media only screen and (max-width: 940px) {
	.top-bar {
		background-color: #000000;
	}
}

@media only screen and (max-width: 939px) {
	.red_btn, .orange_btn, .green_btn, .blue_btn {
		width: 100%;
	}
}

@media only screen and (max-width: 768px) {
	.top-bar {
		background-color: #000000;
	}
}

@media only screen and (max-width: 640px) {
	.top-bar {
		background-color: #000000;
	}
	.red_btn a div img, .orange_btn a div img, .green_btn a div img, .blue_btn a div img {
		display: none;
	}
	.content_style {
	padding: 5px 10px 1px 10px;
	}
}