/* 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;
}
@font-face {
	font-family: 'TheSansLight';
	src: url('fonts/thesans-b3-light.eot');
	src: local('☺'), url('fonts/thesans-b3-light.woff') format('woff'), url('fonts/thesans-b3-light.ttf') format('truetype'), url('fonts/thesans-b3-light.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

* {
    margin: 0;
    padding: 0;
}

a img {
border: none
}

html {height: 100.1%}

body {
	background-color: #fff;
	color:#555;
	padding:0px ;
	font: 1.2em/140% 'TheSansLight', Verdana, 'Geneva, sans-serif';
    font-weight: 200;
}


a, a:visited {color:#00a9e0; text-decoration:none;}
a:hover {color:#00a9e0; text-decoration:underline}
.contact {font-size:135%}
h1 {
	color: #009a49;
	font: normal 190%/120%  'TheSans', Verdana, 'Geneva, sans-serif'; margin: 0 0 1em 0
}

h2 {
	color: #009a49;
	font: normal 140%/140% 'TheSans', Verdana, 'Geneva, sans-serif'; margin: 0 0 1em 0
} 


h3 {
	font: normal 110%/120%  'TheSans', Verdana, 'Geneva, sans-serif'; margin: 0; color:#00a9e0
}
h4 {
	
	font: normal 120%/120%  'TheSans', Verdana, 'Geneva, sans-serif'; margin: 0 0 1em 0
}



p {margin-bottom:1.2em}
strong {font-family:'TheSans' }

ul {margin:0 0 2em 4.5em;}
ul li {margin:0 0 0.5em 0}

@media only screen and (max-width: 1020px) {
	ul {margin:0 0 2em 4em; width: 80%}
    h1 {
	color: #009a49;
	font: normal 170%/120%  'TheSans', Verdana, 'Geneva, sans-serif'; margin: 0 0 1em 0
}
}
@media only screen and (max-width: 640px) {
    h1 {
	color: #009a49;
	font: normal 150%/120%  'TheSans', Verdana, 'Geneva, sans-serif'; margin: 0 0 1em 0
}
	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'; 
}
	
	
}

sub {font-size:0.7em; vertical-align: -2px}

/******************************************************/
.green {color:#009a49}
.grey {color:#4d4f53}
.blue {color:#00a9e0}
.black {color:#444; font-family: 'TheSans'}
.small {font-size:90%}

/********************** HEADER ********************************/

.headerAround {
  width: 100%;
  height: 118px;
  position: fixed;
  top: 0;
  z-index: 1000;
  background-color: #fff;
  -webkit-box-shadow: 0px 3px 11px 0px rgba(50, 50, 50, 0.4);
  -moz-box-shadow: 0px 3px 11px 0px rgba(50, 50, 50, 0.4);
  box-shadow: 0px 3px 11px 0px rgba(50, 50, 50, 0.4);
}
.headergreenAround {
  width: 100%;
  background-color: #009a49;
}
.headergreen {
  max-width: 980px;
  margin: 0 auto;
  font-size: 0.8em;
  color: #ffffff;
  padding: 6px 10px 6px 40px;
  text-align: right
}
.headergreen a, .headergreen a:visited {
  color: #ffffff;
}
.headergreen a:hover {
  color: #c9ead8;
  text-decoration: none
}
.header {
  max-width: 1080px;
  height: 100px;
  margin: 0 auto;
  position: relative;
  background-image: url(img/header_BG.png);
  background-position: top right;
  background-repeat: no-repeat;
  background-size: contain;
}
.header img {
  width: 160px;
  margin: 18px 20% 24px 20px;
  float: left
}
.mobilicon {
  display: none
}
@media only screen and (max-width: 1024px) {
  .header img {
    margin: 18px 20% 24px 20px;
    float: left
  }
}
@media only screen and (max-width: 640px) {
  .header, .headerAround {
    height: 50px;
    background-image: none;
  }
  .header {
    width: 20%;
    float: left
  }
  .headergreen {
    width: 70%;
    margin: 0;
    font-size: 0.8em;
    color: #333333;
    padding: 20px 10px 1px 5px;
    float: right;
    line-height: 110%
  }
  .headergreen a, .headergreen a:visited {
    color: #333333;
  }
  .headergreen a:hover {
    color: #00a9e0;
    text-decoration: none
  }
  .header img {
    width: 110px;
    margin: 12px 0% 10px 20px;
  }
}
@media only screen and (max-width: 460px) {
  .headergreen {
    width: 60%;
    margin: 0;
    font-size: 0.7em;
    color: #333333;
    padding: 10px 10px 1px 5px;
    float: right;
    line-height: 110%
  }
}

/********************** HEADER IMAGE ********************************/

.headimageAround {width:100%; height:auto; position:relative; background-color: #fff; z-index: 1;border-top:1px solid #ccc; background-image: linear-gradient(#fff, #f5f5f5);text-align: center}
.headimageAround img {width:100%;max-width:400px; margin:0 auto}

.bigIMAGE {
  margin-top: 50px;
  height: 350px;
  width: 100%;
  z-index: 0;
}
.bigIMAGE.home {
  background: url(img/HEADER.webp) no-repeat left center,linear-gradient(#fff, #f5f5f5);
  background-size: contain;
}
.bigIMAGEslogan {
  position: relative;
  left: 0;
  right: 0;
  top: 35%;
  width: 50%;
  margin: 0 auto;
  z-index: 0;
  text-align: center;
  /*background-color: rgba(34, 83, 1, 0.6);*/
}

@media only screen and (max-width:1000px) {
.bigIMAGEslogan {
  background-color: rgba(255, 255, 255, 0.6);
     width: 73%;
    padding:20px;
} }


@media only screen and (max-width:630px) {
    .bigIMAGE {
  margin-top: 20px;
  height: 280px;
  width: 100%;
  z-index: 0;
}
.bigIMAGEslogan {
  position: relative;
  left: 0;
  right: 0;
  top: 10%;
  width: 70%;
  margin: 0 auto;
  z-index: 0;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.6);
} }


@media only screen and (max-width:600px) {
    .bigIMAGE {
  margin-top: 20px;
  height: 290px;
  width: 100%;
  z-index: 0;
}
.bigIMAGEslogan {
  position: relative;
  left: 0;
  right: 0;
  top: 20%;
  width: 94%;
  margin: 0 auto;
  z-index: 0;
  text-align: center;
background-color: rgba(255, 255, 255, 0.6);
}
    
}


/********************** CONTENT ********************************/


.contentWhiteHeader {max-width:840px; margin:0px auto 0 auto; height:auto; position:relative; z-index: 100; padding:40px 70px; background: rgba(255,255,255,0.7) ; -webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px; }

@media only screen and (max-width:1200px) {.contentWhiteHeader {margin:0px auto 0 auto;}}
@media only screen and (max-width:1024px) {.contentWhiteHeader {max-width:760px; margin:00px auto 0 auto; padding:40px; }}
@media only screen and (max-width:920px) {.contentWhiteHeader {max-width:920px; margin:0px auto 0 auto; padding:40px; }}
@media only screen and (max-width:600px) {.contentWhiteHeader { padding:25px; }}



.contentWhiteAround {width:100%; height:auto; position:relative; background-color: #fff;  border-top: 1px solid #e0e0e0 ; }
.content {max-width:1120px; margin:0 auto; height:auto; position:relative; z-index: 0; padding:40px; }

@media only screen and (max-width: 600px) {
.contentWhiteAround {width:100%; height:auto; position:relative; background-color: #fff;  border-top: 1px solid #e0e0e0 ; margin-top: 0;  }
.content {padding:25px; }
	
}


.infoBox {width: 100%; clear: both; margin:2em auto 0 auto; overflow: hidden; font-size:93%; display: flex;  align-items: stretch}
.infoBoxLI {width: 49%; float: left; border:1px dotted #00a9e0; margin-right: 1%}
.infoBoxRE {width: 49%; float: right; border:1px dotted #00a9e0; }
.infoBoxLI p, .infoBoxRE p {margin:15px 20px}
.infoBoxSmall {font-size: 80%; line-height: 120%}


@media only screen and (max-width:800px) {
    .infoBox {align-items: flex-start; flex-direction: column; flex-wrap: wrap }
	.infoBoxLI, .infoBoxRE {width: 99%!important; float: left; margin:0;}
    .infoBoxLI {margin-bottom: 1em}

}



.lineCONT {height:1px; border-bottom: 1px dotted #ccc; margin: 1em 0 2em 0; clear: both}

.FORMbox { color:#009a49;background-color: #fff; padding:25px 25px ;  font-size:120%; line-height: 140%; margin-bottom: 2em; border:2px solid #009a49; -moz-border-radius: 20px;
-webkit-border-radius: 20px; border-radius: 20px;}

.CONTACTbox {font-family: 'TheSans';color:#fff; background-color: #00a9e0; padding:20px 25px ; -moz-border-radius: 20px;
-webkit-border-radius: 20px; border-radius: 20px; font-size:120%; line-height: 140%; margin-bottom: 0.5em; margin-top:2em}
.CONTACTboxBig { font-size:180%; line-height: 100%;}
.CONTACTboxTel { font-size:150%; line-height: 100%;}
@media only screen and (max-width: 520px) {
    .CONTACTbox { font-size:100%; line-height: 130%}
    .CONTACTboxBig { font-size:140%; line-height: 100%;}
.CONTACTboxTel { font-size:130%; line-height: 100%;}
}

.BBoxAround {width: 100%; clear: both; margin:1em 0 3em -8px; overflow: hidden; display: flex;  align-items: stretch; line-height: 120%;}
.BBox {width: 25%; margin:0 8px; border:2px solid #d0f3ff; padding: 10px 15px; text-align: center}

@media only screen and (max-width: 1160px) {
    .BBoxAround {align-items: flex-start; flex-wrap: wrap; margin:1em 0 3em -8px;  }
    .BBox {width: 44%!important; float:left; margin-bottom: 16px}}

@media only screen and (max-width: 960px) {
    .BBoxAround {align-items: flex-start; flex-wrap: wrap; margin:1em 0 3em -8px;  }
    .BBox {width: 43%!important; float:left; margin-bottom: 16px}}

@media only screen and (max-width: 800px) {
    .BBox {width: 99%!important; float:left; margin-bottom: 1em}}


.BBox p {font-size:90%; margin-bottom: 3px}
.BBox .Yline {height:2px; background-color: #ffcb00; margin:1em 35%}
.BBox h3 {
	font: normal 100%/120%  'TheSans', Verdana, 'Geneva, sans-serif'; margin: 1.3em 0 0 0; color:#00a9e0
}



.icon {width:100px; height: 100px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background-color: #aae9ff; margin:1em auto;  text-align:center}
.icon img {width:50px; margin-top:25px}

.iconPDF {width:36px; height: 36px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; background-color: #aae9ff; margin:-12px 10px 0 0;  text-align:center; float:left}
.iconPDF img {width:26px; margin-top:6px}

.graph {width:100%; text-align: center; margin:2em 0}
.graph img {width:100%; }





/********************** footer **************************/
.footerAround {width:100%; height:auto; position:relative; background-color: #f1f1f1; border-top: 0px solid #e0e0e0; 
}
.footer {max-width:1040px; margin:0 auto; position:relative; padding: 66px 40px 40px 40px; font-size: 80% }


.line {height:1px; width:100%; border-bottom: 1px solid #ccc; margin: 1em 0}
#socialmedia a, #socialmedia a:visited {color:#838383; text-decoration:none; }
#socialmedia a:hover {color:#838383; text-decoration:underline}
#socialmedia img {margin-right: 3px; vertical-align: -2px}