* {margin:0; padding:0; outline: none;}
img {max-width: 100%;}
ul, li {list-style: none;}
.wrapper {clear: both; font-family:arial;}
/* ------------ Start :: Header ----------------- */
.header {clear: both; margin: 0 auto; max-width: 1200px; overflow: hidden; padding: 20px 0;}
.header .logo {float: left; width: auto; display: inline-block; width: 200px;}
.header .menu-items {float: right; width: auto; }
.header .menu-items li { display: inline-block; min-width: 90px; text-align: center; line-height: 36px; padding: 0 5px; font-size: 16px; font-weight: 400; color: #777777;}
.header .menu-items li a {color: #777; text-decoration: none;}
.header .menu-items li a:hover {color: #3e5e71;}

/* ------------ End :: Header ----------------- */
/* ------------ Start :: Banner ----------------- */
.banner {clear: both; background: #3598dc; padding: 100px 0 80px; text-align: center;}
.banner h2 {clear: both; padding: 0 0 16px; font-size: 40px; line-height: 40px; color: #fff; font-weight: normal;}
.banner p {clear: both; padding: 0 0 20px; font-size: 16px; line-height: 26px; color: #fff;}
.banner a {display: inline-block; clear: both; text-align: center; background-color: #fff; color: #3598dc; padding: 10px 20px; text-decoration: none; font-weight: bold;}
.banner a:hover {background-color: #33445d; color: #d9eaf5;}
/* ------------ End :: Banner ----------------- */
/* ------------ Start :: Body Content ----------------- */
.bodyContent {clear: both; padding: 30px 0 0; margin: 0 auto; max-width: 1200px; text-align: center; overflow: hidden;}
.boxContent {width: 31.3%; margin: 0 1%; float: left; padding: 15px; box-sizing: border-box; background: #f7f7f7; border:1px solid #e5e7ea;}
.boxContent img { display: block; margin: 0 auto 15px; clear: both;}
.boxContent h3 { font-size: 22px; font-weight:300; clear: both; color: #333; line-height: 30px; padding: 0 0 12px;}
.boxContent a {display: inline-block; clear: both; text-align: center; background-color: #d5dce2; color: #475d6d; padding: 10px 20px; text-decoration: none; font-weight: bold;}
.boxContent a:hover {background-color: #33445d; color: #d9eaf5;}
.boxContent p {clear: both; padding: 0 0 20px; font-size: 14px; line-height: 24px; color: #555; min-height: 144px;}
/* ------------ End :: Body Content ----------------- */
/* ------------ Start :: Footer ----------------- */
.footer {clear: both; max-width: 1200px; overflow: hidden; padding: 20px 0; margin: 30px auto 0; border-top:1px solid #e5e7ea; color: #777777; }
.footer ul {float: left; width: auto; }
.footer ul li { display: inline-block; min-width: 90px; text-align: center; line-height: 18px; padding: 0 5px; font-size: 11px; font-weight: 300; color: #777777;}
.footer ul li a {color: #777; text-decoration: none;font-size: 13px;}
.footer ul li a:hover {color: #777;text-decoration:underline;font-size: 13px;}
.footer p {float: right; width: auto; line-height: 18px; font-size: 13px; color: #777;}
/* ------------ End :: Footer ----------------- */
@media only screen and (max-width: 760px) {
.boxContent {width: 98%; margin: 0 1% 30px; float: none; clear: both;}
.header .logo {float: none; width: 280px; display:block; margin: 0 auto; clear: both;}
.header .menu-items {float: none; clear: both; width: 100%; margin:20px 0 0; text-align: center;}
.header .menu-items li { min-width: auto; display: inline-block; width: auto; text-align: center; line-height: 36px; padding: 0 5px; font-size: 16px; font-weight: 400; color: #777777;}
.header .menu-items li a {color: #777; text-decoration: none;}
.footer ul {float: none; clear: both; width: 100%; text-align: center;}
.footer ul li { display: inline-block; text-align: center; line-height: 18px; padding: 0 5px; min-width: auto;}
.footer ul li a {color: #777; text-decoration: none;}
.footer p {float: none; width: 100%; line-height: 18px; font-size: 12px; text-align: center; color: #777;}
}