*{box-sizing: border-box}
html,body{ margin: 0; padding: 0; }
body{ color: #666; font-family: "Open Sans", sans-serif; font-size: 14px; }
.clearfix {clear: both}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{ position: relative; float: left; padding-left: 10px; padding-right: 10px;  }
.col-1{width: 8.333%} .pad-1{margin-left: 8.33%}
.col-2{width: 16.667%;} .pad-2{margin-left: 16.667%}
.col-3{width: 25%;} .pad-3{margin-left: 25%}
.col-4{width: 33.333%;} .pad-4{margin-left: 33.333%}
.col-5{width: 41.667%;} .pad-5{margin-left: 41.667%}
.col-6{width: 50%;} .pad-6{margin-left: 50%}
.col-7{width: 58.333%;} .pad-7{margin-left: 58.333%}
.col-8{width: 66.667%;} .pad-8{margin-left: 66.667%}
.col-9{width: 75%;} .pad-9{margin-left: 75%}
.col-10{width: 83.333%;} .pad-10{margin-left: 83.333%}
.col-11{width: 91.667%;} .pad-11{margin-left: 91.667%}
.col-12{width: 100%;}
.nopad {padding: 0 !important;}

h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    line-height: 120%;
    color: #0099da;
    margin: 20px 0 17px 0;
}

h2 {font-size: 2em} h3 {font-size: 1.7em} h4 {font-size: 1.5em}

#header > .navbar-wrapper{width: 100%; height: 80px}
#header > .navbar-wrapper > .navbar {width: 1000px; height: 100%; margin: 0 auto; padding-left: 20px; padding-right: 20px;}

/* navbar */
.navbar > .logo {float:left; width: 270px; height: 100%; background: url('../img/header-logo.png') no-repeat 0 12px;
}
.navbar > ul {list-style-type: none; float: right; height: 100%; margin: 0}
.navbar > ul > li {float: left; height: 100%; color: black; position: relative}
.navbar > ul > li > a {padding: 28px 15px; height: 100%;float:left; transition: all 0.25s ease-in-out; text-decoration: none; color: black; text-transform: uppercase; font-weight: bold}
.navbar > ul > li:hover > a {background-color: #3498db; color: white !important;}
.navbar > ul > li:hover > a:after {content: ""; position: absolute; bottom: -1px; left: 50%; height: 0; width: 0; border: 10px solid transparent; border-bottom-color: #fff; margin-left: -10px; z-index: 1100; }
.navbar > ul > li > a:visited { color: black}
.navbar > ul > li > ul {list-style-type: none; display: none; position: absolute; top: 100%; margin: 0; left: auto; right: 0;
    min-width: 220px;
    padding: 0;
    background: #fff;
    border-top: 1px solid #e0eded;
    border-bottom: 3px solid #e0eded;
    border-radius: 2px;
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
z-index: 1100}
.navbar > ul > li:hover > ul {display: block}
.navbar > ul > li > ul > li {margin: 0; height: 36px; border-bottom: 1px solid #e0eded;}
.navbar > ul > li > ul > li > a {height: 100%; color: #333; padding: 8px 15px; width: 100%; float:left; text-decoration: none; transition: all 0.25s ease-in-out}
.navbar > ul > li > ul > li > a:hover{background: #3498db; color: #fff;}

/* slider on homepage */
.slider-wrapper {width: 100%; height: 400px; background-color: black; overflow: hidden; position: relative}
.slider-wrapper > ol {position: absolute; z-index: 15; width: 940px; left: 0; right: 0; margin: 0 auto; padding: 0; list-style-type: none; height: 16px; bottom: 20px; text-align: center}
.slider-wrapper > ol > li {display: inline-block; background-color: transparent; border-radius: 10px; width: 12px; height: 12px; margin-left: 5px; margin-right: 5px; border: solid 2px white; cursor: pointer}
.slider-wrapper > ol > li.active {background-color: white}
.slider-wrapper > a.slider-control {position: absolute; width: 15%; text-align: center; height: 100%; top: 0; bottom: 0; line-height: 400px; cursor: pointer}
.slider-wrapper > a.slider-control > span {width: 36px; height: 48px; display: inline-block; background-image: url('../img/slider-chevron.png');}
.slider-wrapper > a.slider-control.left {left: 0}
.slider-wrapper > a.slider-control.right {right: 0; }
.slider-wrapper > a.slider-control.right > span {background-position: -36px}
.slider-wrapper > .slider-container {width: 400%; height: 100%; transition: all 1s ease-in-out}
.slider-wrapper > .slider-container.noeffect {transition: none !important;}
.slider-wrapper > .slider-container > .slider {width: 25%; height: 100%; background-size: cover; background-position: center; float:left}
.slider-wrapper > .slider-container > .slider > .content-container {width: 100%; height: 100%}
.slider-wrapper > .slider-container > .slider > .content-container > .content {width: 940px; margin: 0 auto; height: 100%; padding: 30px; color: white}
.slider-wrapper > .slider-container > .slider > .content-container > .content > .title {background-color: rgba(66, 139, 202, 0.6);text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); padding: 20px; font-size: 48px; font-weight: 300; display: inline-block}
.slider-wrapper > .slider-container > .slider > .content-container > .content > .title > strong { font-weight: bold}
.slider-wrapper > .slider-container > .slider > .content-container > .content.invert > .title {background-color: rgba(0, 0, 0, 0.6);}
.slider-wrapper > .slider-container > .slider > .content-container > .content.invert > .sub{background-color: rgba(66, 139, 202, 0.6);}
.slider-wrapper > .slider-container > .slider > .content-container > .content > .sub {background-color: rgba(0, 0, 0, 0.6);padding: 16px 30px;  color: #fff;  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);  font-size: 18px;  font-weight: 300; display: inline-block;   line-height: 1.25;}

.slider.a {background-image: url('../img/slider-01-bg.jpg')}
.slider.b {background-image: url('../img/slider-02-bg.jpg')}
.slider.c {background-image: url('../img/slider-03-bg.jpg')}

.section{width: 100%; padding: 30px 0}
.section.grey {border-bottom: 1px solid #e0eded; border-top: 1px solid #e0eded; background-color: #fcfcfc;}
.section > .container {width: 1000px; padding: 0 20px; margin: 0 auto;}
.section > .container > h2.section-title-center {text-align: center}
.section > .container > h2.section-title-belowline {border-bottom: solid 1px #ddd;  padding-bottom: 15px;  margin-top: 39px; color: #000; font-weight: 300; line-height: 120%; font-size: 2em}
.section > .container > h2.section-title-rightline {position: relative;  z-index: 1;  overflow: hidden;  color: #000;  margin: 30px 0;font-weight: 300;  line-height: 120%; font-size: 2em}
.section > .container > h2.section-title-rightline:after {  position: absolute;  top: 55%;  overflow: hidden;  width: 100%; height: 2px;  content: '\a0';  background-color: #ddd;border-left: solid 20px #fff;}

.infobox {width: 310px; margin-bottom: 15px; cursor: pointer; transition: all 0.2s ease-in-out; max-height: 100px}
.infobox:hover {background-color: rgba(0,0,0,0.1);}
.infobox > img {width: 100px; height: 100px; float: left; margin-right: 5px; background-color: #0099da}
.infobox > h4 {float: left; margin-top: 0; margin-bottom: 0; overflow: hidden; width: 205px; white-space: nowrap;}
.infobox > small {display: block; overflow: hidden; white-space: nowrap; margin-bottom: 5px; float: left}
.infobox > p {float: left; width: 205px; margin: 0; overflow: hidden; line-height: 17px; max-height: 52px}

.accordion {width: 100%}
.accordion > .panel:first-child {margin-top: 0 !important;}
.accordion > .panel {border: solid 1px #e5e5e5; margin-top: 5px}
.accordion > .panel > .head {  background-color: #f3f3f3;  color: #333; }
.accordion > .panel > .head > a {display: block;  padding: 5px 15px; line-height: 24px; cursor: pointer; text-decoration: none}
.accordion > .panel > .head > a:hover {color: inherit}
.accordion > .panel > .head > a:after {font-family: 'FontAwesome';  content: "\f107";  font-size: 1.2em;  float: right;  background-color: #0099da;  color: white;  padding: 5px 0;  margin-top: -5px;  margin-right: -16px;  width: 33px;  text-align: center;}
.accordion > .panel > .body {padding: 15px; border-top: solid 1px #e5e5e5; display: none}
.accordion > .panel.active > .head > a:after {content: "\f104";}
.accordion > .panel.active > .body {display: block}

.partner-container {margin-left: -10px; margin-right: -10px}
.partner{border: 1px solid #e0eded;  padding: 10px 15px;  background: transparent; text-align: center; min-height: 100px; overflow: hidden; max-height: 100px}
.partner:hover{border-width: 3px !important; padding: 8px 13px}
.partner > a {display: inline-block; text-align: center; overflow: hidden; max-height: 80px}

.form{width: 100%}
.form.box{border: solid 1px #e0eded;}
.form > .head {background-color: #ecf0f1;   padding: 15px 20px;}
.form > .head > h2 {margin: 0; padding: 0; font-size: 16px; font-weight: 400; color: #333333}
.form > .body {padding: 15px 20px;}
form {width: 100%}
form > .form-group {margin-bottom: 15px;}
form.down > .form-group > label {text-align: left; display: block;  margin-bottom: 6px;  line-height: 19px;  font-weight: 400;}
form.down > .form-group > .input {position: relative}
form.down > .form-group > .input > i {color: #ccc; position: absolute;  top: 5px;  width: 29px;  height: 29px;  font-size: 15px;  line-height: 29px;  text-align: center;}
form.down > .form-group > .input.append > i {left: 5px; border-right: solid 1px #cccccc; padding-right: 3px}
form.down > .form-group > .input.prepend > i {right: 5px; border-left: solid 1px #cccccc; padding-left: 3px}
form.down > .form-group > .input.append > input {padding-left: 46px}
form.down > .form-group > .input.prepend > input {padding-right: 46px}
form.down > .form-group > .input > input {width: 100%;  height: 39px;  padding: 8px 10px;  outline: none;  border-radius: 2px;  background: #f9f9f9;  border: solid 1px rgb(204, 204, 204); color: rgb(102, 102, 102);}
form.down > .form-group > .input > input:hover {  border-color: #8dc9e5;}

button.btn {display: inline-block; padding: 6px 48px 6px 12px; font-size: 14px; text-align: center; vertical-align: middle; border-radius: 2px; cursor: pointer; font-weight: 400; min-height: 34px; position: relative}
button.btn.btn-blue {color: white; background-color: #3498db; border: solid 1px #258cd1;}
button.btn > i {position: absolute; right: 0; top: 0; height: 100%; width: 36px; background-color: #217dbb; color: white; line-height: 32px}
button.btn:hover {background-color: #4aa3df; border-color: #4aa3df;}

textarea.form-control{width: 100%; resize: vertical; padding: 10px; font-size: 16px; text-transform: uppercase}

table{width: 100%}
table.nicegrey {border: 1px solid #ddd; font-size: 13px}
table.nicegrey > thead > tr {  background-color: #f9f9f9;}
table.nicegrey > thead > tr > th {padding: 8px; vertical-align: middle; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;}
table.nicegrey > thead > tr > th:last-child {border-right: none}
table.nicegrey > tbody > tr {cursor: pointer}
table.nicegrey > tbody > tr:hover {background-color: #ddd !important;}
table.nicegrey > tbody > tr:nth-child(odd) {background-color: #f9f9f9;}
table.nicegrey > tbody > tr > td {padding: 8px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;}
table.nicegrey > tbody > tr > td:last-child {border-right: none}
table.nicegrey > tbody > tr:last-child > td {border-bottom: none;}


.page-header {width: 100%; border-bottom: 1px solid #e0eded; border-top: 1px solid #e0eded; background-color: #fcfcfc; color: #333333}
.page-header > .container {width: 1000px; padding-left: 20px; padding-right: 20px; margin: 0 auto; height: 100%;}
.page-header > .container > h2 {font-size: 20px; font-weight: 500; padding: 16px 0; margin: 0 !important; float: left; width: 50%; color: #333333 !important;}
.page-header > .container > .breadcrumb {text-align: right; display: inline-block; width: 50%; height: 100%}
.page-header > .container > .breadcrumb > ul {list-style-type: none; float: right; height: 100%; margin: 0; padding: 16px 15px 16px 0; display: inline-block; text-align: right}
.page-header > .container > .breadcrumb > ul > li {float: left;}
.page-header > .container > .breadcrumb > ul > li > a {text-decoration: none; transition: all 0.2s ease-in-out}
.page-header > .container > .breadcrumb > ul > li > a:hover {color: #4aa3df !important;}
.page-header > .container > .breadcrumb > ul > li > a:visited {color: #333333}
.page-header > .container > .breadcrumb > ul > li+li:before {padding: 0 5px;color: #ccc;content: "/\00a0";}

p {line-height: 22px; margin-bottom: 10px}
div.error {color: red;}
ul.list {margin: 0}
ul.list > li {padding: 4px 0}

a:visited {color: inherit}
a:hover {color: #4aa3df}

#footer {margin-top: 40px; width: 100%; color: white; background-color: #222222; min-height: 300px; padding-top: 48px}
#footer a {color: #0eb7ff; text-decoration: none}
#footer a:visited {color: #0eb7ff}
#footer a:hover {color: #2a6496}
#footer > .socmed { width: 100%; background: rgba(0, 0, 0, 0.1); border-bottom: solid 1px #000; border-top: solid 1px #000; padding: 15px;}
#footer > .socmed > .container{ width: 1000px; margin: 0 auto; padding-left: 20px; padding-right: 20px; overflow: hidden; min-height: 100px; max-height: 100px}
#footer > .socmed > .container > .feed {width: 100%; height: 100px; position: relative; transition: all 0.5s ease-in-out}
#footer > .socmed > .container > .feed.tw > .logo {background-image: url('../img/socmed-twitter.png');}
#footer > .socmed > .container > .feed.fb > .logo {background-image: url('../img/socmed-facebook.png');}
#footer > .socmed > .container > .feed > .logo { width: 70px; height: 70px; margin-top: 15px; float: left; color: black}
#footer > .socmed > .container > .feed > .content {float:right; width: 860px; border-left: solid 5px #999999; height: 90px; margin-top: 5px; padding-left: 30px; padding-top: 10px; padding-bottom: 10px; font-size: 14px}
#footer > .teaser {width: 100%; padding: 55px 0; }
#footer > .teaser > .container {width: 1000px; margin: 0 auto;}
#footer > .teaser > .container > .col {width: 33.3333%; height: 100%; float: left; padding: 0 20px; font-size: 13px}
#footer > .teaser > .container > .col > h3 {color: #0eb7ff; font-size: 1.6em; margin-top: 0; font-weight: 300}
#footer > .teaser > .container > .col > form {margin-top: 15px}
#footer > .teaser > .container > .col > form > input[type=text] {background: #f9f9f9;  border: 1px solid #ccc;  color: #70808b;  font-size: 13px !important; height: 34px; padding: 8px 12px; vertical-align: middle}
#footer > .teaser > .container > .col > form > button {background-color: #3498db; border: solid 1px rgb(74, 163, 223); color: white; height: 34px; font-size: 14px; cursor: pointer; vertical-align: middle}
#footer > .teaser > .container > .col > form > button:hover {background-color: #4aa3df}
#footer > .teaser > .container > .col > .socmed {display: block;}
#footer > .teaser > .container > .col > .socmed > a {padding: 10px; float: left; display: inline-block; width: 40px; height: 40px; border-radius: 3px; background-color: white; color: black; margin-right: 10px; margin-bottom: 12px; margin-left: 5px;  transition: all 0.1s ease-in-out}
#footer > .teaser > .container > .col > .socmed > a > img {transition: all 0.1s ease-in-out}
#footer > .teaser > .container > .col > .socmed > a:hover {padding: 5px;}
#footer > .teaser > .container > .col > .socmed > a:hover > img {width: 30px; height: 30px;}
#footer > .teaser > .container > .col > ul {list-style-type: none; margin: 0; padding: 0}
#footer > .teaser > .container > .col > ul > li {width: 33.333%; float:left;   padding-bottom: 2px;  padding-top: 1px;font-size: 14px;  line-height: 1.75em;}
#footer > .teaser > .container > .col > ul > li > a {color: white}
#footer > .teaser > .container > .col > ul > li > a:hover {color: #0eb7ff}
#footer > .copyright {width: 100%; ; border-top: solid 1px #000; padding: 15px 0;  background-color: rgba(0, 0, 0, 0.5);  color: #999999;  font-size: 13px;}
#footer > .copyright > .container {width: 1000px; margin: 0 auto; padding: 0 20px;}
#footer > .copyright > .container > .info {float: left; width: 50%}
#footer > .copyright > .container > .info.right {text-align: right; float: right}

.modal {display: none; position: fixed; background-color: rgba(0,0,0, 0.8); height: 100%; width: 100%; z-index: 1900; left: 0; top: 0; transition: all 0.4s ease-in-out; right: 0; bottom: 0; text-align: center; white-space: nowrap}
.modal:before {  content: '';  display: inline-block;  height: 100%;  vertical-align: middle;  margin-right: -0.25em;  }
.modal > .window {position: relative; width: 1000px; margin: auto auto; background-color: #ffffff; color: #000000; z-index: 1901; border-radius: 20px; min-height: 70%; height: 70%; max-height: 70%;  padding: 20px; display: inline-block;  vertical-align: middle;  box-shadow: 1px 1px 3px #000;}
.modal > .window > a.close {width: 30px; height: 30px; border-radius: 15px; background-color: #ffffff; position: absolute; z-index: 1902; right: -15px; top: -15px; box-shadow: 1px 1px 3px #000; border: solid 3px #000000; font-size: 15px; cursor: pointer}
.modal > .window > a.close:hover {color: white; background-color: black}