/* General */
* 			        {margin: 0; padding: 0;}
BODY 			        {color: #222; background: #fff; font-size: 125%; letter-spacing: -0.2px; font-family: Open Sans, Arial, sans-serif; text-align: center;}
H2                              {color: #18704e; font-size: 150%; text-transform: uppercase; margin: 0 0 30px 0; padding: 20px 30px; border-bottom: 1px #ccc solid;}
H3                              {color: #222; font-size: 110%; margin: 20px 0;}
H4                              {color: #18704e; font-size: 100%; margin: 0 0 20px 0;}
H5                              {font-size: 100%; margin: 0 0 15px 0;}
UL		                {list-style-type: none;}
TABLE                           {font-size: 100%; border-collapse: collapse;}
TD                              {vertical-align: top;}
IFRAME                          {border: 1px #ccc solid;}
IMG                             {border: 0; vertical-align: middle;}
A, A:visited 		        {color: #222;}
A:active, A:hover 	        {color: #18704e;}

/* Header */
#page 		                {width: 100%; /*max-width: 1600px;*/ margin: 0 auto; text-align: left; position: relative;}
#header                         {width: 100%; height: 137px; background: #fff; box-shadow: 0 0 30px #999; position: fixed; left: 0; top: 0; z-index: 20;}
#header	H1		        {width: 293px; height: 71px; overflow: hidden; position: absolute; left: 3%; top: 33px; z-index: 1; margin: 0; text-align: center; font-size: 140%;}
#header H1 SPAN		        {width: 293px; height: 71px; overflow: hidden; position: absolute; left: 0; top: 0; z-index: 2; background: url(../images/logo.gif) no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; display: block; cursor: pointer;}
#header H1 A  		        {color: #fff; font-weight: bold; display: block;}
#mobilelinks                    {font-size: 200%; position: absolute; right: 2%; top: 21px; display: none;}

/* Menu */
#menu                           {position: absolute; right: 3%; top: 45px; z-index: 10;}
#menu LI                        {float: left; font-size: 80%; text-transform: uppercase; margin-left: 5px; position: relative; cursor: default;}
#menu A,
#menu A:visited                 {display: inline-block; padding: 13px 18px; border-bottom: 5px #fff solid; text-decoration: none;}
#menu A:hover                   {color: #18704e; border-bottom: 5px #18704e solid;}
#menu .active                   {color: #18704e; font-weight: bold; padding: 13px 18px; border-bottom: 5px #18704e solid;}
#menu UL  			{width: 265px; background: #18704e; padding-bottom: 18px; border: 5px #fff solid; position: absolute; left: -5px; top: 43px; z-index: 20;}
#menu UL LI 		        {font-size: 100%; text-transform: none; float: none; padding: 18px 15px 0 15px;}
#menu UL A,
#menu UL A:visited              {color: #fff !important; border: 0; padding: 0; text-decoration: underline;}
#menu UL A:hover                {border: 0; text-decoration: none;}
#menu UL .active                {color: #fff; font-weight: bold; border: 0; padding: 18px 15px 0 15px;}
#menu UL                        {display: none;}
#menu LI:hover UL               {display: block;}
#menu I                         {margin-left: 2px;}

/* Carousel */
#carousel                       {height: 25vw; border: #ccc solid; border-width: 1px 0; margin-top: 137px; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; background-size: cover !important; position: relative;}
#carousel.slide1                {background: url(../images/slide1.jpg) 50% 100% no-repeat #222;}
#carousel.slide2                {background: url(../images/slide2.jpg) 50% 100% no-repeat #222;}
#carousel.slide3                {background: url(../images/slide3.jpg) 50% 100% no-repeat #222;}
#carousel .button               {color: #fff; font-size: 1.5vw; padding: 1.2vw 2vw; background: #18704e; text-decoration: none; position: absolute; bottom: 15%; left: 3%; transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; -webkit-transition: .3s;}
#carousel .button:hover         {background: #222;}
#carousel SPAN                  {color: #fff; font-size: 3.5vw; font-weight: bold; text-shadow: 2px 2px 0 #000; text-transform: uppercase; position: absolute; bottom: 43%; left: 3%;}
#carousel.slide2 .button,
#carousel.slide2 SPAN           {left: auto; right: 3%;}

/* Content */
#container                      {padding: 0 3%;}
#container P 		        {margin: 0 0 20px 0;}
#container UL 		        {margin: 20px 0 10px 20px;}
#container UL LI                {padding-left: 20px; margin-bottom: 10px; position: relative;}
#container UL LI::before        {color: #18704e; font-family: 'FontAwesome'; font-size: 70%; content: "\f04d"; position: absolute; left: 0; top: 6px;}

/* Boxes */
#boxes                          {display: flex; flex-wrap: wrap; margin: 0 !important;}
#boxes LI                       {width: calc(32% - 2px); float: left; border: 1px #ccc solid; margin: 0 2% 2% 0 !important; padding: 0 !important; text-align: center;}
#boxes LI:hover                 {background: #18704e; border-color: #18704e; cursor: pointer;}
#boxes LI:hover A               {color: #fff;}
#boxes LI::before               {content: "" !important;}
#boxes LI:nth-child(3n)         {margin-right: 0 !important;}
#boxes LI H3                    {color: #18704e; font-size: 1.8vw; line-height: 2vw; text-transform: uppercase; margin: 0 1.8vw 1.8vw 1.8vw !important;}
#boxes LI A                     {color: #18704e; display: block; margin: 1.8vw; text-decoration: none;}
#boxes LI IMG                   {width: 100%;}

/* Contact */
#contact                                        {display: flex; flex-wrap: wrap;}
#contact .box                                   {width: calc(32% - 2px); float: left; border: 1px #ccc solid; margin: 0 2% 2% 0;}
#contact .box:nth-child(3n)                     {margin-right: 0 !important;}
#contact .box:nth-child(-n+3)                   {color: #fff; background: #18704e; border-color: #18704e;}
#contact .box:nth-child(-n+3) H4,
#contact .box:nth-child(-n+3) H5,
#contact .box:nth-child(-n+3) A:hover           {color: #fff;}
#contact .box:nth-child(-n+3) LI::before        {color: #222;}
#contact .box:nth-child(-n+3) A,
#contact .box:nth-child(-n+3) I                 {color: #ccc;}
#contact .box H4                                {color: #222; margin: 20px 30px;}
#contact .box H5                                {color: #18704e; text-transform: uppercase; margin: 0 30px 20px 30px;}
#contact .box P,
#contact .box UL                                {margin: 20px 30px;}
#contact .box .title                            {display: inline-block; margin-bottom: 20px;}
#contact .box I,
.contact I                                      {font-size: 90%; margin-right: 6px;}

/* References */
.reference                              {border: 1px #ccc solid; padding: 10px 30px 15px 30px; margin-bottom: 2%;}
.reference LI                           {display: inline-block;}
.reference:nth-child(2n+1)              {color: #fff; background: #18704e; border-color: #18704e;}
.reference:nth-child(2n+1) H3           {color: #fff;}
.reference:nth-child(2n+1) LI::before   {color: #222 !important;}

/* Footer */
#footer 		        {color: #fff; background: #18704e; clear: both; margin-top: 30px; padding-bottom: 10px;}
#footer .box		        {width: 31.66%; float: left; margin-right: 2.5%;}
#footer .box H3		        {color: #fff; padding: 30px 0; text-transform: uppercase;}
#footer .box H3 A	        {color: #fff; text-decoration: none;}
#footer .box IMG	        {width: 32%; border: 5px #222 solid; float: left; margin: 0 7% 5% 0;}
#footer .box P                  {font-size: 85%; margin-bottom: 5%;}
#footer .box:nth-child(3n)      {margin-right: 0 !important;}

#copyright                      {color: #56b28e; font-size: 70%; background: #222; clear: both; padding: 27px 0;}
#copyright A                    {color: #56b28e;}
#copyright A:hover              {color: #fff;}
#copyright SPAN                 {float: right;}

/* Optional */
.fa-file-pdf                    {color: #18704e;}
.content                        {padding: 0 3%;}
.right                          {float: right;}
.imgright                       {width: 9%; float: right; margin: 0 0 2vw 2vw; border: 1px #ccc solid; padding: 5px;}
.cleaner                        {clear: both;}

/* Responsive */
@media screen and (max-width: 1500px) {
        #menu                           {top: 50px;}
        #menu LI                        {font-size: 75%;}
        #menu A,
        #menu A:visited,
        #menu .active                   {padding: 10px 15px;}
        #menu UL  			{width: 245px; padding-bottom: 15px; top: 40px;}
        #menu UL LI,
        #menu UL .active                {padding: 15px 12px 0 12px;}

        .imgright                       {width: 11%;}
}

@media screen and (max-width: 1400px) {
        #header 			{height: 127px;}
        #header H1			{width: 252px; height: 61px; font-size: 100%;}
        #header H1 SPAN			{width: 252px; height: 61px;}

        #menu                           {top: 48px;}
        #menu A,
        #menu A:visited,
        #menu .active                   {padding: 8px 12px;}
        #menu UL  			{width: 240px; padding-bottom: 12px; top: 36px;}
        #menu UL LI,
        #menu UL .active                {padding: 12px 10px 0 10px;}

        #carousel                       {margin-top: 127px;}

        .imgright                       {width: 13%;}
}

@media screen and (max-width: 1300px) {
        #menu LI                        {font-size: 70%;}
        #menu A,
        #menu A:visited,
        #menu .active                   {padding: 8px 10px;}
        #menu UL  			{width: 225px; padding-bottom: 12px; top: 35px;}
        #menu UL LI,
        #menu UL .active                {padding: 12px 10px 0 10px;}

        .imgright                       {width: 15%;}
}

@media screen and (max-width: 1200px) {
        #header 			{height: 117px;}
        #header H1			{width: 211px; height: 51px;}
        #header H1 SPAN			{width: 211px; height: 51px;}

        #menu                           {top: 42px;}
        #menu LI                        {font-size: 65%;}
        #menu UL  			{width: 210px; top: 34px;}

        #carousel                       {margin-top: 117px;}

        #container                      {font-size: 95%;}

        .imgright                       {width: 17%;}
}

@media screen and (max-width: 1100px) {
        #header 			{height: 107px;}
        #header H1			{width: 170px; height: 41px; left: 2%;}
        #header H1 SPAN			{width: 170px; height: 41px;}

        #menu                           {top: 40px; right: 2%;}
        #menu A,
        #menu A:visited,
        #menu .active                   {padding: 5px 8px;}
        #menu UL  			{padding-bottom: 12px; top: 28px;}
        #menu UL LI,
        #menu UL .active                {padding: 12px 10px 0 10px;}

        #carousel                       {margin-top: 107px;}

        #container                      {font-size: 90%;}
        #container,
        .content                        {padding: 0 2%;}

        #contact .box                   {font-size: 90%;}

        #footer .box H3		        {font-size: 100%;}
        #footer .box P                  {font-size: 75%;}

        #copyright SPAN                 {float: none; display: block;}

        .imgright                       {width: 19%;}
}

@media screen and (max-width: 1000px) {
        #header 			{height: 97px;}
        #header H1			{width: 128px; height: 31px;}
        #header H1 SPAN			{width: 128px; height: 31px;}

        #menu                           {top: 35px;}
        #menu LI                        {font-size: 60%;}
        #menu A,
        #menu A:visited,
        #menu .active                   {padding: 5px 5px;}
        #menu UL  			{width: 200px; padding-bottom: 12px; top: 27px;}
        #menu UL LI,
        #menu UL .active                {padding: 12px 10px 0 10px;}

        #carousel                       {margin-top: 97px;}
        #container                      {font-size: 85%;}
        #contact .box                   {font-size: 80%;}

        .imgright                       {width: 21%;}
}

@media screen and (max-width: 850px) {
        #header                         {position: static;}
        #header H1			{width: 211px; height: 51px; top: 23px;}
        #header H1 SPAN			{width: 211px; height: 51px;}
        #mobilelinks                    {display: block;}

        #menu                           {font-size: 125%; background: #fff; left: 0; right: 0; top: 97px; padding: 0 2% 2% 2%; box-shadow: 0 30px 30px -25px #000; display: none;}
        #menu LI                        {float: none; margin: 0 0 1px 0;}
        #menu A,
        #menu A:visited                 {display: block; padding: 10px 15px; border: 0 !important;}
        #menu A:hover,
        #menu .active                   {color: #fff; background: #18704e; font-weight: bold; padding: 10px 15px; border: 0;}
        #menu I                         {margin-left: 10px;}
        #menu UL                        {width: 100%; background: #fff; display: block; position: static; border: 0; padding: 0;}
        #menu UL LI 		        {padding: 0; margin: 0 0 1px 0 !important;}
        #menu UL A,
        #menu UL A:visited              {color: #222 !important; background: #ccc; padding: 10px 15px; text-decoration: none;}
        #menu UL A:hover,
        #menu UL .active                {color: #fff !important; background: #18704e; font-weight: bold; padding: 10px 15px; border: 0;}

        #carousel                       {margin-top: 0;}
        #container                      {font-size: 80%;}
        #contact .box                   {width: 100%; font-size: 100%; float: none; margin: 0 0 2% 0;}

        #boxes LI H3                    {font-size: 2vw;}
        #boxes LI                       {width: calc(49% - 2px);}
        #boxes LI:nth-child(3n)         {margin-right: 2% !important;}
        #boxes LI:nth-child(2n)         {margin-right: 0 !important;}

        .reference LI                   {display: block;}
        .right                          {float: none;}
        .imgright                       {width: 23%;}

        #footer 		        {margin-top: 0;}
        #footer .box		        {width: 100%; float: none; margin-right: 0 !important; clear: both;}
        #footer .box IMG	        {width: 12%; margin: 0 3% 0 0;}
        #footer .box P                  {font-size: 85%;}
}

@media screen and (max-width: 650px) {
        H2                              {margin: 0 0 20px 0; padding: 10px 20px;}

        #header H1			{left: 3%;}
        #mobilelinks                    {right: 3%;}

        #container                      {font-size: 75%;}

        #boxes LI H3                    {font-size: 2.2vw;}

        .reference                      {padding: 5px 20px 10px 20px; margin-bottom: 10px;}
        .imgright                       {width: 25%;}

        #footer .box H3		        {padding: 20px 0;}
        #copyright SPAN                 {margin-top: 10px;}
}

@media screen and (max-width: 450px) and (orientation: portrait) {
        H2                              {margin: 0 0 10px 0; padding: 5px 10px;}

        #header 			{height: 87px;}
        #header H1			{width: 170px; height: 41px; top: 23px; left: 20px;}
        #header H1 SPAN			{width: 170px; height: 41px;}
        #mobilelinks                    {font-size: 160%; right: 20px;}

        #menu                           {font-size: 110%; top: 87px;}

        #container                      {font-size: 70%; padding: 0 10px;}
        #container UL 		        {margin: 15px 0 5px 15px;}

        #boxes LI                       {width: 100%; float: none; margin: 0 0 10px 0 !important;}
        #boxes LI H3                    {font-size: 4vw; margin: 4vw 3vw !important;}
        #boxes LI A                     {margin: 3vw;}
        #boxes LI:nth-child(3n)         {margin-right: 0 !important;}
        
        .reference                      {padding: 0 10px 5px 10px;}
        .imgright                       {width: 27%;}

        #footer .box H3		        {padding: 15px 0;}
        #footer .box IMG	        {width: 20%;}
        #footer .box P                  {font-size: 75%;}

        #copyright                      {font-size: 65%;}
}

@media screen and (max-width: 250px) and (orientation: portrait) {
        .imgright                       {width: 100%; float: none; margin: 0 0 10px 0;}
}