/* CSS Document */
@font-face {
    font-family: 'TheSans';
    src: url('fonts/TheSansOffice5_.eot');
    src: local('☺'), url('fonts/TheSansOffice5_.woff') format('woff'), url('fonts/TheSansOffice5_.ttf') format('truetype'), url('fonts/TheSansOffice5_.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
* {
    margin: 0;
    padding: 0;
}
a img {
    border: none
}
html, body {
    padding: 0;
    margin: 0;
    height: 100%;
    background-color: white;
}
body {
    background-color: #fff;
    color: #555;
    padding: 0px;
    font: 14px/150% Verdana, 'Geneva, sans-serif';
}
/********************** HEADER ********************************/
.headerAround {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 100;
    background-color: #fff;
    border-bottom: 1px solid #7fcff1;
    height: 124px;
}
.TOP-logoAround {
    width: 100%;
    border-bottom: 1px solid #7fcff1;
}
.TOP-logo {
    max-width: 980px;
    margin: 0 auto;
    font-size: 0.9em;
    color: #00a9e0;
    padding: 6px 10px 6px 10px;
    background-image: url(img/header_BG.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}
.TOP-logo a, .TOP-logo a:visited {
    color: #449752;
}
.TOP-logo a:hover {
    color: #027c17;
    text-decoration: none
}
.header {
    max-width: 1000px;
    height: 36px;
    margin: 0 auto;
    position: relative;
}
.headerLOGO {
    float: left;
}
.headerLOGO img {
    width: 260px;
    margin: 24px 0 19px 40px;
    float: left
}

@media (max-width:780px) {
.headerAround {
    height: auto
}
.header {
    height: 20px
}
.headerLOGO img {
    width: 190px;
    margin: 24px 0 19px 40px;
    float: left
}
.no-mob {
    display: none;
    visibility: hidden;
    height: 0px
}
}

@media (max-width: 680px) {
.TOP-logoAround {
    display: none
}
.TOP-logo {
    display: none
}
.headerLOGO img {
    width: 180px;
    margin: 15px 0 0px 20px;
}
.header {
    width: 100%;
    height: 70px;
}
}

@media (max-width: 420px) {
.header {
    background-image: none;
    height: auto;
}
}
.slogan {
    float: left;
    padding-left: 10%;
    padding-top: 20px;
    font-size: 250%;
	color:#00a9e0;
}

.slogan a {	color:#00a9e0 !important; text-decoration: none }
.slogan a:hover { color:#00a9e0 !important; text-decoration: none }

@media (max-width:900px) {
.slogan {
    padding-left: 5%;
    padding-top: 20px;
    font-size: 200%
}
}

@media (max-width:780px) {
.slogan {
    padding-left: 0%;
    padding-top: 20px;
    font-size: 170%
}
}
/********************** HEADER IMAGE ********************************/

.headimageAround {
    width: 100%;
    height: auto;
    position: relative;
    background-color: #fff;
    margin-top: 124px;
    z-index: 12;
}
.headimage {
    max-width: 980px;
    margin: 0 auto;
    height: auto;
    position: relative;
    z-index: 5;
}
.headimage img {
    width: 100%;
}

@media only screen and (max-width: 680px) {
.headimageAround {
    margin-top: 81px
}
}

@media only screen and (max-width: 480px) {
.headimage img {
    width: 100%;
    float: none;
}
.headimageAround {
    margin-top: 55px
}
}
/********************** CONTENT ********************************/

.contentAround {
    width: 100%;
    height: auto;
    position: relative;
    background: #0569af;
}
.content {
    max-width: 980px;
    margin: 0 auto;
    height: auto;
    position: relative;
    z-index: 0;
    padding: 0px 20px 0px 35px
}
.content02 {
    width: 70%;
    float: right;
    min-height: 350px!important;
    height: auto !important;
    overflow: auto;
    overflow-x: hidden;
}
.content02 ul li, .content02 ol li {
    margin-bottom: 8px;
    list-style-image: url(img/dot_LIST.gif);
}
.top20 {
    padding-top: 20px
}
.leftarea {
    width: 250px;
    padding-left: 0px;
    float: left
}
.leftarea ul {
    width: 100%;
    list-style-position: inside;
    list-style-type: none;
    padding: 20px 0 40px 0;
    margin: 0;
    border-bottom: 0px dotted #d7d7d7;
}
.leftarea ul li a, .leftarea ul li a:visited {
    display: block;
    padding: 1px 0 8px 0;
    border-bottom: 1px solid #e5e5e5;
    color: #00a9e0!important
}
.leftarea ul li a:hover {
    display: block;
    border-bottom: 1px solid #e5e5e5;
    color: #4d4e53!important;
    text-decoration: underline
}
.leftarea ul li ul {
    padding-bottom: 0px;
    border-top: 0px solid #fff;
    border-bottom: 1px dotted #e5e5e5;
}
.leftarea ul li ul li a, .leftarea ul li ul li a:visited {
    display: block;
    padding: 2px 0;
    margin-left: 15px;
    border-bottom: 0px dotted #3d9be0;
    color: #4d4e53 !important
}
.leftarea ul li ul li a:hover {
    display: block;
    padding: 2px 0;
    border-bottom: 0px dotted #3d9be0;
    color: #00a9e0!important;
    text-decoration: underline
}
.leftarea .ON {
    font-weight: bold !important
}
.leftarea .ON a {
    font-weight: bold !important
}
.leftarea .ON a:link {
}
.leftarea .ON_sub {
    border-bottom: 0px solid #fff!important;
}
.bucket {
    width: 100%;
    color: #555;
    margin-bottom: 10px;
}
#box-container {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.box50 {
    width: 46%;
    padding-left: 0px;
    margin: 0px 3% 3% 0px;
    float: left;
}
.box50 p {
    padding: 0px
}
.box50 img {
    width: 100%;
}
.content-img {
    width: 70% !important;
    display: block;
    margin: 0 auto;
}
.content-img90 {
    width: 95% !important;
    display: block;
}
.box-button {
    background: #00a9e0;
    color: #ffffff;
    padding: 6px 15px 6px 15px!important;
    width: 35%;
    margin-right: 10px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    float: left
}
.box-button a {
    color: #ffffff;
    text-decoration: none
}
.box-button a:hover, .box-button a:visited {
    color: #ffffff;
    text-decoration: none
}
.middle {
    margin: 0 auto;
    float: none;
}
.box30 {
    width: 28%;
    padding-left: 0px;
    margin: 0px 3% 4% 0px;
    float: left;
}
.w100 {
    width: 90%
}
.box30 img {
    width: 100%;
    border: 1px solid #ccc;
    margin-bottom: 6px
}

a.grey-lines img { border: 1px solid #999  }
a.grey-lines:hover img  {border:1px solid #00a9e0 }

.box-contact {
    background: #e5f5fc;
    padding: 3px 15px 6px 15px!important;
    width: 90%;
    font-size: 12px;
    margin-bottom: 5px
}

@media (max-width: 890px) {
.box30 {
    width: 45%;
}
.content02 {
    width: 100%
}
}

@media (max-width: 767px) {
.box50 {
    width: 100%;
}
.content {
    padding: 30px
}
.quality {
    float: none;
    width: 60%
}
.content02 ul, .content02 ol {
    width: 95%;
}
.leftarea {
    width: 100%;
    padding-left: 0px;
    float: none;
}
.bucket {
    width: 99%;
    float: left;
    margin-bottom: 30px;
    margin-right: 30px;
}
}

@media (max-width: 640px) {
.content.topspace {
    margin-top: 120px
}
.box30 {
    width: 100%;
}
}

@media (max-width: 360px) {
.content {
    padding: 20px
}
}
.lineCONT {
    height: 1px;
    border-bottom: 1px dotted #7fcff1;
    margin: 1em 0 1em 0;
    clear: both
}
.video {
    width: 530px;
    height: auto;
}

@media (max-width:812px) {
.video {
    width: 320px;
}
}

@media only screen and (max-width: 960px) {
.animation {
    width: 100%;
}
}
/******************************************************/

a, a:visited {
    color: #00a9e0;
    text-decoration: none;
}
a:hover {
    color: #0573a6;
    text-decoration: none;
}
.bigger {
    font-size: 135%;
    line-height: 140%
}
h1 {
    color: #00a9e0;
    font: normal 2.1em/120% 'TheSans', Verdana, 'Geneva, sans-serif';
    margin: 0 0 0.7em 0;
}
h2 {
    color: #00a9e0;
    font: normal 18px/140% 'TheSans', Verdana, 'Geneva, sans-serif';
    margin: 0 0 0.7em 0;
}
h3 {
    color: #00a9e0;
    font: bold 14px/150% Verdana, 'Geneva, sans-serif';
    margin: 0 0 0.5em 0
}
h4 {
    color: #00a9e0;
    font: normal 1.2em/120% 'TheSans', Verdana, 'Geneva, sans-serif';
    margin: 0em 0 0.4em 0;
    padding: 10px;
}
p {
    margin-bottom: 1.2em
}
ul {
    margin: 0 0 2em 8.5em;
    width: 70%
}
ul li {
    margin: 0 0 0.5em 0
}

@media only screen and (max-width: 1020px) {
ul {
    margin: 0 0 2em 4em;
    width: 80%
}
}

@media only screen and (max-width: 640px) {
ul {
    margin: 0 0 2em 1.4em;
    width: auto
}
}

@media only screen and (max-width: 420px) {
h1 {
    font: normal 160%/120% 'TheSans', Verdana, 'Geneva, sans-serif';
}
}
.normal {
    color: #555;
    font: 0.8em/120% 'TheSans', Verdana, 'Geneva, sans-serif';
}
/******************************************************/
.green {
    color: #009a49
}
.grey {
    color: #4d4f53
}
.grey-light {
    color: #ccc
}


.blue {
    color: #00a9e0
}
.small {
    font-size: 90%
}
/********************** footer **************************/

.footerAround {
    width: 100%;
    height: auto;
    position: relative;
    background-color: #f2fafe;
    border-top: 1px solid #def2fd;
    border-bottom: 1px solid #def2fd;
}
.footer {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
    padding: 10px 15px 15px 20px;
    font-size: 80%;
    height: 60px;
}
.line {
	clear: both;
    height: 1px;
    width: 100%;
    border-bottom: 1px solid #ccc;
    margin: 1em 0
}
#socialmedia {
    padding-top: 5px
}
#socialmedia a, #socialmedia a:visited {
    color: #00a9e0;
    text-decoration: none;
    white-space: nowrap
}
#socialmedia a:hover {
    color: #00a9e0;
    text-decoration: underline
}
#socialmedia img {
    margin-right: 3px;
    vertical-align: -2px
}

@media only screen and (max-width: 640px) {
.footer {
    width: 90%;
    font-size: 60%;
    padding: 10px;
    height: 80px
}
}
/********************** sticky box ********************************/
.stickybox {
    height: 80px;
    width: 80px;
    position: fixed;
    top: 40%;
    right: 0;
    z-index: 100;
    -moz-border-radius: 15px 0px 0px 15px;
    -webkit-border-radius: 15px 0px 0px 15px;
    border-radius: 15px 0px 0px 15px;
    background-color: #00a9e0;
    background-size: cover;
    background-image: url(img/contact.png)
}
.stickybox img {
    width: 100%
}

@media only screen and (max-width: 640px) {
.stickybox {
    top: 60%;
    height: 40px;
    width: 40px;
}
}