* {
    box-sizing: border-box;
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
.col-t-1 {width: 16.66%;}
.col-t-2 {width: 33.33%;}
.col-t-3 {width: 50%;}
.col-t-4 {width: 66.66%;}
.col-t-5 {width: 83.33%;}
.col-t-6 {width: 100%;}
}

@media only screen and (min-width: 760px) {
    /* For desktop: */
.col-1 {width: 16.66%;}
.col-2 {width: 33.33%;}
.col-3 {width: 50%;min-height: 230px;}
.col-4 {width: 66.66%;}
.col-5 {width: 83.33%;}
.col-6 {width: 100%;}
}

@media only screen and (orientation : landscape) { -webkit-text-size-adjust:140%;}

[class*="col-"] {
    text-align: center;
    margin: 0px 0px auto;
    float: left;
    padding: 30px;
    
}

@media only screen and (max-width: 760px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}



@media only screen and (min-width: 576px) {
    /* For desktop and iPads: */
.col-1-if {width: 16.66%;}
.col-2-if {width: 33.33%;}
.col-2l-if {width: 33.33%; text-align: left; text-wrap:normal; padding: 5px 10px;}
.col-2r-if {width: 33.33%; text-align: right; padding: 5px 10px;}
.col-3-if {width: 50%;}
.col-3l-if {width: 50%; text-align: left; text-wrap:normal; padding: 5px 10px;}
.col-3r-if {width: 50%; text-align: right; padding: 5px 10px;}
.col-4-if {width: 66.66%;}
.col-4l-if {width: 66.66%; text-align: left; text-wrap:normal; padding: 5px 10px;}
.col-4r-if {width: 66.66%; text-align: right; padding: 5px 10px;}
.col-5-if {width: 83.33%;}
.col-6-if {width: 100%; color:#0047ab;background-color:#FFDE00; padding: 0px 20px;}
   .col-t-6-if {width: 100%;background-color: #FFDE00;padding: 5px 4px;}
.col-6s-if {width: 100%; background-color: #bdd8e7;padding: 10px 10px;}


}
   
 @media only screen and (max-width: 576px) {
    /* For mobile phones: */
   .col-t-2-if {width: 100%;color:#0047ab; background-color:#FFDE00;padding: 0px 10px;}
   .col-t-2s-if {width: 100%;background-color: #bdd8e7;padding: 5px 4px;}
   .col-t-6-if {width: 100%;background-color: #ececec;padding: 5px 4px;}
   .col-2l-if {width: 16.66%; text-align: left; text-wrap:normal; padding: 5px 4px;}
.col-2r-if {width: 16.66%; text-align: right; padding: 5px 4px; height: 40px;}
   .col-3l-if {width: 100%; text-align: left; text-wrap:normal; padding: 5px 4px;}
.col-3r-if {width: 100%; text-align: left; padding: 5px 4px;}
.col-4l-if {width: 83.33%; text-align: left; height: 40px;padding: 5px 4px;}
.col-4r-if {width: 83.33%; text-align: right; padding: 5px 4px;}
.rowcolor1-if {background-color: #fffef7 ;}
.rowcolor2-if {background-color: #fff8c3 ;}
}




.requiredfield {
    font-weight: bold;
    
} 
.requiredfield:after {
    color: red;
    content: '*';
} 



    
.button {
    
    border-radius: 8px;
    padding: 6px 10px;
    margin: 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;    
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
    cursor: pointer;
}

.button2 { /* Launch Page */
    background-color: #f9fbfb;  /* Main Page BG */ 
    color: #234155; /* main page text colour */ 
    border: 1px solid #234155; /* container title text colour */
}

.button2:hover { /* Launch Page */
    background-color: #234155; /* container title text colour */
    color: #f9fbfb; /* main page text colour */
}

/* Create three equal columns that floats next to each other */



 
/*###############################*/


.topnav {
  overflow: hidden;
  background-color: #ffffff; /* nav bar standard fill BG colour */
  color:#ffffff; /* nav bar standard text colour */
  border-radius: 8px 8px 0px 0px;
}

@media screen and (max-width: 600px) {
    .topnav {
    border-radius: 0px 0px 0px 0px;
}
}

.topnav a {
  background-color: #ffffff; /* all Nav-link BG colors EXCEPT Solutions and non-linked area*/
  float: left;
  display: block;
  color: #6f706c; /* Not sure what this does*/
  text-align: center;
  padding: 15px 16px;
  text-decoration: none;
  font-size: 14px;
}

.active {
  background-color: #ffffff; /* Not sure what this does maybe: BG colour behind the LOGIN*/
  color: red;
}

.topnav .icon {
  display: none;
}

.dropdown {
    float: left;
    overflow: hidden;
    
}

.dropdown .dropbtn { /* Solutions tab */
    font-family: Avenir, Futura, Arial;
    font-size: 14px;    
    border: none;
    outline: none;
    color: #6f706c; /* SOLUTIONS Text color on Top Nav only*/
    padding: 15px 16px;
    background-color: #ffffff;    /* SOLUTIONS BG color on Top Nav only*/
    margin: 0;
}

.dropdown-content { /* Solutions tab */
    display: none;
    position: absolute;
    background-color: #ffffff; /* NOT SURE WHAT THIS DOES drop-down BG color on SOLUTIONS tab for both responsive and regular*/
    color: #ffffff    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    background-color: #e6e6e6;
    float: none;
    color: #6f706c; /* NOT SURE WHAT THIS DOES drop-down compressed link colors except for SOLUTIONS*/
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.topnav a:visited {color:#6f706c;background-color: #ffffff;} /* top nav visited colors EXCLUDING SOLUTIONS*/
.topnav a:link {color:#6f706c;background-color: #ffffff} /* Link BGs for new visits*/
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #e6e6e6; /* hi-lite colour behind all top nav, and only on the SOLUTIONS drop-down of compressed menue*/
  color: #ffffff /* topnav hover link color*/
}

.dropdown-content a:hover { /* drop-down  hover link colors */
    background-color: #e6e6e6; /* Not sure what this does */
    color: #ffffff; /* Solutions Tab drop-down link color*/
}

.dropdown:hover .dropdown-content {
    display: block;
    
    
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
    color:#6f706c; /* top-right icon color */
    background-color: #ffffff /*top-nav icon*/;
    margin: 0;
  }
  .topnav a.icon {
    float: right;
    display: block;
    background-color:   ;
    margin: 0;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #ffffff; /* top-right icon when clicked*/
    color:#6f706c;
    margin: 0;
    
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
     color:#6f706c; /* compressed drop down text colors for all except solutions*/
     background-color: #ffffff; /* compressed BG colours*/
     margin: 0;
    
  }
  
   .topnav.responsive a:hover {
    float: none;
    display: block;
    text-align: left;
     color:#ffffff; /* compressed drop down text colors for all except solutions*/
     background-color: #e6e6e6; /* compressed BG colours*/
    margin: 0;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
    color:#6f706c; /* dropdown Solutions title only*/
    margin: 0;
  }
}
/* ################################### */

body {
	max-width:900px;
        color: #6f706c;
	font-family: Helvetica, Avenir, Futura, Arial;
	font-size: 14px;
	background-color: #f7f7f7;
	margin: 0 auto; /* it is good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 10px;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	}

@media only screen and (max-width: 600px) {    
    
    body {
	padding: 0px;
	background-color: #ffffff;
	}
 
    .maincontainer {    
    background-color: #ffffff;  /* Main Page BG */
    /*box-shadow: 2px 2px 10px #888888;*/    
    border-radius: 0px;
    padding: 0px 0px;
    text-decoration: none;  
    font-size: 14px;
    width: 100%;
}

}
@media only screen and (min-width: 600px) {

.maincontainer {    
    
    background-color: #ffffff;  /* Main Page BG */
    box-shadow: 2px 2px 10px #888888;    
    border-radius: 8px;
    padding: 0px 0px;
    text-decoration: none;  
    font-size: 14px;
    max-width: 900px;
}

}

h1 {
    font-size: 160%;
    color: white;
    /*text-shadow: 2px 2px 4px #000000;*/
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 2px 2px 4px #000000;   
}

h2 {
	font-size: 120%;
	color: #ffffff;
}

h2.full {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 2px 2px 4px #000000;
}

h2.subtitle1 {
    font-size: 120%;
	color: #3b97f7;
}

h2.subtitle2 {
    font-size: 120%;
	color: #ff7f0c;
}

h2.subtitle3 {
    font-size: 120%;
	color: #8e31f6;
}


#heading1 {
    background-color:#0047ab;
    color:#ffffff;
    min-height: 100px;
    
  
}

#heading2 {
    background-color:#e04e00;
    color:#ffffff;
    min-height: 100px;

}

#heading3 {
    background-color:#5c00b8;
    color:#ffffff;
    min-height: 100px;
 
}

#heading4 {
    background-color:#ffc400;
    color:#ffffff;
    min-height: 100px;
   
}

A:link {color:#122C3F;text-decoration:none; font-weight:regular; font-family: Avenir, Futura, Arial;}
A:visited {color: #122C3F;text-decoration:none; font-weight:regular; font-family: Avenir, Futura, Arial;}
A:hover {color:#122C3F;text-decoration:underline; font-weight:regular; font-family: Avenir, Futura, Arial;}
A:active {color:#122C3F;text-decoration: none; font-weight:regular; font-family: Avenir, Futura, Arial;}

ul.a {
    list-style-position: outside;
    line-height: 1.6;
}

ul.b {
    list-style-position: inside;
    padding: 0;
    margin: 8px;
    line-height: 1.6;
}

ul.c {
    list-style-position: inside;
    padding: 0;
    margin-right:8px;
    margin-left: 15%;
    text-align: left;
    line-height: 1.6;
}

/*############   Home Page Styling     #############*/

.header { /* This is the Image and Text Properties of the HEADER IMAGE AREA on the homepage*/
    
    text-align: center;
    font-size: 20px;
    background:  url("/images/banner-pic-live5.png");
    background-repeat: no-repeat;
    height: 100%;/*background-size: contain;*/
     background-size: cover;
     
     
    
}   

.subtext1 { /* This is the BIG TEXT on the Home Page*/
    
    color: #e04e00;    
    font-size: 20px;
    text-align: center;
    padding: 20px 20px auto;
    -webkit-text-size-adjust:110%;
}

a.askus:link {color: #0047ab; text-decoration:underline;   font-size:inherit;}
a.askus:visited {color: #0047ab; text-decoration:underline;  font-size: inherit;}
a.askus:hover {color: #0047ab; text-decoration:underline; font-size: inherit;}
a.askus:active {color: #0047ab; text-decoration:underline;  font-size: inherit;}

img {
  
  background-size: contain;
  max-width: 100%;/*background-size: contain;*/
  -webkit-filter: drop-shadow(2px 2px 2px #000);
  filter: drop-shadow(2px 2px 2px #000);
  
  

  

  
}


.column1{ /* This is the Full Service box on the Home page */
    
    /* Prevent background color leak outs */
  -webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;
    border-radius: 16px;
    border: 8px solid #ffffff;
    padding: 4px 4px;
     -webkit-text-size-adjust:110%;
    background-color: #0047ab;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: white;
    font-size: 16px;
}

a.detailsfull:link {color: #ffc400; text-decoration:none; text-shadow:none;font-weight:bolder; font-family: Avenir, Futura, Arial; font-size: smaller;}
a.detailsfull:visited {color: #ffc400;text-decoration:none; text-shadow:nonefont-weight:regular;font-family: Avenir, Futura, Arial;font-size: smaller;}
a.detailsfull:hover {color: #ffc400;text-decoration:underline; text-shadow:none; font-weight:regular; font-family: Avenir, Futura, Arial;font-size: smaller;}
a.detailsfull:active {color: #ffc400;text-decoration: underline;text-shadow:none; font-weight:regular; font-family: Avenir, Futura, Arial;font-size: smaller;}


.column2 { /* This is the A-La-Carte box on the Home page */
    
    /* Prevent background color leak outs */
  -webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;
  border-radius: 16px;
    border: 8px solid #ffffff;
    padding: 4px 4px;
     -webkit-text-size-adjust:110%;
    background: #e04e00;
    background-repeat: no-repeat;
     background-size: 100% 100%;
     color: white;
    font-size: 16px;
}

a.detailsalc:link {color: #ffc400;text-decoration:none; text-shadow:none;font-weight:bolder; font-family: Avenir, Futura, Arial; font-size: smaller;}
a.detailsalc:visited {color:#ffc400;text-decoration:none; text-shadow:none;font-weight:regular;font-family: Avenir, Futura, Arial;font-size: smaller;}
a.detailsalc:hover {color: #ffc400;text-decoration:underline; text-shadow:none;font-weight:regular; font-family: Avenir, Futura, Arial;font-size: smaller;}
a.detailsalc:active {color: #ffc400;text-decoration: underline; text-shadow:none;font-weight:regular; font-family: Avenir, Futura, Arial;font-size: smaller;}

.column3 { /* This the the Partner Program box on the home page*/
   
    /* Prevent background color leak outs */
  -webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;
  border-radius: 66px;
    border: 44px solid #ffffff;
    padding: 14px 14px;
     -webkit-text-size-adjust:110%;
    background: #6faaeb;
    background-repeat: no-repeat;
     background-size: 100% 100%;
     color: #0047ab;
    font-size: 16px;
}

a.contactus:link {color: #ffc400;text-decoration:none; font-weight:bolder; font-family: Avenir, Futura, Arial;}
a.contactus:visited {color: #ffc400;text-decoration:none; font-weight:bolder;font-family: Avenir, Futura, Arial;}
a.contactus:hover {color: #ffc400;text-decoration:underline; font-weight:regular; font-family: Avenir, Futura, Arial;}
a.contactus:active {color: #ffc400;text-decoration: underline; font-weight:regular; font-family: Avenir, Futura, Arial;}

.footer { /* This is the Micro-Site Options box on the Home Page*/
    text-align: left;
    /* Prevent background color leak outs */
  -webkit-background-clip: padding-box;
  -webkit-text-size-adjust:110%;
  -moz-background-clip:    padding; 
  background-clip:         padding-box;
    border-radius: 16px;
    border: 8px solid #ffffff;
    padding: 14px 14px;
    background: #5c00b8;
    color: white;
    font-size: 16px;    
}

a.microsite:link {color: #ffc400;text-decoration:none; font-weight:bolder; font-family: Avenir, Futura, Arial;}
a.microsite:visited {color: #ffc400;text-decoration:none; font-weight:bolder;font-family: Avenir, Futura, Arial;}
a.microsite:hover {color: #ffc400;text-decoration:underline; font-weight:regular; font-family: Avenir, Futura, Arial;}
a.microsite:active {color: #ffc400;text-decoration: underline; font-weight:regular; font-family: Avenir, Futura, Arial;}


/*############   End Home Page Styling     #############*/

/*############   Full Services Page Styling     #############*/

.fullservice {  /*   Controls the Banner of the Full Service Page*/
        
    background-color: #8fc7ff;
    text-align: center;
     margin: 0px auto ;
    padding: 10px;
}

@media only screen and (max-width: 600px) {
   .containerfull {    
    color: #ffffff;
    background-color: #0047ab;  /* Main Page BG */
    /*box-shadow: 2px 2px 10px #888888;    
    border-radius: 8px;*/
    padding: 0px 0px;
    text-decoration: none;  
    font-size: 14px;
    max-width: 900px;
} 
    
}

@media only screen and (min-width: 600px) {   

.containerfull {    
    color: #ffffff;
    background-color: #0047ab;  /* Main Page BG */
    box-shadow: 2px 2px 10px #888888;    
    border-radius: 8px 8px 0px 0px;
    padding: 0px 0px;
    text-decoration: none;  
    font-size: 14px;
    max-width: 900px;
    
}

}
.subtext2 { /* This is the BIG TEXT on the Full Services Page*/
    
    color: #ffffff;    
    font-size: 16px;
    text-align: center;
    padding: 20px 20px auto;
    -webkit-text-size-adjust:100%;
}

.column1a { /* This is the left bubble on Full Service Page */
    
    /* Prevent background color leak outs */
  -webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;
    /*border-radius: 16px;
    border: 8px solid #0047ab;
    padding: 4px 4px;*/
     -webkit-text-size-adjust:110%;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #0047ab;
    font-size: 16px;
    
}

.column1b { /* This is the right bubble on Full Service Page */
    
    /* Prevent background color leak outs */
  -webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;
    /*border-radius: 16px;
    border: 8px solid #0047ab;
    padding: 4px 4px;*/
     -webkit-text-size-adjust:110%;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #0047ab;
    font-size: 16px;
}

/*############   End Full Services Page Styling     #############*/

/*############   A-la-Carte services Page Styling     #############*/

.alacarteservice { /*   Controls the Banner of the A-la-carte Service Page*/
    
    color: #122C3F;    
    background-color: #ffa14d;
    text-align: center;
    margin: 0px auto ;
    padding: 10px;   
}

@media only screen and (max-width: 600px) {

.containeralc {    
    color: #ffffff;
    background-color: #e04e00;  /* Main Page BG */
    /*box-shadow: 2px 2px 10px #888888;    
    border-radius: 8px;*/
    padding: 0px 0px;
    text-decoration: none;  
    font-size: 14px;
    max-width: 900px;
}
}

@media only screen and (min-width: 600px) {
   .containeralc {   
    color: #ffffff;
     background-color: #e04e00;  /* Main Page BG */
    box-shadow: 2px 2px 10px #888888;    
    border-radius: 8px 8px 0px 0px;
    padding: 0px 0px;
    text-decoration: none;  
    font-size: 14px;
    max-width: 900px;
}
}  
    
.subtext3 { /* This is the BIG TEXT on the Al-la-Carte Page*/
    
    color: #ffffff;    
    font-size: 16px;
    text-align: center;
    padding: 20px 20px auto;
    -webkit-text-size-adjust:100%;
}

.column2a { /* This is the left bubble on A-la-Carte Page */
    
    /* Prevent background color leak outs */
  -webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;
  /*border-radius: 16px;
    border: 8px solid #e04e00;
    padding: 4px 4px;*/
     -webkit-text-size-adjust:110%;
    background: #ffffff;
    background-repeat: no-repeat;
     background-size: 100% 100%;
     color: #e04e00;
    font-size: 16px;
}

.column2b { /* This is the right bubble on the A-La-Carte Page */
    
    /* Prevent background color leak outs */
  -webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;
  /*border-radius: 16px;
    border: 8px solid #e04e00;
    padding: 4px 4px;*/
     -webkit-text-size-adjust:110%;
    background: #ffffff;
    background-repeat: no-repeat;
     background-size: 100% 100%;
     color: #e04e00;
    font-size: 16px;
}



/*############   End A-La-Carte Services Page Styling     #############*/

/*############   Micro-Site Options Page Styling     #############*/

.micrositeoptions { /*   Controls the Banner of the Micro-site Options Page*/
    color: #94401a;    
    background-color: #bb92f6;
    text-align: center;
     margin: 0px auto ;
    padding: 10px;  
}

@media only screen and (max-width: 600px) {
.containermso {    
    color: #ffffff;
    background-color: #5c00b8;  /* Main Page BG */
    /*box-shadow: 2px 2px 10px #888888;    
    border-radius: 8px;*/
    padding: 0px 0px;
    text-decoration: none;  
    font-size: 14px;
    max-width: 900px;
}
}

@media only screen and (min-width: 600px) {
   .containermso {    
    color: #ffffff;
    background-color: #5c00b8;  /* Main Page BG */
    box-shadow: 2px 2px 10px #888888;    
    border-radius: 8px 8px 0px 0px;
    padding: 0px 0px;
    text-decoration: none;  
    font-size: 14px;
    max-width: 900px;
}
} 
    
.subtext4 {  /* This is the BIG TEXT on the Micro-Sites Options Page*/
    
    color: #ffffff;    
    font-size: 16px;
    text-align: center;
    padding: 20px 20px auto;
    -webkit-text-size-adjust:100%;
}

.footerb { /* This is the box containing the individual list of micro-site options on the Micro-site Options Page*/
        
    text-align: left;
    /* Prevent background color leak outs */
  -webkit-background-clip: padding-box;
  -webkit-text-size-adjust:100%;
  -moz-background-clip:    padding; 
  background-clip:         padding-box;
    /*border-radius: 16px;
    border: 8px solid #5c00b8;*/
    padding: 0px 10px auto;
    background: #ffffff;
    color: #5c00b8;
    font-size: 16px;   
}
/*############   End Micro-Site Options Page Styling     #############*/

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}