/**** Avanti site & homepage stylesheet ***/

* {
  -webkit-box-sizing: border-box;
  /*Sets up a style to apply to every element which includes the border and padding*/
  /*in the actual size of the box rather than adding to it's size when a border or padding is added.*/
  /*This makes it much easier to control sizing for styling*/
  -moz-box-sizing: border-box;  
  -o-box-sizing: border-box;  
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

/*div {
  border-size :0.5px;
  border-style: solid;
}*/

a img {
    border: none;
    outline :none;
}

.siteTextColor {
  color: #505050;
}

.siteHeaderTextColor {
  color: #229E8B;
}

.siteFontBold {
  font-weight: bold!important;
}

.siteFontCenter {
  text-align: center!important;
}

.siteCenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.siteLargeHeaderFont {
  font-size: 2.2em;
  font-weight: normal!important;
}

.siteHeaderFont {
  font-size: 2.0em;
  font-weight: normal;
}

.siteMediumSmallHeaderFont {
  font-size: 1.8em;
  font-weight: normal;  
}

h2.siteSmallHeaderFont {
  font-size: 1.4em;
  font-weight: normal;
}

.siteSmallHeaderFont {
  font-size: 1.6em;
  font-weight: normal;
}

.siteSubHeaderFont {
  font-size: 1.35em;
  font-weight: normal;
}

.siteLargeTextFont {
  font-size: 1.25em; 
  font-weight: normal;
}

.siteMediumTextFont {
  font-size: 1.175em; 
  font-weight: normal;
}

.siteTextFont {
  font-size: 1.1em;
  font-weight: normal;
}

.siteSmallTextFont {
  font-size: 0.85em;
  font-weight: normal;
}


.avantiPage {
  font-family: 'Inter', 'Lato', sans-serif;
  /*sets the default settings for the entire page*/
  font-size: 18px;
  color: #272727;
  background-color: #ffffff;
  margin: 0px;
}

.businessClassPage {
  font-family: 'Inter', sans-serif;
  /*sets the default settings for the entire page*/
  font-size: 18px;
  color: #ffffff;
  background-color: #2a2a2a;
  margin: 0px;  
}

.mainArea {
  /*sets the width and margins of the main area of the page display*/
  margin: 0px auto;
  height :auto;
  /*min-height: 2500px;*/
}

.headerFixed {
  top :0px;
  width :100%;
  position: fixed;
  min-width: 100%;
  min-height :75px;
  z-index :100000;
  border-bottom: 1px solid #DEE0DE;
}

.headerContainer {
  /*sets up a container for the page header covering the full width of the page */
  /*margin-top: 10px;*/
  padding-top :10px;
  padding-bottom :10px;
  left: 0;
  right: 0;
  width :100%;
  min-width: 100%;
  max-width: 100%;
  min-height: 80px;
  background-color: #ffffff;
}

.menuOptions {
  list-style-type: none;
}

.menuOptions li {
  /*settings for the navigation menu options*/
  display: inline;
  font-weight: bold;
  padding-right: 17px;   /* */
}

h2.headline {
  color : #1D102E;
  font-size : 2.4rem;
}

/*style rules for all screen widths upto 518px ie smartphones*/

@media (max-width: 537px) {
  
  .logo {
    /*sets the positioning of the logo image*/
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    padding-left: 10px;
  }
  
  .logoCaption {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    font-weight: 600;
    padding: 0px;
    padding-left: 3px;
    font-size: 1.05em;
    text-align :left;
    letter-spacing: 0.65px;
  }

  .logoimage {
   
  } 
  
  .navigation {
    min-width: 100%;
    max-width: 100%;
    margin: 0;
    margin-top: 5px;
    padding: 0;
    left: 0;
    display: none;
    float: none;
    min-height: 0;
    -webkit-transition: min-height 2s ease-in-out;
    transition: min-height 2s ease-in-out;
  }
  
  .menuOptions {
    /*settings for the navigation menu*/
    line-height: 35px;
    width: 100%;
    text-align: center;
    background-color: #16A69E;
    margin: 0;
    padding: 0;
  }
  
  .menuOptions li {
    /*settings for the navigation menu options*/
    display: block;
    margin: 0;
    left: 0;
    padding: 0px;
    width: 100%;
  }
  
  /*settings for the navigation links*/
  .menuOptions a {    
    color: #ffffff;
    width: 100%;
    border-top: 1px;
    border-bottom: 1px;
    border-color: #ffffff;
    border-radius: 15%;
    -webkit-transition: color 300ms ease-in 30ms;
    -moz-transition: color 300ms ease-in 30ms;
    -o-transition: color 300ms ease-in 30ms;
    transition: color 300ms ease-in 30ms;
  }
  
  #selectedMenuOption {
    /*settings for the navigator option of the current page*/
    color: #000000;
  }
  
  /*add a bar at the top when menu options are hovered over*/
  .menuOptions a:hover {    
    color: #F6C449; 
  }
  
  .menuDropDown {
    display: inline;
    float: right;
    margin: auto;
    margin-right: 10px;
    padding: 5px;
    cursor: pointer;
  }

  .headlineContainer {
    margin-top :80px;
    height : 600px;
  }

  .freeTrialHeader {    
    color :#10334a !important;
  }

  .freeTrialHeader:hover {                 
      color :#332349 !important;
      
  }

}


@media (max-width: 480px) {

  /*.headlineContainer {    
    left: 0;
    right: 0;
    min-width: 100%;
    max-width: 100%;
    min-height: 240px;    
    background-color: #DEE0DE;
    margin-top :80px;
  }*/
  
  .mainHeadline {
    /*settings for the main headline section, excluding the page header*/
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
  }
  
  h1.headline {
    /*settings the page headline text*/
    text-align: center;
    font-size: 1.6em;
    color: #272727;
    padding-top: 20px;
    margin-top: 0px;
  }
  
  .pageHeader {
    /*sets up the page header*/
    width: 100%;
    min-height: 50px;
    padding-bottom: 0;
    margin: 0px auto;
  }

}


/************************************************/

/*style rules for very narrow screen sizes*/

@media (max-width: 321px) and (min-width: 200px) {
  
  .trialOptions a {
    /*settings for the links for the trial buttons*/
    color: #ffffff;
    text-decoration: none;
    padding: 10px 10px;
    min-width: 75px;
    border-radius: 15px;
    text-align: center;
    margin-right: 12px;
    font-size: 70%;
    font-weight: bold;
    display :block;
  }
  
  ul.trialOptions {
    /*settings for the trial options link*/
    list-style-type: none;
    margin-top: 40px;
    /*padding-left: 5px;*/
  }

  #trialTryIt {
    margin-top:10px;
  }
}


@media (max-width: 510px) {

  .logoCaption {    
    font-size: 1em;
  }

}

@media (max-width: 480px) {

  .logoimage {
   
  }

}

@media (max-width: 445px) {

  .logoimage {
   
  }

}


@media (max-width: 425px) {

.logoCaption {    
    font-size: 1em;
  }

}


@media (max-width: 390px) {

.logoCaption {    
    font-size: 0.95em;
  }

  .logoimage {
    
  }

}


@media (max-width: 350px) {

.logoCaption {    
    font-size: 1em;
  }

  .logoimage {
    
  }

}


@media (max-width: 325px) {

.logoCaption {    
    font-size: 0.9em;
  }

}


@media (max-width: 300px) {
  .logoimage {
   
  }
}


@media (max-width: 285px) {
  .logoimage {
   
  }
}


@media (max-width: 260px) {
  .logoimage {
    
  }
}


@media (max-width: 240px) {
  .logoimage {
    
  }
}


@media (max-width: 225px) {
  .logoimage {
    
  }
}




/************************************************/

/*style rules for smartphone screens excluding very narrow screen sizes*/

@media (min-width: 322px) and (max-width: 537px) {
  
  ul.trialOptions {
    /*settings for the trial options link*/
    list-style-type: none;
    margin-top: 40px;
    padding-left: 5px;
  }
  
  .trialOptions a {
    /*settings for the links for the trial buttons*/
    color: #ffffff;
    text-decoration: none;
    padding: 10px 10px;
    min-width: 90px;
    border-radius: 15px;
    text-align: center;
    margin-right: 13px;
    font-size: 78%;
    font-weight: bold;
  }
}



/************************************************/

/*style rules common to all screen sizes above 460px ie where we can display the navigation without needing a hidden menu*/

@media (min-width: 538px) {
  
  .menuOptions a {                        /*settings for the navigation links*/
    color : #000000;
    -webkit-transition: color, border-top-color, border-top-style, border-top-width 150ms ease-in 30ms;
    -moz-transition: color, border-top-color, border-top-style, border-top-width 150ms ease-in 30ms;
    -o-transition: color, border-top-color, border-top-style, border-top-width 150ms ease-in 30ms;
    transition: color, border-top-color, border-top-style, border-top-width 150ms ease-in 30ms;
  }
                  
  .navMenuOptions a:hover {                  /*add a bar at the top when menu options are hovered over*/
    color :#707070;
    border-top-color: #F6C449;
    border-top-style: solid;
    border-top-width: thick;
  }
                  
  #selectedMenuOption {                   /*settings for the navigator option of the current page*/
    color : #2980b9;
  }
  
  .menuDropDown {
    display: none;
  }


  .headerFixed {
    opacity :0.94;
  }

  .visible-only-on-mobile {
    display :none;
  }

  .freeTrialHeader {
    /*background-color: #5399c7!important;*/
    margin-left :5px;
    border-color :#1e1826;
    border-width :2px;
    border-radius :10px;
    border-style: solid;
    font-size: 1.15em!important;
    color :#ffffff!important;
    text-align: center!important;
    padding-left :10px;
    padding-right :10px;
    padding-top :8px!important;  
    padding-bottom :8px!important;
    min-height :46px;
    min-width : 140px;
    background-color: rgb(0 0 0 / 0.1); 

  }

  .freeTrialHeader:hover {                 
      color :#ffffff!important;
      background-color: #8c5acc;
      /*border-width :2px;*/
      border-color :#000000;
  }
  
}

@media (max-width: 537px) {

    .not-visible-on-mobile {
      display :none!important;
    }

    .wider-on-mobile {
      width: 85%!important;
    }

}


@media (max-width: 800px) and (min-width: 538px) {
    .headlineContainer {
      margin-top :140px;
      /*background-image: url("../images/headerimage959.jpg");*/
    }
}


@media (max-width: 900px) and (min-width: 801px) {
    .headlineContainer {
      margin-top :140px;
      /*background-image: url("../images/headerimage1100.jpg");*/
    }
}


@media (max-width: 1064px) and (min-width: 901px) {
  .headlineContainer {
      margin-top :140px;
      /*background-image: url("../images/headerimage1380.jpg");*/
    }
}


@media (max-width :800px) {
  h2.subHeadline2 {
    font-size: 1.3em!important;
    color: #272727;
  }
}


/**************************************************************/

/*styles rules for tablets and phones in landscape orientation*/

@media (max-width: 1064px) and (min-width: 538px) {

  .navigation {
    display: block;
    float: none;
    font-size: 90%;
    padding-top: 0px;
    padding-left: 10px;
    padding-bottom: 0px;
  }

  .logo {
    /*sets the positioning of the logo image*/
    float: left;
    padding-left: 10px;
  }
  
  .pageHeader {
    /*sets up the page header*/
    width: 100%;
    min-height: 50px;
    padding-bottom: 0px;
    margin: 0px auto;
  }

  .headlineContainer {
    margin-top :140px;
  } 

  .menuOptions {
    /*settings for the navigation menu*/
    line-height: 35px;
    width: auto;
    display: block;
    margin-bottom: 0;
  }
  
  .menuOptions li {
    /*settings for the navigation menu options*/
    padding-right: 10px;
    display: inline;
    background-color: #ffffff;
    color: #000000;
    text-align: left;
  }
  
  .logoCaption {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: left;
    font-weight: 600;
    padding: 0px;
    padding-left: 3px;
    letter-spacing: 0.65px;
    font-size :1.1em;
  }

}


@media (max-width :790px) and (min-width :481px) {
    .mainHeadline {
      width: 95%;
    }
}


@media (max-width :1064px) and (min-width :791px) {
    .mainHeadline {
      width: 90%;
    }
}


@media (max-width: 1064px) and (min-width: 480px) {
  
  .mainHeadline {
    /*settings for the main headline section, excluding the page header*/
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
  }
  
    
  ul.trialOptions {
    /*settings for the trial options link*/
    list-style-type: none;
    margin-top: 40px;
    padding-left: 5px;
  }
  
  ul.menuOptions {
    /*settings for the navigation menu*/
    list-style-type: none;
    padding-left: 0;
  }
  
  .headlineContainer {
    /*sets up a container for the headline section of the page for the full width*/
    left: 0;
    right: 0;
    min-width: 100%;
    max-width: 100%;
    height: calc(100vh — 50px);
    /*max-height: 600px*/;
    /*margin-top: 0px;*/
    /*background-image: url("../images/headerimage.jpg");*/
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  
  .mainHeadline {
    /*settings for the main headline section, excluding the page header*/
    /*width: 100%;*/
    /*margin-left :auto;
                    margin-right :auto;*/
    margin: 0 auto;
  }
  
  h1.headline {
    /*settings the page headline text*/
    text-align: center;
    font-size: 1.6em;
    color: #272727;
    position: relative;
    padding-top: 20px;
    padding-left: 120px;
    padding-right: 120px;
    margin-top: 0px;
  }

  h2.headline {
    /*width: 80%;*/ 
    text-align: center;
    padding-top: 10px;
    margin-top: 0px;
  }
  
  .trialOptions a {
    /*settings for the links for the trial buttons*/
    color: #ffffff;
    text-decoration: none;
    padding: 10px 10px;
    min-width: 160px;
    border-radius: 10px;
    text-align: center;
    margin-right: 30px;
    font-size: 87%;
    font-weight: bold;
  }
  
  ul.trialOptions {
    /*settings for the trial options link*/
    list-style-type: none;
    margin-top: 53px;
  }
        
}


@media (max-width :389px) {
  
  .testimonialArea {
    /*Sets up the area for the testimonials to be shown centred on the page*/
    width: 100%;
    min-height: 355px;
    max-height: 355px;
    margin-left: 1px;
    margin-right: 1px;
    /*margin-top: 15px;*/
    display: block;
  }
  
  .quoteArea {
    /*sets up an area to display the actual testimonial quotes*/
    display: block;
    padding-top: 22px;
    width: 99%;
    margin-left: 0;
    margin-right: 0;
    min-height: 255px;
    max-height: 255px;
    text-align: center;
  }
  
  .quoteHeadline {
    /*settings for the headline of each testimonial quote*/
    display: block;
    margin: 5px;
    font-size: 1.4em;
    font-weight: normal;
    min-height: 55px;
    max-height: 55px;
  }
  
  .quoteCustomer {
    /*settings for the customer name for each testimonial quote*/
    display: block;
    font-size: 0.9em;
    font-weight: bold;
    padding: 0px;
    min-height: 80px;
    max-height: 80px;
  }
  
  .testimonialArea h3 {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding-top: 5px;
    min-height: 50px;
    max-height: 50px;
   
  }  
    
  .testimonialContainer {
    /*Sets up a container for the testimonial section - full page width */
    background-color: #DEE0DE;
    min-height: 385px;
    max-height: 385px;
  }
  
}


@media (min-width :390px) {
  
  .quoteHeadline {
    /*settings for the headline of each testimonial quote*/
    display: block;
    margin: 5px;
    font-size: 1.4em;
    font-weight: normal;
    min-height: 30px;
    max-height: 30px;
  }
  
  .quoteCustomer {
    /*settings for the customer name for each testimonial quote*/
    display: block;
    font-size: 0.9em;
    font-weight: bold;
    padding: 0px;
    min-height: 45px;
    max-height: 45px;
  }
  
  .testimonialArea h3 {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding-top: 20px;
    min-height: 25px;
    max-height: 25px;
  }
  
  .testimonialContainer {
    /*Sets up a container for the testimonial section - full page width */
    background-color: #DEE0DE;
    min-height: 270px;
    max-height: 270px;
  }
}


@media (min-width :390px) and (max-width :700px) {
  
  .testimonialArea {
    /*Sets up the area for the testimonials to be shown centred on the page*/
    width: 100%;
    min-height: 300px;
    max-height: 300px;
    margin-left: 3px;
    margin-right: 3px;
    /*margin-top: 15px;*/
    display: block;
  }
  
  .quoteArea {
    /*sets up an area to display the actual testimonial quotes*/
    display: block;
    padding-top: 22px;
    width: 99%;
    margin-left: auto;
    margin-right: auto;
    min-height: 170px;
    max-height: 170px;
    text-align: center;
  }
  
  .testimonialArea h3 {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding-top: 20px;
    min-height: 25px;
    max-height: 25px;
  }
   
}


@media (min-width: 701px) and (max-width: 1064px) {

  .testimonialArea {
    /*Sets up the area for the testimonials to be shown centred on the page*/
    width: 90%;
    min-height: 300px;
    max-height: 300px;
    margin-left: auto;
    margin-right: auto;
    /*margin-top: 30px;*/
    display: block;
  }
  
  .quoteArea {
    /*sets up an area to display the actual testimonial quotes*/
    display: block;
    padding-top: 40px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    min-height: 170px;
    max-height: 170px;
    text-align: center;
  }
  
  .testimonialArea h3 {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding-top: 20px;
    min-height: 25px;
    max-height: 25px;
  }
  
}


@media (max-width: 480px) {
  .headlineContainer {
    /*background-image: none;*/ 
    /*background-image: url("../images/headerimagesm.jpg");*/
    left: 0;
    right: 0;
    min-width: 100%;
    max-width: 100%;
    min-height: 240px;
    background-color: #DEE0DE;
    margin-top :80px;
  }
  } 
} 

@media (max-width: 519px) and (min-width: 466px) {
  
  ul.trialOptions {
    margin-top: 10px;
    text-align: left;
  }

  .whatCustSay {
    margin-top: 10px;
    margin-left: 5px;
    width: 40%;
  }

}


@media (max-width: 480px) {
  .whatCustSay {
      margin-left: auto;
  }
}


@media (max-width: 650px) and (min-width: 481px) {
  
  .headlineContainer {
    min-height: 300px;
    max-height: 300px;
    /*background-image: url("../images/headerimage650.jpg");*/
  }

  h1.headline {
    text-align: left;
    padding-left: 10px;
    color: #272727;
    padding-top: 10px;
    margin-top: 0px;
    font-size: 1.6em; 
  }

  h2.headline {
    text-align :left;
  }

  .subHeadlineArea {
    text-align: left;
    margin-left: 10px;
  }

  h2.subHeadline2 {
    padding-right :120px;
    font-size: 1.4em;
    font-weight: bolder;
    color: #ffffff;
  }

  ul.trialOptions {
    margin-top: 20px;
    text-align: left;
  }

  .whatCustSay {
    margin-top: 20px;
    margin-left: 5px;
    width: 40%;
  }

}






@media (max-width: 710px) and (min-width: 651px) {
  h1.headline {    
    font-size: 1.6em;      
  }
}

@media (max-width: 1064px) and (min-width: 711px) {

  h1.headline {
    /*settings the page headline text*/
    text-align: center;
    color: #272727;
    padding-top: 10px;
    margin-top: 0px;
    font-size: 1.6em;      
  }
  
}


@media (max-width :1334px) {
  
  .feature {
    /*settings for each feature block*/
    display: inline-block;
    min-width: 100%;
    margin-left: 1%;
    margin-right: 2%;
    margin-top: 35px;
  }
  
  .feature1Text {
    /*settings for the text block for the 1st feature*/
    float: left;
    min-width: 95%;
  }
  
  .feature1Image {
    /*settings for the image on the 1st feature*/
    float: left;
    /*margin-right: 0;
    max-width: 100%;*/
  }
  
  .feature2Text {
    /*settings for the text block of the 2nd feature*/
    float: left;
    max-width: 95%;
    margin-right: 0;
  }
  
  .feature2Image {
    /*settings for the image on the 2nd feature*/
    float: left;
    margin: 0;
    padding-top: 10px;
    max-width: 100%;
  }
  
  .feature3Text {
    float: left;
    max-width: 95%;
  }
  
  .feature3Image {
    float: left;
    margin-right: 0;
    max-width: 100%;
  }
  
  .feature4Text {
    /*settings for the text block of the 2nd feature*/
    float: left;
    max-width: 95%;
    margin-right: 0;
  }
  
  .feature4Image {
    /*settings for the image on the 2nd feature*/
    float: left;
    margin: 0;
    padding-top: 10px;
    max-width: 100%;
  }

  .featureMuText {
      float: left;
      max-width: 95%;
      margin-right: 0;
  }
  
  .featureRepText {
      float: left;
      max-width: 95%;
      margin-right: 0;
  }
  
}


@media (min-width : 1335px) and (max-width :1684px) {
  
  .feature {
    /*settings for each feature block*/
    display: inline-block;
    min-width: 98%;
    margin-left: 1%;
    margin-right: 2%;
    margin-top: 45px;
  }
  
  
  .feature1Text {
    /*settings for the text block for the 1st feature*/
    float: left;
    max-width: 60%;
  }
  
  .feature1Image {
    /*settings for the image on the 1st feature*/
    float: right;
    /*margin-right: 0;
    max-width: 100%;*/
  }
  
  .feature2Text {
    /*settings for the text block of the 2nd feature*/
    float: left;
    max-width: 50%;
    margin-right: 0;
  }
  
  .feature2Image {
    /*settings for the image on the 2nd feature*/
    float: right;
    margin: 0;
    padding-top: 10px;
    /*max-width: 100%;*/
  }
  
  .feature3Text {
    float: right;
    max-width: 38%;
  }
  
  .feature3Image {
    float: left;
    margin-right: 0;
    max-width: 100%;
  }
  
  .feature4Text {
    /*settings for the text block of the 2nd feature*/
    float: left;
    max-width: 41%;
    margin-right: 0;
  }
  
  .feature4Image {
    /*settings for the image on the 2nd feature*/
    float: right;
    margin: 0;
    padding-top: 10px;
    max-width: 100%;
  }

  .featureMuText {
      float: right;
      max-width: 60%;
      margin-right: 0;
  }
  
  .featureRepText {
      float: right;
      max-width: 44%;
      margin-right: 0;
  }


}

@media (min-width :1685px) {
  
  .feature {
    /*settings for each feature block*/
    display: inline-block;
    min-width: 95%;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 45px;
  }
  
  
  .feature1Text {
    /*settings for the text block for the 1st feature*/
    float: left;
    max-width: 60%;
  }
  
  .feature1Image {
    /*settings for the image on the 1st feature*/
    float: right;
    /*margin-right: 0;
    max-width: 100%;*/
  }
  
  .feature2Text {
    /*settings for the text block of the 2nd feature*/
    float: left;
    max-width: 60%;
    margin-right: 0;
  }
  
  .feature2Image {
    /*settings for the image on the 2nd feature*/
    float: right;
    margin: 0;
    padding-top: 10px;
    /*max-width: 100%;*/
  }
  
  .feature3Text {
    float: right;
    max-width: 52%;
  }
  
  .feature3Image {
    float: left;
    margin-right: 0;
    max-width: 100%;
  }
  
  .feature4Text {
    /*settings for the text block of the 2nd feature*/
    float: left;
    max-width: 52%;
    margin-right: 0;
  }
  
  .feature4Image {
    /*settings for the image on the 2nd feature*/
    float: right;
    margin: 0;
    padding-top: 10px;
    max-width: 100%;
  }

  .featureMuText {
      float:right;
      max-width: 65%;
      margin-right: 0;
  }
  
  .featureRepText {
      float:right;
      max-width: 52%;
      margin-right: 0;
  }
  
}


@media (max-width :469px) {
  
 .benefitsArea {
    /*settings for an area of the page for displaying the 5 main benefit points */
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
  }   
}


@media (max-width :544px) {
  
  .featureImage {
    height :90%;
    width :90%;
  }

}


/*@media (min-width :545px) {
  
  .feature2Image {
    float: left;
    margin: 0;
    padding-top: 10px;
  }
  
  .feature3Image {
    float: right;
    margin-right: 0;
    max-width: 100%;
  }
  
  .feature4Image {
    float: left;
    margin: 0;
    padding-top: 10px;
    max-width: 100%;
  }
  
} */



@media (max-width :619px)  {

  /*.subHeadlineArea {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    text-align: center;
  }*/
   
  
  .contentContainer {
    /*settings for the container of the main content area in the page*/
    width: 90%;
    min-height: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    display: block;
  }
  
}

@media (max-width :649px) and (min-width: 470px) {
  
 .benefitsArea {
    /*settings for an area of the page for displaying the 5 main benefit points */
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    /*min-width :100%;*/
  } 
  
}


@media (min-width :651px) {

  .subHeadlineArea {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    text-align: center;
  }
  
  
  
  .contentContainer {
    /*settings for the container of the main content area in the page*/
    width :65%;
    min-height: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    display: block;
  }

  .whatCustSay {
    width :30%;
  }
  
}


@media (max-width :619px) and (min-width :462px) {
  .whatCustSay {
    width :40%;
  }
}

@media (max-width :461px) and (min-width :322px) {
  .whatCustSay {
    width :47%;
  }
}


/************************************************/

/* style rules for standard PC/Mac browser sizes */

@media (min-width :650px) and (max-width: 1029px) {
  
  .benefitsArea {
    /*settings for an area of the page for displaying the 5 main benefit points */
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
  }
  
}


@media (min-width: 1030px) {
  
  .benefitsArea {
    /*settings for an area of the page for displaying the 5 main benefit points */
    max-width: 75%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    /*min-width :100%;*/
  }
  
}

@media (min-width :1750px) {

  .mainHeadline {
    /*settings for the main headline section, excluding the page header*/
    width: 58%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
  }

}


@media (max-width :1749px) and (min-width: 1400px) {

  .mainHeadline {
    /*settings for the main headline section, excluding the page header*/
    width: 66%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
  }

}

@media (max-width: 1399px) and (min-width: 1066px) {

  .mainHeadline {
    width: 76%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
  }

}


@media (min-width: 1065px) {
  
  .pageHeader {
    /*sets up the page header*/
    width: 65%;
    min-height: 50px;
    padding-bottom: 10px;
    margin: 0px auto;    
  }
  
  .navigation {
    /*sets the positioning of the navigation bar*/
    float: right;
    font-size: 90%;
    padding-top: 10px;
    margin-right :0;
  }
  
 
  .logo {
    /*sets the positioning of the logo image*/
    float: left;
    padding-left :10px;    
  }
  
  .logoCaption {    
    margin-left: auto;
    margin-right: auto;   
    text-align: center;
    font-weight: 600;
    padding: 0px;
    font-size :1.1em;
    letter-spacing: 0.65px;
    /*padding-left: 5px;*/    
  }

  /*.logoCaption {
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    float: none;
    font-weight: bold;
    padding: 0;
    padding-left: 12px;
  }*/
  
  .menuOptions {
    /*settings for the navigation menu*/
    list-style-type: none;
    margin-right :0;
  }
  
  .menuOptions li {
    /*settings for the navigation menu options*/
    padding-right: 14px;
    display: inline;
    background-color: #ffffff;
    color: #000000;
    text-align: right;
  }
  
  .headlineContainer {
    /*sets up a container for the headline section of the page for the full width*/
    left: 0;
    right: 0;
    min-width: 100%;
    max-width: 100%;
    height: 100vh;
    /*margin-top: 0px;*/
    margin-top :80px;
    background-image: url("../images/dwsbg.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
   
  
  h1.headline {
    /*settings the page headline text*/
    text-align: center;
    font-size: 2em;
    color: #272727;
    position: relative;
    padding-top: 30px;
    padding-left: 120px;
    padding-right: 120px;
    margin-top: 0px;
  }
  
  .trialOptions a {
    /*settings for the links for the trial buttons*/
    color: #ffffff;
    text-decoration: none;
    padding: 10px 10px;
    min-width: 160px;
    border-radius: 10px;
    text-align: center;
    margin-right: 30px;
    font-size: 87%;
    font-weight: bold;
  }
  
  ul.trialOptions {
    /*settings for the trial options link*/
    list-style-type: none;
    margin-top: 53px;
  }
  
  .testimonialArea {
    /*Sets up the area for the testimonials to be shown centred on the page*/
    width: 65%;
    min-height: 300px;
    max-height: 300px;
    margin-left: auto;
    margin-right: auto;
    /*margin-top: 30px;*/
    display: block;
  }
  
  .quoteArea {
    /*sets up an area to display the actual testimonial quotes*/
    display: block;
    padding-top: 40px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    min-height: 170px;
    max-height: 170px;
    text-align: center;
  }
  
  .testimonialArea h3 {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    margin: 0;
    padding-top: 20px;
    min-height: 25px;
    max-height: 25px;
  }
  
}

@media (min-width: 1065px) and (max-width: 1410px) {
  .pageHeader {
    /*sets up the page header*/
    width: 80%;
  }
}

@media (min-width :538px) and (max-width: 585px) {

  .menuOptions li {
    /*padding-right: 14px;*/

  }

  .freeTrialHeader {
    margin-left :0px;
  }


}



/************************************************/

.logo {
  text-decoration: none;
}

.menuOptions a {
  /*settings for the navigation links*/
  text-decoration: none;
}



.headlineArea {
  text-align: center;
  /*padding-top: 30px;*/
}

.trialOptions li {
  /*settings for each trial options tag*/
  display: inline;
}

#trialTour {
  /*settings for the Take The Tour button*/
  background-color: #ffffff;
  opacity :0.6;
  border-color: #808080;
  border-style: solid;
  border-width: 2px;
  color: #000000;
  font-size :1.0em;
}

#trialTour:hover {
  /*settings for when the user mouses over the Take The Tour button*/
  border-color: #000000;
  border-style: solid;
  border-width: 2px;
}


#trialTryIt {
  /*settings for the Try It Now button*/
  /*opacity: 0.85;*/
  background-color: #A674BB;   /*#FBC543;*/
  border-color: #EAE0E8;
  border-style: solid;
  border-width: 2px;
  font-size :1.25em;
  color :#ffffff;
}

#trialTryIt:hover {
  /*settings for when the user mouses over the Try It Now button*/
  border-color: #000000;
  border-style: solid;
  border-width: 2px;
  background-color: #2980b9;
  color :#ffffff;
  /*color: #ffffff;*/
}



.whatCustSay {  
  margin-right :auto;
  min-width :20%;  
  font-size :1em;
  font-weight: bold;
  color :#ffffff;
  background-color :#000000;
  opacity: 0.5;
  border-radius: 10px;
  border-style: solid;
  border-width: 2px;
  border-color :#808080;
  height :36px;
}


.whatCustSay:hover {
  /*settings for when the user mouses over the Try It Now button*/
  border-color: #ffffff;
  border-style: solid;
  border-width: 2px;

  /*color: #ffffff;*/
}

#linkCustSay {
  text-decoration: none;
  display :block;
  color :#ffffff; 
  font-size :1em;
  padding-top: 5px;
}


h2.subHeadline {
  /*font settings for the sub-headline*/
  font-size: 1.2em;
  font-weight: normal;
}

@media (min-width: 651px){
  h2.subHeadline2 {
    font-size: 1.7em;
    font-weight: normal;
    color: #272727;
  }

  .whatCustSay {
    margin-top :45px;  
    margin-left :auto;
  }

}



ul.benefitsList {
  /*settings for the list of benefits*/
  display: block;
  list-style-type: none;
  margin: 0px auto;
  padding: 0px;
}

ul.benefitsList2 {
  /*settings for the list of benefits*/
  display :inline-block;
  list-style-type: none;
  list-style-position: initial;
  margin: 0px auto;
  padding: 0px;
  text-align: center;
  margin-top :25px;
}


li.benefitBlock {
  /*settings for each benefit list item*/
  display: inline-block;
  padding-right: 21px;
  padding-left :14px;
  margin: 10px;
  min-height :220px;
}

li.benefitBlock2 {
  display: list-item;
  margin: 8px; 
  text-align: left; 
  max-width: 30%;
  float: left;
  min-height: 133px;
  min-width: 100px;
  background-color: #FBFBFB;
  border-width:  1px;
  border-color: #D6D6D6;
  border-style: solid;
  border-radius: 4px;
}



.benefit {
  /*settings for each benefit, assigning a block to include several elements within each benefit list item*/
  display: inline-block;
  text-align: center;
  /*these settings align the text and image to the centre*/
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0px;
  padding-bottom :20px;
}

.benefit2 {
  display: inline-block;
  /*text-align: center;*/
  /*these settings align the text and image to the centre*/
  margin-top: 5px;
  margin-bottom: 0px;
  padding: 0px;
  padding-bottom :20px;
  /*max-width :30%;*/
}

h3.benefitHeader {
  /*settings for the text header of each benefit */
  margin-bottom: 0;
  margin-top: 10px;

}

.benefitHeader2 {
  /*settings for the text header of each benefit */
  display :inline;
  padding-left :10px;
  font-size: 1.25em;
  font-weight: normal;

}

.benefitsCaption {
  /*settings for the text caption of each benefit */
  margin-top: 10px;
  font-size: 0.9em;
  text-align: center;
  max-width: 300px;
}

.benefitCaption {
  /*settings for the text caption of each benefit */
  margin-top: 10px;
  font-size: 0.9em;
  /*text-align: center;*/
  margin-left:0px;    /* **** */
  padding-left:10px;  /* **** */
}

@media (max-width :550px) {
      
  li.benefitBlock2 {
    display :block;
    float :none;
    min-width :0;
    min-height :0;
    max-width :100%;
    padding-right: 12px;
  }
  
  .benefit2 {
    text-align: center;
  } 
  
  .benefitCaption {
    margin-left :0;
  }
    
}



.contentContainer h3 {
  /*settings for headers of each section in the main content*/
  font-size: 1.2em;
  margin-bottom: 5px;
  margin-top: 0px;
}


.featureText p {
  /*settings for the caption text of each feature*/
  font-size: 0.95em;
  margin: 0;
}

.feature a {
  text-decoration: none;
}





.testimonialControlsOuterArea {
  /*Sets up an outer area for the display of navigation controls in the testimonial "slider"*/
  width: 220px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  margin-bottom: 0px;
}

.testimonialControlsArea {
  /*Sets up the area for the display of navigation controls in the testimonial "slider"*/
  padding-top: 10px;
  min-width: 100%;
  min-height: 40px;
  max-height: 40px;
  margin-bottom: 20px;
  display: inline-block;
}

.testimonialButtonLeft {
  background-color: #353535;
  border-radius: 100%;
  margin-left: 0px;
}

.testimonialButtonRight {
  background-color: #353535;
  border-radius: 100%;
  margin-left: 10px;
}


.showQuote {
  display: block;
}

.hiddenQuote {
  display: none;
}

.testimonialQuoteButton {
  border-color: #000000;
  border-radius: 100%;
  padding-left: 12px;
}


.textBold {
    font-weight:bold;
}

.textLeft {
    text-align: left;
}

.textCenter {
    text-align: center;
}

.textRight {
    text-align: right;
}

.subTitleText {
    font-size: 1.05em;
}

.marginRight15 {
    margin-right: 15px;
}

.textGrey {
    color: #3f3f3f;
}

.textBottomPadding20 {
    padding-bottom :20px;
}

.textTopPadding20 {
  padding-top: 20px;
}

.divCenter div {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.divPageCenter div {
    margin-left: auto;
    margin-right: auto;
    width :65%;
}




@media (min-width: 1200px) {
    .pageContentContainer {
        width: 65%;
    }
}

@media (min-width: 980px) and (max-width: 1199px) {
    .pageContentContainer {
        width: 75%;
    }
}

@media (min-width: 768px) and (max-width: 979px) {
    .pageContentContainer {
        width: 85%;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .pageContentContainer {
        width: 90%;
    }
}

@media (max-width: 479px) {
    .pageContentContainer {
        width: 96%;
    }
}

.pageContentContainer {
    margin-left: auto;
    margin-right: auto;
    min-height :750px;
}

@media (min-width: 801px) {

    .footerArea {
        margin-left: 20%;
        margin-right: 20%;
        width: 65%;
    }

}

@media (max-width: 800px) and (min-width: 601px) {

    .footerArea {
        margin-left: 15%;
        margin-right: 15%;
        width: 80%;
    }

}

@media (max-width: 600px) and (min-width: 481px) {

    .footerArea {
        margin-left: 5%;
        margin-right: 5%;
        width: 90%;
    }
}

@media (max-width: 480px) {

    .footerArea {
        margin-left: 2%;
        padding-right :2%;
        width: 100%;
    }

    .footerTermsLabel {
        text-align: left;
        display :block;
    }

}


@media (min-width :481px) {
    .footerTermsLabel {
        float: right;
        text-align: right;
        display: inline;
    }
}

@media (min-width :341px) {
    .footerOptionsList2 {
        padding-left: 50px;
    }
}

@media (max-width :340px) and (min-width :306px) {
    .footerOptionsList2 {
        padding-left: 20px;
    }
}

@media (max-width: 305px) {
    .footerOptionsList2 {
        padding-left: 5px;
    }
}


.footerContainer {
    /*container settings for the page footer - full width*/
    background-color:#8557A0;
    background-size: 100% 100%;
    min-height: 210px;
    min-width :100%;
}

.btmFooterContainer {
  background-color :#ffffff;
  background-size : 100% 100%;
  min-height :50px;
  min-width :100%;
  margin-top:10px; 
  margin-left :auto; 
  margin-right :auto; 
  text-align: center;
}


.footerArea {

    padding-top: 20px;
}

.footerOptionsArea {
    width: 180px;
}


.footerContentArea {
    width:100%;
    font-size: 80%;
}

.footerSocialMediaArea {
    display:inline;
    float:right;
}

.footerSocialMediaList {
    list-style-type: none;
}

.footerSocialMediaItem {
    display:inline;
    padding-left:6px;
}


.footerOptionsList1 {
    display: inline-block;
}

.footerOptionsList2 {
    display: inline-block;
    /*padding-left: 50px;*/
    float:right
}

.footerOption {
    padding-top:5px;
}

.footerOptionLink {
    text-decoration: none;
    color:#ffffff;
}

.footerOptionLink:hover {
    color :#ffffff;
    border-bottom-color: #ffffff;
    border-bottom-style: solid;
    border-bottom-width: thin;
}

.footerMessageArea {
    width:100%;
    font-size: 70%;
    padding-top:40px;
}

.footerTermsLabel {
    /*float:right;*/
    color:#ffffff;
}

.colorWhite {
    color:#ffffff;
}

.indent20 {
    padding-left:20px;
}

.siteMapLink {
    text-decoration: none;
    color: #505050;
}

.siteMapLink:hover {
    color :#0000ff;
    font-weight: bold;
    border-bottom-color: #0000ff;
    border-bottom-style: solid;
    border-bottom-width: thin;
}

.pageTitle {
    font-size:2em !important;
    font-weight: bold !important;
}

.freeTrialPromoContainer {
    background-color: #1A2630;
    background-size: 100% 100%;
    min-height: 120px;
    min-width :100%;
}

.freeTrialPromo {
    margin-left: auto;
    margin-right: auto;
}

.freeTrialMessage {
    padding-top: 20px;
    color: #ffffff;
    float: left;
}

.freeTrialPromoLine1 {
    /*padding-left: 10px;*/
    font-size: 1.4em;
}

.freeTrialPromoLine2 {
    display: block;
    padding-top: 5px;
    font-size: 1.6em;
}

.freeTrialButtonContainer {
    /*float: right;*/
    margin-top: 35px;
}

.homeFreeTrialButtonContainer {
    /*float: right;*/
    margin-top: 35px;
}

.freeTrialButton {
    display: block;
    text-decoration: none;
    background-color: #226BAB;
    color: #0A0A0A;
    /*font-weight: bold;*/
    font-size: 1.2em;
    min-width: 40px;
    width: 135px;
    border-style: solid;
    border-radius: 3px;
    border-color: #505050;
    border-size: 0.5px;
    /*box-shadow: #242424;*/
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
}

.freeTrialButton:hover {
    /*font-weight: bold;*/
    border-color: #000000;
    color: #ffffff;
    border-size: 1px;
}


.homeFreeTrialPromoContainer {
    background-color: #F6C449;
    background-size: 100% 100%;
    min-height: 150px;
    min-width :100%;
}

.homeFreeTrialMessage {
    padding-top: 30px;
    color: #2980b9;
    float: left;
}

.homeFreeTrialPromoLine1 {
    font-size: 1.45em;
    font-weight: bold;
}

.homeFreeTrialPromoLine2 {
    display: block;
    padding-top: 5px;
    font-size: 1.6em;
}

.homeFreeTrialPromo {
    margin-left: auto;
    margin-right: auto;
}


.navMenuOptions {
  font-size :90%;
}


.subHeader h3 {
  font-size: 2.0em;
}

/* ****** */

@media (max-width: 1400px) {
  .benefitHeader2 {
      font-size :1.10em;
  }   
}

@media (max-width: 1245px) {
  .benefitHeader2 {
      font-size :1em;
  }   
}

@media (max-width: 1130px) {
    li.benefitBlock2 {
        max-width :47%;
    }
    
    .benefitHeader2 {
        font-size :1.25em;
    }   
}


/* ******* */

@media (min-width: 1300px) {

    .freeTrialPromo {
        width: 55%;
    }

   .homeFreeTrialPromo {
        width: 65%;
    }

}

@media (max-width: 1299px) {

    .freeTrialPromo {
        width: 60%;
    }

    .homeFreeTrialPromo {
        width: 70%;
    }

}

@media (max-width: 1199px) {

    .freeTrialPromo {
        width: 65%;
    }

    .homeFreeTrialPromo {
        width: 75%;
    }

}

@media (max-width: 1099px) {

    .freeTrialPromo {
        width: 70%;
    }

    .homeFreeTrialPromo {
        width: 80%;
    }

}

@media (max-width: 999px) {

    .freeTrialPromo {
        width: 75%;
    }

    .homeFreeTrialPromo {
        width: 85%;
    }

}

@media (max-width: 949px) {

    .freeTrialPromo {
        width: 80%;
    }

    .homeFreeTrialPromo {
        width: 90%;
    }

}

@media (max-width: 899px) {

    .freeTrialPromo {
        width: 85%;
    }

    .homeFreeTrialPromo {
        width: 95%;
    }

}

@media (max-width: 849px) {

    .freeTrialPromo {
        width: 90%;
    }

}

@media (min-width: 800px) {

    .freeTrialPromoLine2 {
        padding-left: 200px;
    }

    .freeTrialButtonContainer {
        margin-right: 10px;
    }

    /*.homeFreeTrialButtonContainer {
        margin-right: 10px;
    }*/

}

@media (max-width: 799px) {

    .freeTrialPromoLine2 {
        padding-left: 0px;
    }

    .freeTrialButtonContainer {
        margin-right: 0px;
    }

    .homeFreeTrialButtonContainer {
        margin-right: 0px;
    }

    .homeFreeTrialMessage {
        width: 50%;
    }

}

@media (max-width: 729px) {

    .freeTrialPromo {
        width: 97%;
    }

    .homeFreeTrialPromo {
        width: 97%;
    }

}

@media (min-width: 680px) {

    /*.freeTrialButtonContainer {
        float: right;
    }*/

    /*.homeFreeTrialButtonContainer {
        float: right;
    }*/

}

@media (max-width: 679px) {

    .freeTrialButtonContainer {
        float: left;
        margin-left: 30%;
    }

    .freeTrialPromoContainer {
        min-height: 200px;
    }

}


@media (max-width: 589px) {

    /*.homeFreeTrialPromoContainer {
        min-height: 210px;
    }*/

}

@media (max-width: 579px) {

    .homeFreeTrialMessage {
        width: 40%;
    }

}

@media (max-width: 544px) {

    .homeFreeTrialButtonContainer {
        float: left;
    }

    .homeFreeTrialMessage {
        width: 100%;
        text-align: center;
    }

    /*.homeFreeTrialPromoContainer {
        min-height: 250px;
    }*/

}


@media (max-width: 439px) {

    .freeTrialPromoContainer {
        min-height: 280px;
    }

}



@media (max-width: 369px) {

    .freeTrialPromoContainer {
        min-height: 310px;
    }

    .freeTrialButtonContainer {
        margin-left: 18%;
    }

}

@media (max-width: 349px) {

    /*.homeFreeTrialButtonContainer {
        margin-left: 18%;
    }*/

}

@media (min-width :690px) {
  .videoEmbed {
    width: 560px; 
    height: 315px;
  }
}

@media (max-width :689px) {
  .videoEmbed {
    width: 90%; 
    height: 315px;
  }
}

@media (min-width :860px) {
  .videoEmbedLarge {
    width: 750px; 
    height: 422px;
  }
}

@media (max-width :859px) {
  .videoEmbedLarge {
    width: 95%; 
    height: 422px;
  }
}

@media (max-width :430px) {
  .footerSocialMediaItem {
    padding-left:3px;
  }
}

@media (max-width :415px) {
  .footerSocialMediaItem {
    padding-left:1px;
  }
}

@media (max-width :397px) {
  .footerSocialMediaItem {
    display :block;
  }
}

@media (max-width: 1379px) and (min-width: 775px) {
  li.benefitBlock2  {
    min-height: 150px;
  }
}

@media (max-width: 774px) {
  li.benefitBlock2  {
    min-height: 176px;
  }  
}

@media (max-width: 609px) {
  li.benefitBlock2 {
    max-width: 100%;  
    min-height: 100px;
  }
}

@media (max-width: 370px) {
  .homeFreeTrialButtonContainer {
     margin-top: 0px;
  }
}

.allInOneContainer {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.allInOneTextArea {
  color: #505050;
}

.allInOneHeader {
  font-size: 2.2em;
  color: #229E8B;
}

.allInOneText {  
  margin-top: 15px;
}

.allInOneLine1 {
  font-size: 1.35em;
}

.allInOneLine2 {
  font-size: 1.1em;
}

.allInOneImage img {
  width: 50%;
}

.onPremCloudCaption {
  font-size:1.4em; 
  font-weight:600; 
  color:#fff; 
  /*text-shadow: -1px 1px 2px #1B6B5D,
                        1px 1px 2px #1B6B5D,
                        1px -1px 2px #1B6B5D,
                       -1px -1px 2px #1B6B5D; */
  text-shadow: 0 0 2px #1B6B5D,
                       0 0 2px #1B6B5D,
                       0 0 2px #1B6B5D,
                       0 0 2px #1B6B5D;
                      
}



@media (max-width: 1249px) {
  .allInOneContainer {
    width :100%  
  }  
}

@media (min-width: 1250px) {
  .allInOneContainer {
    width :80%  
  }
}


@media (max-width: 799px) {
  .allInOneTextArea {
    width: 95%;
  }
}

@media (max-width: 914px) and (min-width: 800px) {
  .allInOneTextArea {
    width: 75%;
  }
}

@media (min-width: 915px) {
  .allInOneTextArea {
    float: right;
    width: 50%;
  }  

}

@media (max-width: 400px) {
  .allInOneImage {
    height: 100%;
    width: 100%;
  }
}




.pageBannerContainer {
    margin-top: 50px;
    height: 548px;
    background-repeat: no-repeat;
}

.bannerArea {
  margin-left: auto;
  margin-right: auto;
  width: 85%;
}

.bannerText {  
  color: #ffffff;
  font-size: 1.7em;
}

@media (max-width: 375px) {
  .bannerText {
    margin-left: 0%; 
    padding-top: 10px;
    max-width: 100%;
    font-weight: 600;
    font-size: 1.6em;
  }

}

@media (max-width: 600px) and (min-width: 376px) {
  .bannerText {
    margin-left: 0%; 
    padding-top: 30px;
    max-width: 95%;
    font-weight: 600;
  }

}

@media (max-width: 759px) and (min-width: 601px) {
  .bannerText {
    margin-left: 0%; 
    padding-top: 30px;
    max-width: 80%;
  }

}

@media (max-width: 949px) and (min-width: 760px) {
  .bannerText {
    margin-left: 40%; 
    padding-top: 45px;
  }
}

@media (max-width: 1099px) and (min-width: 950px) {
  .bannerText {
    margin-left: 50%; 
    padding-top: 60px;
  }
}

@media (min-width: 1100px) {
  .bannerText {
    margin-left: 60%; 
    padding-top: 85px;
  }
}


@media (max-width: 600px) {
  .pageBannerContainer {
    background-image: url("../images/banner600.png");
    height: 500px;
  }  
}


@media (max-width: 759px) and (min-width: 601px) {
  .pageBannerContainer {
    background-image: url("../images/banner850.png");
    background-size: 100% 100%;
    height: 500px;
  }  
}

@media (max-width: 950px) and (min-width: 760px) {
  .pageBannerContainer {
    background-image: url("../images/banner1050.png");
    background-size: 100% 100%;
  }  
}

@media (max-width: 1199px) and (min-width: 951px) {
  .pageBannerContainer {
    background-image: url("../images/banner1210.png");
    background-size: 100% 100%;
  }  
}

@media (min-width: 1200px) {
  .pageBannerContainer {
    background-image: url("../images/banner.png");
    background-size: 100% 100%;
  }  
}



.peopleBannerHeader {
  text-align: left;
  font-size: 2.4em;
  color: #505050;
  padding-top: 30px;
  font-weight: 500;
}

.peopleBannerText {
    text-align: left;
    font-size: 1.25em;
    color: #505050;
}


.contentBlockContainer {
  margin-left: auto;
  margin-right: auto;
}



.softwareMessageContainer {
  min-height: 580px; 
  margin-top: 40px;
}

.softwareMessageHeader {
  text-align: center;
  font-size: 2.0em;
  color: #505050;
}

.softwareMessageText {
  color: #505050;
  float: left;
}

.svMessageText {
  color: #505050;
}


@media (max-width: 649px) {

  .contentBlockContainer {
    width :90%  
  }    

  .softwareMessageText {
    max-width: 95%;
  }

  .svMessageText {
    max-width: 95%;
  }

}


@media (max-width: 914px) and (min-width: 650px) {
  
  .contentBlockContainer {
    width :80%  
  }    

  .softwareMessageText {
    max-width: 95%;
  }

  .svMessageText {
    max-width: 95%;
  }
  
}


@media (max-width: 914px) {
  
  .softwareMessageImage {
    max-width: 90%;
  }

  .svMessageImage {
    max-width: 90%;
  }

  .softwareMessageHeader {
    text-align: left;
  }

}

@media (min-width: 915px) { 

  .softwareMessageImage img {
    float: right;
  }

  .svMessageImage img {
    float: left;
  }

}

@media (max-width: 958px) and (min-width: 915px) {
  .contentBlockContainer {
    width :95%  
  }    
}

@media (max-width: 998px) and (min-width: 959px) {
  .contentBlockContainer {
    width :90%  
  }  
}


@media (max-width: 1249px) and (min-width: 999px) {
  .contentBlockContainer {
    width :80%  
  }  
}

@media (min-width: 1250px) {
  .contentBlockContainer {
    width :75%  
  }
}

@media (min-width: 915px) {
  .softwareMessageImage {
    float: right;
  }  

  .svMessageText {
    float: right;
  }

}

@media (max-width: 1684px) and (min-width: 915px) {
  .softwareMessageImage {
    max-width: 60%;
  }

  .svMessageImage {
    max-width: 60%;
  }
}


@media (max-width: 914px) and (min-width: 800px) {
  .softwareMessageText {
    width: 75%;
  }

  .svMessageText {
    width: 75%;
  }

}

@media (min-width: 915px) {

  .softwareMessageText {
    max-width: 35%;
  }
}

@media (max-width: 914px) {
  .svMessageText {
    margin-top: 10px;
  }
}

@media (max-width: 1470px) and (min-width: 916px) {
  .svMessageText {
    max-width: 40%;
  }
}

@media (min-width: 1471px) {
  .svMessageText {
    max-width: 50%;
  }
}


.fullWidthContainer {
    left: 0;
    right: 0;
    min-width: 100%;
    max-width: 100%;
}


.featureGridContainer {
  min-height: 550px; 
  margin-top: 40px;
}


ul.featureGridList {
  /*settings for the list of benefits*/
  display :inline-block;
  list-style-type: none;
  list-style-position: initial;
  margin: 0px auto;
  padding: 0px;
  text-align: center;
}


li.featureGridBlock {
  display: list-item;
  margin: 8px; 
  text-align: left; 
  float: left;
  min-height: 133px;
  min-width: 31%;
  max-width :350px;
  margin-top: 20px;
}

.featureHeader {
  font-size: 1em;
}

.featureText {
  font-size: 0.85em;
  max-width: 342px;
}

@media (max-width: 1450px) and (min-width: 1251px) {
  .featureGridContainer {
    width: 82%;
  }
}



.peopleBannerContainer {
    margin-top: 60px;
    background-repeat: no-repeat;    
    height: 599px;  
}

.peopleBannerTextArea {
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}

.peopleBannerHeader {
  text-align: left;
  font-size: 2.4em;
  color: #505050;
  padding-top: 30px;
  font-weight: 500;
}

.peopleBannerText {
    text-align: left;
    font-size: 1.25em;
    color: #505050;
}


@media (max-width: 530px) {
  .peopleBannerHeader {
    font-size: 2.0em;
  }

  /*.peopleBannerText {
    font-size: 1.1em;
  }*/
}



@media (max-width: 500px) {
  .peopleBannerHeader {
    max-width: 100%;
  }
}

@media (max-width: 699px) and (min-width: 500px) {
  .peopleBannerHeader {
    max-width: 85%;
  }
} 

@media (max-width: 848px) and (min-width: 700px) {
  .peopleBannerHeader {
    max-width: 500px;
  }
} 

@media (max-width: 1075px) and (min-width: 849px) {
  .peopleBannerHeader {
    max-width: 650px;
  }
}


@media (max-width: 370px) {
  .peopleBannerText {
    font-size: 1.1em;
    max-width: 100%;
  }
}

@media (max-width: 500px) and (min-width: 371px) {
  .peopleBannerText {
    max-width: 100%;
  }
}

@media (max-width: 699px) and (min-width: 500px) {
  .peopleBannerText {
    max-width: 85%;
  }  
}

@media (max-width: 848px) and (min-width: 700px) {
  .peopleBannerText {
    max-width: 430px;
  }  
}

@media (max-width: 938px) and (min-width: 849px) {
  .peopleBannerText {
    max-width: 480px;
  }  
}

@media (max-width :1060px) and (min-width :939px) {
  .peopleBannerText {
    max-width: 550px;
  }
}

@media (max-width: 1348px) and (min-width: 1061px) {
  .peopleBannerText {
    max-width: 650px;
  }
}

@media (min-width: 1349px) {
  .peopleBannerText {
    max-width: 750px;
  }
}


@media (max-width: 848px) and (min-width: 1px) {
  .peopleBannerTextArea {
    width: 95%;
  }
}

@media (max-width: 998px) and (min-width: 849px) {
  .peopleBannerTextArea {
    width: 90%;
  }
}

@media (max-width: 1350px) and (min-width: 998px) {
  .peopleBannerTextArea {
    width: 82%;
  }
}

@media (min-width: 1351px) {
  .peopleBannerTextArea {
    width: 75%;
  }
}


@media (max-width: 400px) {
  .peopleBannerContainer {
    background-image: url("../images/peoplebanner400.png");  
  }
}

@media (max-width: 699px) and (min-width: 401px) {
  .peopleBannerContainer {
    background-image: url("../images/peoplebanner700.png");  
  }
}

@media (max-width: 998px) and (min-width: 700px) {
  .peopleBannerContainer {
    background-image: url("../images/peoplebanner1300.png");
    background-size: 100% 100%;
  }  
}


@media (max-width: 1299px) and (min-width: 999px) {
  .peopleBannerContainer {
    background-image: url("../images/peoplebanner1675.png");
    background-size: 100% 100%;
  }
} 

@media (min-width: 1300px) {
  .peopleBannerContainer {
    background-image: url("../images/peoplebanner1920.png");
    background-size: 100% 100%;
  }
}

@media (min-width: 651px) {
  h2.headline {
    margin-left :auto;
    margin-right :auto;
    /*width :70%;*/
  }
}

.centre {
	margin-left: auto;
	margin-right: auto;
}