@charset "UTF-8";
/* CSS Document */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; outline: none; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
* { outline: none; }
a { text-decoration: none; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

html { font-size: 62.5%; height: auto; -webkit-text-size-adjust: 100%; }
body { min-height: 100%; font-family: 'Open Sans', sans-serif; background: #fff; position: relative; }
section, footer { width: 100%; }
.inner { width: 100%; max-width: 1280px; padding: 0 15px; margin: 0 auto; }
.pad { padding: 0 30px!important; }

/* Headers */
header { float: left; width: 100%; padding: 0 15px; }
h1, h2, h3 { text-align: left; letter-spacing: 0.2rem; position: relative; text-transform: capitalize;;  }
h1 { font-size: 2rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.8rem; }

#top {padding: 30px 20px 45px;}
#top .logo {text-align: center; float: left; width: 100%;}
#top .logo img {max-height: 75px;}

#boxes .left {position: relative;float: left;width: 50%;background: url('../images/option-bg.jpg')no-repeat;text-align: center;background-size: cover;background-position: center;padding: 14% 40px;}
#boxes .left::after {content: "";position: absolute;height: 100%;width: 100%;background: rgba(27, 157, 217, 0.92);top: 0;left: 0; z-index: 1;}
#boxes .right {position: relative;float: left;width: 50%;background: url('../images/hearing-bg.jpg')no-repeat;text-align: center;background-size: cover;background-position: center;padding: 14% 40px;}
#boxes .right::after {content: "";position: absolute;height: 100%;width: 100%;background: rgba(31, 47, 86, 0.92);top: 0;left: 0;z-index: 1;}
#boxes a { position: relative; text-decoration: none; z-index: 2;}
#boxes .logo {float: left;width: 100%;margin-bottom: 50px;}
#boxes .logo img {max-height: 100px; max-width: 60%; position: relative; z-index: 9;}
#boxes .title { float: left; width: 100%; margin-bottom: 30px;}
#boxes .title h2 { color: #fff; text-align: center; font-size: 2.4rem;}

#logos h2 { font-weight: 300; color: #444;}
#logos ul {float: left;width: 100%;margin: 0px 0 0px;display: table;table-layout: fixed;}
#logos ul li {padding: 10px;position: relative;text-align: center;display: table-cell;width: auto;}
#logos ul li img {max-width: 100%;vertical-align: middle;}
#logos ul li img.sm {max-width: 100%;max-height: 34px;margin-top: 4px;}


/* Text */
#home-text { background: #f4f4f4; }
#home-text .cell:first-of-type { padding: 50px 60px 60px; width: 75%; }
#home-text .cell:last-child { width: 25%; background-position: center; background-repeat: no-repeat; background-size: cover; }
.webtext { float: left; width: 100%; font-size: 1.4rem; font-weight: 300; letter-spacing: 0.06rem; color: #333; line-height: 2.6rem; }
.webtext img { max-width: 100%; }
.webtext a { color: #1b9dd9; }


/* Buttons */
.btn {background: transparent;color: #fff;border: 1px solid #ffffff;display: inline-block;line-height: 3rem;padding: 10px 20px;font-size: 1.8rem;font-weight: 300;letter-spacing: 0.1rem;border-radius: 2px;}
.btn:hover {background: #1f2f56;color: #fff!important;border-color: #1f2f56;}
.btn i { margin-left: 10px; font-size: 1.8rem; }

.btn-2 {background: transparent;color: #fff;border: 1px solid #ffffff;display: inline-block;line-height: 3rem;padding: 10px 20px;font-size: 1.8rem;font-weight: 300;letter-spacing: 0.1rem;border-radius: 2px;}
.btn-2:hover { background: #1b9dd9!important; color: #fff!important; border-color: #1b9dd9;}
.btn-2 i { margin-left: 10px; font-size: 1.8rem; }

footer{ background: #eee; padding:15px 0px; text-align: center; font-size: 1rem; letter-spacing: 0.02rem;}
footer a { color: #1b9dd9;}


/* Custom */
.tac { text-align: center; }
.fl { float: left; }
.w100 { width: 100%; }
.table { display: table; }
.cell { display: table-cell; }
.pl20 { padding-left: 20px; }
.pr20 { padding-right: 20px; }
.oh { overflow: hidden; }
.br { border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; }
.blue {color: #1E74C1!important;}


/* Margins */
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 40px; }
.mt60 { margin-top: 60px; }

/* Transitions */
.tr-a { transition: all .6s ease; -webkit-transition: all .6s ease; -moz-transition: all .6s ease; -o-transition: all .6s ease; }

/* Clearfix */
.cf:before,
.cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }


/* Responsive */
*, *:after, *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
[class*='c-'] { float: left; padding: 0 10px; }
[class*='c-']:last-of-type, .lastc { float: left; }

.c-1 { width: 100%; }
.c-2 { width: 50%; }
.c-3 { width: 33.33%; }
.c-4 { width: 25%; }
.c-5 { width: 20%; }
.c-6 { width: 16.6666666667%; }
.c-7 { width: 14.2857142857%; }
.c-8 { width: 12.5%; }
.c-9 { width: 11.1111111111%; }
.c-10 { width: 10%; }
.c-11 { width: 9.09090909091%; }
.c-12 { width: 8.33%; }

.c-5-2 { width: 40%; }
.c-5-4 { width: 80%; }

.c-20 { width: 20%; }
.c-30 { width: 30%; }
.c-40 { width: 40%; }
.c-45 { width: 45%; }
.c-55 { width: 55%; }
.c-60 { width: 60%; }
.c-70 { width: 70%; }
.c-80 { width: 80%; }


/* 1200px */
@media (max-width: 1200px) {

}

/* 1100px */
@media (max-width: 1100px) {
.c-2, .c-7,  { width: 100%; }
.c-4, .c-8, .c-10, .c-12 { width: 50%; }

}


/* 960px */
@media (max-width: 960px) {

}


/* 800px */
@media (max-width: 800px) {
.c-4, .c-6, .c-8, .c-10, .c-12 { width: 50%; }
.c-1, .c-2, .c-3, .c-5, .c-7, .c-9, .c-11, .c-40, .c-60 { width: 100%; }
#boxes .left, #boxes .right { width: 100%;}
#logos ul li { float: left; width: 33%; display: inline-block;}
#logos ul li img { max-height: 50px!important;}
}

/* 600px */
@media (max-width: 680px) {
h1 { font-size: 1.8rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.6rem; }
#top { padding: 20px 20px 35px;}
#top .logo img { max-height: 65px;}
#logos ul li { float: left; width: 100%;}
#logos ul li img { max-height: 30px!important;}
#logos ul li img.sm  {max-height: 24px!important;}
.btn-2,.btn { font-size: 1.6rem; line-height: 2.6rem; padding: 10px 14px;}
#boxes .logo { margin-bottom: 30px;}
}


/* 480px */
@media (max-width: 480px) {
.c-1, .c-2, .c-3, .c-4, .c-5, .c-6, .c-7, .c-8, .c-9, .c-10, .c-11, .c-12, footer ul li.c-4 { width: 100%; }
}