@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

html,body	                {margin: 0; padding: 0; width: 100%; height: 100%;}
body                        {min-width: 320px;}
@-ms-viewport               {width: device-width;}
:focus		                {outline: none;}

html                        {box-sizing: border-box;}
*, *:before, *:after        {box-sizing: inherit;}

body, p, li, h2, h3         {font-family: 'Open Sans', Arial, Helvetica, sans-serif;}
body                        {font-size: 16px;}
a                           {font-size: 16px; font-weight: bold;}
p, li                       {font-size: 16px;}
h1                          {font-size: 28px;}
h2                          {font-size: 20px;}

a                           {text-decoration: none;}

.alignr                     {text-align: right;}

ul                          {margin: 0; padding: 0; list-style: none;}
ul.bulletlist               {list-style: disc inside;}
ul.nobulllist               {}
ul.flexlist                 {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; max-width: 640px; margin: auto;}

li                          {margin: 0; padding: 0;}
ul.bulletlist li            {margin: 10px  0px 10px 40px;}
ul.nobulllist li            {margin: 10px  0px 10px  0px;}
ul.flexlist   li            {margin:  5px 20px  5px 20px; font-weight: bold;}
ul.flexlist   li span       {white-space: nowrap;}
ul.flexlist   li span.light {white-space: normal; font-weight: normal; font-size: 14px;}

div  p:first-child          {margin-top: 0;}
div h1:first-child          {margin-top: 0;}
div h2:first-child          {margin-top: 0;}
div  p:last-child           {margin-bottom: 0;}


#header                     {background: #324c62;}
#header .inner              {padding: 30px; max-width: 1280px; margin: auto;
                             display: flex; justify-content: center; align-items: center;}
#header .inner h1           {color: #90b8bd; font-weight: normal; text-align: center; margin: 0; text-transform: uppercase; letter-spacing: 0px;
                             font-family: "Times New Roman", Times, serif; font-weight: normal; font-size: 32px;}
#header .inner p            {color: #90b8bd; font-weight: normal; text-align: center; margin: 0; text-transform: uppercase; letter-spacing: 0px;
                             font-family: "Times New Roman", Times, serif; font-weight: normal; font-size: 14px;}
#header .inner div img      {max-height: 128px; padding-left: 20px;}

@media screen and (min-width: 640px) {
    #header .inner h1       {letter-spacing: 1px; font-size: 48px;}
}



#topmenu        {background: #b4c6e7}
#topmenu .inner {padding: 10px; max-width: 1280px; margin: auto; text-align: center;}
#topmenu ul     {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
#topmenu li a   {padding: 10px 10px; display: block; color: #fff; font-weight: bold; ext-transform: uppercase; font-size: 14px; etter-spacing: 1px; color: #444;}
#topmenu li a:hover {color: #000; text-shadow: -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff, 1px 1px 1px #fff;}



#bannerbody                 {width: 100%; height: 400px; margin: 10px auto; position: relative;}
#bannerbody.half            {height: auto;  min-height: 288px;                                       }
#bannerdiv                  {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
#bannerdiv .dimmmer         {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.9);}
#bannerdiv .bannerdiv       {width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1.0s;}
#bannerdiv .bannerdivdimmer {width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 1; background: radial-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0)); z-index: 3;}

#bannerbody .caption        {width: 100%; max-width: 1024px; min-height: calc(100% - 88px); margin: auto; padding: 32px; position: relative; z-index: 4;}
#bannerbody .caption        {display: flex; justify-content: center; align-items: center; flex-direction: column; flex-wrap: wrap;}
#bannerbody .caption h2, #bannerbody .caption p
                            {margin: 20px 0; padding: 0; line-height: 110%; text-align: center;}
#bannerbody .caption h2     {font-size: 48px; color: #ffffff; text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;}
#bannerbody .caption p      {font-size: 24px; color: #ffffff; text-shadow: 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000, -1px -1px 1px #000;}

#bannerbody .caption h2     {text-transform: uppercase; letter-spacing: 1px; font-family: "Times New Roman", Times, serif; font-weight: normal; font-size: 48px;}

#bannerbody .scrolldown     {position: relative; z-index: 4; display: block; text-align: center; padding: 20px;}
#bannerbody .scrolldown div {width: 48px; height: 48px; margin: auto; cursor: pointer;
                             border: 3px solid #fff; border-radius: 24px; background: url('images/downarrow.png') no-repeat center / contain;}

#maincontact .scrollup      {padding: 20px;}
#maincontact .scrollup div  {width: 48px; height: 48px; margin: auto; cursor: pointer;
                             border: 3px solid #fff; border-radius: 24px; background: url('images/uparrow.png') no-repeat center / contain;}


#contentHeader              {background: #324c62; padding: 24px; text-align: center; font-family: "Times New Roman", Times, serif;
                             font-size: 28px; font-weight: normal; color: #90b8bd; text-transform: uppercase;}


#maincontent                {background: #324c62;}
#maincontent .inner         {padding: 40px 20px; max-width: 1280px; margin: auto; text-align: center;}
#maincontent p              {color: #fff;}
#maincontent a              {color: #ff0;}
#maincontent li             {color: #fff;}
#maincontent h2             {color: #fff; margin-top: 40px;}



/* Mid background */
#subcontent                 {background: #b4c6e7;}
#subcontent.light           {background: linear-gradient(to bottom, #eee, #ccc);}
#subcontent.dark            {background: linear-gradient(to bottom, #222, #444);}

#subcontent .midwidth       {max-width: 1280px; margin: auto;}

#subcontent .inner          {padding: 20px 5px; text-align: center;}
#subcontent p               {color: #444;}
#subcontent a               {color: #222;}
#subcontent li              {color: #444;}
#subcontent h1              {color: #000;}
#subcontent h2              {color: #111;}

#subcontent.dark p          {color: #fff;}
#subcontent.dark a          {color: #ddd;}
#subcontent.dark li         {color: #fff;}
#subcontent.dark h1         {color: #fff;}
#subcontent.dark h2         {color: #fff;}

#subcontent.smaller p      {font-size: 13px;}
#subcontent.smaller a      {font-size: 13px;}
#subcontent.smaller li     {font-size: 13px;}
#subcontent.smaller h1     {font-size: 18px;}
#subcontent.smaller h2     {font-size: 14px;}

#subcontent .captions           {display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap;}
#subcontent .captions.center    {justify-content: center; align-items: center;}
#subcontent .captions.top       {align-items: flex-start;}
#subcontent .captions.no-wrap   {flex-wrap: nowrap;}




#maincontact                {background: #124;}
#maincontact .inner         {padding: 0px 20px 20px 40px; max-width: 1280px; margin: auto; text-align: center;}
#maincontact p              {color: #fff;}
#maincontact a              {color: #90b8bd; font-weight: normal;}
#maincontact li             {color: #fff;}
#maincontact h2             {color: #fff; margin-top: 0;}
#maincontact span           {white-space: nowrap;}


@media screen and (min-width: 640px) {
    #subcontent .inner          {padding: 40px 20px;}
}

#footer                     {background: #111;}
#footer .inner              {padding: 40px 20px; max-width: 1280px; margin: auto; text-align: center;}
#footer p                   {color: #aaa;}
#footer li                  {color: #aaa;}
#footer h2                  {color: #aaa; margin-top: 0; font-size: 16px;}




/*  FORM STYLES ***************************************************************************************************************/

#contform                {text-align: left; max-width: 640px; argin: auto}

#contform input,
#contform select,
#contform button,
#contform textarea          {font-size: 14px;}
#contform label             {font-size: 14px; line-height: 18px; color: #222; font-weight: normal; min-width: 140px;}
#contform .option label     {font-size: 14px; line-height: 18px; color: #222; font-weight: normal; min-width: auto; margin-left: 6px;}
#contform .smaller          {font-size: 11px; line-height: 18px; color: #222;}
#contform .conterror        {font-size: 12px; line-height: 12px; color: #f42; margin-top: 2px;}
#contform .redstar	        {font-size: 14px; line-height: 18px; color: #f42;}

#contform input[type="text"], #contform input[type="email"], #contform input[type="number"],
#contform input[type="date"], #contform input[type="file"], #contform select,
#contform textarea          {width: 100%; height: 100%; padding: 5px; border: 1px solid #d4d0ba; background: #fff;}
#contform input[type="date"]
                            {max-width: 200px;}

#contform input[type='text']:focus, #contform input[type='email']:focus, #contform input[type='number']:focus,
#contform input[type='date']:focus, #contform input[type="file"]:focus, #contform select:focus,
#contform textarea:focus    {border: 2px solid #06c;}

#contform select            {min-width: 50%;}
#contform textarea          {overflow-y: auto;}
#contform button            {height: 30px;}

#contform .statinput        {width: 100%; height: 100%; padding: 5px; border: 1px solid #d4d0ba; background: #f4f0da;}
#contform .statformrow      {display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start;} /* Main Form */
#contform .statlabel        {display: flex; flex-wrap:    wrap; justify-content: space-between; align-items: center;}
#contform .statlabel        {flex: 1; min-width: 160px; min-height:  30px;}
#contform .statuserinput    {flex: 3;}
#contform .statinput        {flex: 1 100%; height:  30px;}

#contform .contformrow      {display: flex; flex-wrap:   wrap; justify-content: space-between; align-items: flex-start;} /* Main Form */
#contform .contlabel        {display: flex; flex-wrap:   wrap; justify-content: space-between; align-items: center;}     /* Label and small text */
#contform .contuserinput    {display: flex; flex-wrap:   wrap; justify-content: space-between; align-items: center;}     /* Whole input area */
#contform .contdate         {display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center;}     /* Date and Calendar input */
#contform .option           {display: flex; flex-wrap: nowrap; justify-content: flex-start;    align-items: center;}     /* Each Radio/Checkbox */

#contform                   {width: 100%;}
#contform .contformrow      {width: 100%;}

#contform .contlabel        {flex: 1 25%; min-width: 160px;}
#contform .contuserinput    {flex: 3 75%;}
#contform .spacer           {flex: 1 100%; height:  20px;}

#contform .conterror        {flex: 1 100%; height:  auto;}
#contform .continput        {flex: 1 100%; height:  30px;}
#contform .contselect       {flex: 1 100%; height:  32px;}
#contform .conttarea        {flex: 1 100%; height: 120px;}
#contform .contdate         {flex: 1 100%; height:  30px; position: relative;}

#contform .option           {flex: 1 50%; height: 18px; min-width: 136px;}

#contform #captchaimg       {max-height: 72px; margin: 0 20px 2px 1px; border: 4px solid #eee; outline: 1px solid #d4d0ba;}
#contform #refresh          {align-self: flex-end; cursor: pointer;}
#contform #refresh:hover    {color: #f42;}