html {
    min-height: 100%;
    position: relative;
}

body {
   font-family: 'Lato', sans-serif;
    font-weight: 400;
    height: 100%;
    background-color: #fff;
    color: #333333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    margin: 0;
    line-height: 28px;
    word-wrap: break-word;
}
a { text-decoration: none; color: #d90200; outline: none;}
a:hover {color: #d90200; }
img { max-width: 100%; }

.header { display: inline-block; width: 100%; float: left; margin: 0; padding: 0;}
.wrap { max-width: 1366px; margin: 0 auto; }
.logo { width: 20%; float: left; padding: 10px 0; }
.header-right { width: 75%; float: right; text-align: right; padding-top: 10px;}
.header-top-info ul {list-style: none; margin: 0; padding: 0; display: inline-block; width: 100%;}
.header-top-info ul li {list-style: none; margin: 0 0 0 15px; padding: 0; display: inline-block; background-repeat: no-repeat; line-height: 29px; font-weight: 600; font-size: 17px;}
.header-top-info ul li.email { background-image: url(../images/email-icon.png); padding-left: 37px; background-position: 0 3px}
.header-top-info ul li.phone { background-image: url(../images/phone-icon.png); padding-left: 32px}
.header-top-info ul li a { color: #353132; text-decoration: none;}

.navigation { display: inline-block; float: right; width: 100%; margin: 35px 0 0 0; padding: 0; }
.navigation ul { margin: 0; padding: 0; display: inline-block; float: right; width: 100%; list-style: none;}
.navigation ul li { margin: 0 0 0 25px; padding: 0; display: inline-block; list-style: none;}
.navigation ul li a { font-size: 18px; font-weight: 600; color: #353132; text-decoration: none; font-family: 'Roboto', sans-serif; text-transform: uppercase;}
.navigation ul li:hover a { color: #d90200; }

.hero-banner-section { background: url(../images/banner-bg.jpg) no-repeat; background-size: cover; clear: both; float: left; width: 100%; padding: 60px 0;}
.content-area { max-width: 75%; margin: 0 auto }
.hero-banner-section h1 { font-size: 36px; text-transform: uppercase; color: #fff; font-weight: bold; font-family: 'Oswald', sans-serif; line-height: 55px; margin: 0px 0 10px 0;}
.hero-banner-section label { display: block; width: 100%; font-family: 'Lato', sans-serif; text-transform: initial;}
.hero-banner-section span { color: #ffea92; }

.hero-banner-section h2 { font-size: 30px; color: #fff; line-height: 55px; font-weight: bold; width: 63%; float: right; margin: 0;}
.hero-banner-section h2 label { text-transform: uppercase; }

.welcome-section {display: inline-block; clear: both; width: 100%; margin: 60px 0 50px 0;}
h3 { font-size: 30px; color: #353132; text-transform: uppercase; font-family: 'Oswald', sans-serif;  font-weight: bold; margin-bottom: 25px;}

.gray-background { background: #f2f2f2; padding: 50px 0;}
.padding-t-b {padding: 50px 0;}
h4 { color: #000; font-weight: bold; font-size: 35px; text-align: center; margin-bottom: 35px; }

.custom-table th{ width: 20%; font-size: 17px; font-weight: 600; text-align: center; vertical-align: middle;}
.custom-table td{text-align: center; vertical-align: middle;}
.custom-table th:first-child, .custom-table td:first-child{text-align: left;}
.custom-table th.red{ background-color: #9b2b29; color: #fff;}
.custom-table th.yello{ background-color: #fbe070; color: #333333;}

.custom-table.table-striped tbody tr { background-color: #d3d3d3 }
.custom-table.table-striped tbody tr:nth-of-type(2n+1) { background-color: #fff;}

.bottom-content-area { background-color: #f2f2f2; text-align: center; position: relative; margin-top: 90px;}
.bottom-content-area p { margin: 0; color: #333333; font-size: 18px; font-weight: bold; padding: 25px; }
.bottom-content-area img { margin-top: -63px; }

p:last-child {margin-bottom: 0px;}

footer { color: #d3d3d3; font-size: 15px; text-align: center; background-color: #464646; padding: 20px 0; margin-top: 30px;}
footer a { color: #d3d3d3; }

.toggle-menu { width: 25px; float: right; cursor: pointer; display: none;}
.toggle-menu span { background: #000; height: 2px; width: 100%; display: inline-block; float: right; margin: 2px 0; cursor: pointer; }
.close-btn { display: none; }

@media only screen and (min-width: 200px) and (max-width: 1385px) {
	body { font-size: 14px; }
	.wrap {max-width: 93%;}
	.navigation ul li a { font-size: 15px; }
	.header-top-info ul li { font-size: 15px; }
	h3 { font-size: 25px;}
	h4 { font-size: 30px;}
	.custom-table th, .bottom-content-area p { font-size: 15px; }
	footer { font-size: 13px; }
	.content-area { max-width: 100%; }

	@media only screen and (max-width: 1200px) {
		.navigation ul li a {font-size: 14px;}
		.navigation ul li { margin-left: 15px; }
		.hero-banner-section h1 { font-size: 30px; line-height: 45px; }
		.hero-banner-section h2 { font-size: 25px; line-height: 45px; }
	}
	@media only screen and (max-width: 1100px) {
		.navigation .menu { display: none; }
		.menu.open-menu {display: block;position: absolute; width: 100%; left: 0; top: 0; background: rgba(255,255,255,0.9); padding: 40px 0; text-align: center;
box-sizing: border-box; height: 100vh; position: fixed; z-index: 999999;}
		.menu.open-menu ul li { width: 100%; margin: 0 0 30px 0;}
		.navigation ul li a {font-size: 18px;}
		.close-btn {background: #000;display: inline-block;color: #fff;padding: 5px 11px;font-size: 25px;font-weight: bold;float: right;cursor: pointer;margin-right: 33px;}
		.toggle-menu, .close-btn { display: inline-block; }
	}
	@media only screen and (max-width: 900px) {
		h3 {font-size: 20px;}
		h4 {font-size: 25px;}
		.bottom-section .col-md-4 { width: 100%; max-width: 100%; flex:inherit; margin-bottom: 25px; }
		.bottom-section .col-md-4:last-child { margin-bottom: 0px; }
		.navigation { margin-top: 23px; }
	}
	@media only screen and (max-width: 767px) {
		.header-right { padding: 10px 0; }
		.navigation {margin-top: 15px;}
		.logo {width: 23%;}
		.hero-banner-section h2 { width: 100%; }
		.col-md-4.author_img { margin-bottom: 40px;}
	}
	@media only screen and (max-width: 660px) {
		.custom-table th, .bottom-content-area p { font-size: 13px; line-height: 18px;}
		.table td, .table th { padding: 5px}
		.custom-table td{font-size: 10px; line-height: 15px;}
		.custom-table td img { max-width: 9px; height: auto;}
		.custom-table td a img{max-width: 50%;}
		#wcbtpa { padding-top: 0px;}
	}
	@media only screen and (max-width: 640px) {
		.hero-banner-section h2 { width: 100%;}
		h4 {font-size: 20px;}
		.hero-banner-section h1 {font-size: 25px;line-height: 40px;}
		.hero-banner-section h2 {font-size: 20px; line-height: 35px;}
		body{overflow-x: hidden;}
	}
	@media only screen and (max-width: 580px) {
		.logo {width: 30%; margin: 0 auto; float: none;}
		.header-right {padding: 10px 0;width: 100%; text-align: center;}
		.toggle-menu {display: inline-block;position: absolute; right: 32px; top: 32px;}
		.close-btn {margin-right: 25px;}
		.menu.open-menu { padding: 33px 0; }
		.custom-table th, .bottom-content-area p { font-size: 9px; line-height: 13px;}
		.custom-table td {font-size: 7px; line-height: 12px;}
		.navigation { margin-top: 0;}
		
	}
	@media only screen and (max-width: 410px) {
		.header-top-info ul li {font-size: 13px;}
		.toggle-menu { top: 22px; }
		.menu.open-menu {padding: 22px 0;}
		.navigation ul li a {font-size: 14px;}
		table{hyphens: auto;}
	}
}