/* general - begin */

@charset 'UTF-8';



* {



  font-weight: normal;

  line-height: 1.75rem;

  position: static;

  float: none;

  clear: none;

  box-sizing: border-box;

  width: auto;

  height: auto;

  margin: 0 auto;

  padding: 0;

  text-align: center;

  white-space: normal;

  text-decoration: none;

  letter-spacing: 0.1pt;

  word-spacing: 0;

  border: none;

  border-radius: 0;

  outline: none;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



.main-container-wrapper {

  max-width: 100%;

}



.noscript-message-container {

  width: 100%;

  background: #F14455;

  display: flex;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: space-between;

  align-items: center;

  align-content: center;

  margin: auto 0;

  vertical-align: middle;

}



.noscript-message {

  width: 100%;

  text-align: center;

  color: #FFFFFF;

  margin: auto;

  padding: 10px;

  font-size: 100%;

}



.response-message-container-wrapper {

  width: 100%;

  background: rgba(0, 0, 0, 0.5);

  display: none;

  flex-direction: column;

  flex-wrap: nowrap;

  justify-content: center;

  align-items: center;

  align-content: center;

  margin: auto 0;

  vertical-align: middle;

  height: 100vh;

  position: fixed;

  z-index: 100;

}



.response-message-container {

  width: calc(100% - 20px);

  max-width: 480px;

  

  background: #ffffff;

  display: flex;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: center;

  align-items: baseline;

  align-content: center;

  margin: auto;

  vertical-align: middle;

  border-radius: 3px;

}



.response-message {

  width: calc(100% - 10px);

  text-align: center;

  margin: auto 5px;

  max-height: 320px;

  overflow-wrap: anywhere;

}



.response-close-button {

  margin: 5px;

  border-radius: 50px;

  padding: 0 13px 2px;

  cursor: pointer;

  background: #F14455;

}



.main-container {

  max-width: 1200px;

}

/* general - end */

.topbar {

  border-bottom: 1px solid #eaeaea;

  background: #ffffff;

  padding: 3px 0;

}





.sticky {

  position: fixed;

  z-index: 20;

  top: 0;

  width: 100%;

}



.sticky + .content {

  padding-top: 10px;

}



.menubar {

  width: 100%;

  display: inline-flex;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: space-between;

  align-items: center;

  align-content: center;

  padding: 4px 0;

}



.menubar-left {

  margin-left: 10px;

}



.menubar-right {

  margin: auto 10px;

}


.dropbtn,

.dropbtn:visited,

.top-menu,

.top-menu:visited {

  border: none;

  display: inline-block;

  margin: auto 8px;

  padding: 2px;

}



.dropdown {

  position: relative;

  display: inline-block;

  margin: auto 0;

}



.dropdown-content {

  margin: 0 auto;

  display: none;

  position: absolute;

  z-index: 20;

  padding-top: 20px;

  background: transparent;

  transition: all 1s ease-in;

}



.dropdown-column-container::-webkit-scrollbar {

  width: 4px;

}



.dropdown-column-container::-webkit-scrollbar-track {

  background: #f9f9f9;

}



.dropdown-column-container::-webkit-scrollbar-track:hover {

  background: #f4f4f4;

}



.dropdown-column-container::-webkit-scrollbar-thumb {

  background: #888888;

  border-radius: 30px;

}



.dropdown-column-container::-webkit-scrollbar-thumb:hover {

  background: rgb(1, 34, 85);

}



.dropdown-column-container {

  max-height: calc(100vh - 75px);

  overflow-x: hidden;

  overflow-y: auto;

  position: relative;

  display: inline-flex;

  align-items: baseline;

  align-self: center;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: flex-start;

  width: 100%;

  margin: 3px 0;

  vertical-align: top;

  background: rgb(255, 255, 255);

  z-index: 14;

  border-radius: 2px;

  border: 1px solid #eaeaea;

}



.dropdown-column {

  display: inline-flex;

  overflow: auto;

  align-items: flex-start;

  align-self: baseline;

  flex-direction: column;

  flex-wrap: wrap;

  width: 100%;

  margin: 0;

  text-align: left;

  vertical-align: top;

  place-content: flex-start;

}



.dropdown-column-splitter {

  display: inline-flex;

  align-items: flex-start;

  align-self: baseline;

  flex-direction: column;

  flex-wrap: wrap;

  justify-content: flex-start;

  margin: 0;

  text-align: left;

  vertical-align: top;

}



.dropdown-column-title {

  display: block;

  text-align: left;

  margin: 0;

  width: 100%;

  min-width: 240px;

  padding: 5px 7px;

  max-width: 240px;

  cursor: pointer;

}



.dropown-column-two-split {

  display: inline-flex;

  flex-wrap: nowrap;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

  align-content: center;

  width: 100%;

  font-weight: normal;

}



.dropdown-column-title-text {

  color: #444444;

  font-weight: 400;

  font-family: "lato", "varela", verdana;

  width: 100%;

  text-align: left;

}



.dropdown-column-title-icon {

  color: #888888;

  font-size: 16px;

}



.dropmenu-content {

  margin: 0;

  display: none;

  background: #F5F5F5 !important;

}



.dropdown-column-link {

  display: block;

  text-align: left;

  width: 100%;

  min-width: 240px;

  max-width: 240px;

  margin: 0;

  padding: 5px 8px;

  font-weight: normal;

}



.dropdown-column-link:first-child {

  padding-top: 10px;

}



.dropdown-column-link:last-child {

  padding-bottom: 10px;

}



.dropbtn:active,

.dropbtn:focus,

.dropbtn:hover,

.menu-active,

.product-:active,

.product-title:focus,

.product-title:hover,

.top-menu:active,

.top-menu:focus,

.top-menu:hover {

  color: #2d234b !important;

  font-weight: bold;

  cursor: pointer;

  transition: all 0.25s ease-in;

}



.dropdown-column-link:active,

.dropdown-column-link:focus,

.dropdown-column-link:hover,

.dropdown-column-title-text:active,

.dropdown-column-title-text:focus,

.dropdown-column-title-text:hover {

  color: #2d234b !important;

  font-weight: bold !important;

  transition: all 0.1s ease-in;

}



.dropdown:hover .dropdown-content {

  display: block;

}



.enquiry-form-container-wrapper {

  z-index: 90;

  bottom: 8px;

  right: 8px;

  position: fixed;

  flex-direction: column;

  flex-wrap: nowrap;

  justify-content: center;

  align-items: baseline;

  align-content: stretch;

  max-width: 300px;

  margin: auto;

  transition: all 1s ease-in;

}



.enquiry-button-container {

  background: transparent;

  display: none;

  margin: auto 0 0 auto;

}



.enquiry-open-button {

  color: #FFFFFF;

  font-family: "Font Awesome 5 Free Solid" !important;

  background: #F0730F;

  padding: 23px 14px;

  border-radius: 50px;

  font-size: 48px;

  transition: all 1s ease-in;

  cursor: pointer;

}



.enquiry-form-container {

  background: #FFFFFF;

  display: none;

}



.enquiry-form-title {

  display: inline-flex;

  flex-wrap: nowrap;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

  align-content: center;

  width: 100%;

  transition: all 1s ease-in;

  background-color: #535795;

  color: #FFFFFF;

}



.enquiry-close-button {

  color: inherit;

  padding: 10px;

  font-family: "Font Awesome 5 Free Solid" !important;

  font-size: 16px;

  transition: all 1s ease-in;

  cursor: pointer;

}



.enquiry-title {

  margin: 10px 0;

  color: inherit;

  padding: 0 5px;

  font-family: "lato", "varela", verdana;

  width: 100%;

  text-align: left;

  transition: all 1s ease-in;

}



.enquiry-form {

  width: 100%;

  padding-top: 10px;

  display: inline-block;

  border: 1px solid #eaeaea;

  transition: all 1s ease-in;

}



.enquiry-input {

  width: calc(100% - 10px);

  margin: 0 5px 15px;

  padding: 5px;

  background: transparent;

  border-bottom: 1px solid #eaeaea;

  border-radius: 0;

  text-align: left;

  font-family: "lato", "varela", verdana;

}



.enquiry-input:active,

.enquiry-input:focus {

  text-decoration: none;

}



.enquiry-select-input {

  background: transparent;

  text-align: left;

  display: inline-block;

  width: calc(100% - 10px);

  border: none;

  border-bottom: 1px solid #eaeaea;

  color: #484848;

  margin: 0 5px 15px;

  padding: 10px 0;

}



.enquiry-option-input {

  border: none;

  padding: 10px 0;

}



.enquiry-button {

  width: calc(100% - 10px);

  margin: 15px 5px;

  padding: 5px;

  background-color: #535795;

  color: #ffffff;

  border: 1px solid #4A4A9A;

  border-radius: 3px;

  font-family: "lato", "varela", verdana;

  cursor: pointer;

  transition: all 0.5s ease-in;

}



.enquiry-button:active,

.enquiry-button:focus,

.enquiry-button:hover {

  background-color: #434795;

  border-color: #333785;

}

/* banner - begin */

.my-slides {

  display: none;

}



.slideshow-container {

  position: relative;

  margin: auto;

}



.slide-image {

  width: 100%;


  height: calc(100vw / 2.35);

  max-height: 500px;

  transition: all 1s ease-in;

  background-attachment: scroll;

  background-repeat: no-repeat;

  background-clip: border-box;

  background-size: 100% 100%;

  background-position: center center;

  display: inline-flex;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: center;

  align-items: center;

  align-content: center;

}





.dot-container-wrapper {

  z-index: 0;


  display: inline-flex;

  flex-direction: center;

  flex-wrap: nowrap;

  justify-content: center;

  align-items: flex-end ;

  align-content: bottom;

  height: calc(100vw / 2.35);
  width: 0%;
  max-height: 600px;
 
  position: absolute;

  margin-top: calc(100vw / -2.32);

margin-bottom: 0px;
}



.content-center-text-absolute{ 

  position: absolute; 

  text-align:   left;

  width: 100%;

  height: 0%;

  margin: auto;

  top: 50;

  left: 30;

  bottom: 25;

  right: 60;

  z-index: 51;

}

.

.bottomright {

  position: absolute;

  bottom: 8px;

  right: 16px;

  font-size: 18px;

  height: calc(100vw / 2.35);

  max-height: 700px;

  position: absolute;

  text-align: left;

  margin-top: calc(100vw / -2.32);

  margin-left: 6px;

}

/* Next & previous buttons */

.prev, .next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  width: auto;

  padding: 16px;

  margin-top: -22px;

  color: white;

  font-weight: bold;

  font-size: 18px;

  transition: 0.6s ease;

  border-radius: 0 3px 3px 0;

  user-select: none;

}



/* Position the "next button" to the right */

.next {

  right: 0;

  border-radius: 3px 0 0 3px;

}



/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover {

  background-color: rgba(0,0,0,0.8);

}



/* Caption text */

.text {

  color: #f2f2f2;

  font-size: 15px;

  padding: 8px 12px;

  position: absolute;

  bottom: 8px;

  width: 100%;

  text-align: center;

}



/* Number text (1/3 etc) */

.numbertext {

  color: #f2f2f2;

  font-size: 12px;

  padding: 8px 12px;

  position: absolute;

  top: 0;

}



/* The dots/bullets/indicators */

.dot {

  cursor: pointer;

  height: 5%;

  width: 3%;

  margin: 0 2px;

  background-color: #bbb;

  border-radius: 25%;

  display: inline-block;

  transition: background-color 0.6s ease;

}



.dot:hover {

  background-color: #717171;

}



.bottom-right {

     pointer-events: active;

 

}



.b1-readmore{

  position: absolute;

  max-width: 500px;

  width: 40%;

  top: 55%;

  right: 50px;

  left: 50%;

  transform: translate(-10%, -10%);

  float: left;

    bottom: 100px;



    color: white;

    text-shadow: 2px 2px 4px #000000;

  padding: 10px;

  text-align: right;

  text-align: bottom;

  text-align-last: right;

  padding-top: 50px; 

    overflow: hidden;

}



.b2-readmore{

  position: absolute;

  top: 280px;

    right: 50px;

      left: 50%;

  transform: translate(-10%, -10%);

  float: left;

    bottom: 100px;



  color: white;

  text-shadow: 2px 2px 4px #000000;

  padding: 10px;

  overflow: hidden;

  text-align: right;

  text-align-last: right;

  padding-top: 50px; 

}



.b3-readmore{

  position: absolute;

  top: 280px;

  bottom: 100px;

  

    right: 50px;

  left: 50%;

  transform: translate(-10%, -10%);

  float: left;

  color: white;

  text-shadow: 2px 2px 4px #000000;

  padding: 10px;

  overflow: hidden;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: right;

  padding-top: 50px; 

}



.b4-readmore{

  position: absolute;

  top: 350px;

  bottom: 50px;

  

    right: 50px;

  left: 60%;

  transform: translate(-10%, -10%);

  float: left;

  color: black;

  text-shadow: 2px 2px 4px #ffffff;

  padding: 10px;

overflow: hidden;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: right;

  padding-top: 50px; 

}



.b5-readmore{

  position: absolute;

  top: 255px;

  bottom: 100px;



  

    right: 50px;

  left: 50%;

  transform: translate(-10%, -10%);

  float: left;

  color: white;

text-shadow: 2px 2px 4px #000000;

  padding: 10px;

  overflow: hidden;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: right;

  padding-top: 50px; 

}



.b6-readmore{

  position: absolute;

  top: 350px;

  bottom: 50px;

    float: right;



  right: 50px;

  left: 50%;

  transform: translate(-10%, -10%);

  color: black;

  text-shadow: 2px 2px 4px #ffffff;

  padding: 10px;

  overflow: hidden;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: right;

  padding-top: 50px; 

}



.b7-readmore{

  position: absolute;

  top: 255px;

  

    right: 50px;

  left: 50%;

  transform: translate(-10%, -10%);

  color: black;

  text-shadow: 2px 2px 4px #ffffff;

  padding: 10px;

  overflow: hidden;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: right;

  padding-top: 50px; 

}

.rect{

   width: 100%;

  max-width: 1920px;

  height: calc(100vw / 2.35);

  max-height: 500px;

  background-size: 100% 100%;

  

  

  border: 2px solidblack;

  padding: 20px; 

  width: 700px;

  resize: both;

  overflow: auto;

   text-align: justify;

  text-justify: inter-word;

  text-align-last: left;

}





.bottom-Justification{

  position: absolute;

  bottom: 75px;

  right: 50px;

  left: 750px;

  color: #ffffff;

  padding: 10px;

  overflow: auto;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: left;

  padding-top: 50px;

}



.header-Justification{

  position: absolute;

   font-size: 50px; 

  line-height: 50px;

  border-radius: 5px;

  padding: 12px;

  right: 50px;

  left: 750px;

  top: 20px

  color: #ffffff;

  padding: 10px;

  overflow: auto;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: center;

  padding-bottom: 50px;

}



.b1-header-Justification{

  position: absolute;

  color: white;

  text-shadow: 2px 2px 4px #000000;

  font-size: 50px; 

  line-height: 50px;

  border-radius: 5px;

  padding: 12px;

  right: 50px;

  left: 500px;

  top: 10px

  padding: 10px;

  overflow: auto;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: center;

  padding-bottom: 200px;

     pointer-events: none;



}





.b1-bottom-Justification{

  position: absolute;

  max-width: 500px;

  width: 40 %;

  bottom: 140px;

  right: 50px;

  left: 50%;

  transform: translate(-10%, -10%);

  float: left;

  color: #ffffff;

  text-shadow: 2px 2px 4px #000000;

  padding: 10px;

  overflow: auto;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: left;

  padding-bottom: 50px;

       pointer-events: none;

       border: 2px;

  border-radius: 4px;



}











.b2-bottom-Justification{

  position: absolute;

  max-width: 600px;

  width: 70%;

  

  bottom: 130px;

  right: 50px;

  left: 51%;

  transform: translate(-10%, -10%);

  float: left;

  color: #ffffff;

  text-shadow: 2px 2px 4px #000000;

  padding: 10px;

  overflow: auto;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: left;

  padding-bottom: 50px;

       pointer-events: none;

}

.b2-header-Justification{

   position: absolute;

  color: white;

  text-shadow: 2px 2px 4px #000000;

  font-size: 50px; 

  line-height: 50px;

  border-radius: 5px;

  padding: 12px;

  right: 50px;

  left: 600px;

  top: 20px

  padding: 10px;

  overflow: auto;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: center;

  padding-bottom: 200px;

       pointer-events: none;

}

.b3-bottom-Justification{

  position: absolute;

  max-width: 500px;

  width: 40 %;

  

  bottom: 130px;

  right: 50px;

  left: 50%;

  transform: translate(-10%, -10%);

  float: left;

  color: #ffffff;

  text-shadow: 2px 2px 4px #000000;

  padding: 10px;

  overflow: auto;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: left;

  padding-bottom: 50px;

       pointer-events: none;

}

.b3-header-Justification{

   position: absolute;

  color: white;

  text-shadow: 2px 2px 4px #000000;

  font-size: 50px; 

  line-height: 50px;

  border-radius: 5px;

  padding: 12px;

  right: 50px;

  left: 600px;

  top: 20px

  padding: 10px;

  overflow: auto;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: center;

  padding-bottom: 200px;

       pointer-events: none;

}

.b4-bottom-Justification{

  position: absolute;

  color: #000000;

  text-shadow: 2px 2px 4px #ffffff;

  max-width: 500px;

  width: 50%;

  

  bottom: 40px;

  right: 50px;

  left: 50%;

  transform: translate(-10%, -10%);

  float: left;

  

  padding: 10px;

  overflow: auto;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: left;

  padding-bottom: 25px;

       pointer-events: none;

}

.b4-header-Justification{

  position: absolute;

  color: black;

  text-shadow: 2px 2px 4px #ffffff;

  font-size: 50px; 

  line-height: 50px;

  border-radius: 5px;

  padding: 12px;

  right: 50px;

  left: 600px;

  top: 20px

  padding: 10px;

  overflow: auto;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: center;

  padding-bottom: 200px;

       pointer-events: none;

}

.b5-bottom-Justification{

  position: absolute;

  max-width: 500px;

  width: 40 %;

    bottom: 100px;

  right: 50px;

  left: 50%;

  transform: translate(-10%, -10%);

  float: left;

  color: #ffffff;

  text-shadow: 2px 2px 4px #000000;

  padding: 10px;

  overflow: auto;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: left;

  padding-bottom: 100px;

       pointer-events: none;

}

.b5-header-Justification{

   position: absolute;

  color: white;

  text-shadow: 2px 2px 4px #000000;

  font-size: 50px; 

  line-height: 50px;

  border-radius: 5px;

  padding: 12px;

  right: 50px;

  left: 600px;

  top: 20px

  padding: 10px;

  overflow: auto;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: center;

  padding-bottom: 200px;

       pointer-events: none;

}

.b6-bottom-Justification{

  position: absolute;

  color: black;

  text-shadow: 2px 2px 4px #ffffff;

  max-width: 500px;

  width: 50%;

    bottom: 100px;

  right: 90px;

  left: 40%;

  transform: translate(-10%, -10%);

  float: left;

  padding: 10px;

  overflow: auto;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: left;

  padding-top: 100px;

       pointer-events: none;

}

.b6-header-Justification{

 position: absolute;

  color: black;

  text-shadow: 2px 2px 4px #ffffff;

  font-size: 50px; 

  line-height: 50px;

  border-radius: 5px;

  padding: 12px;

  right: 50px;

  left: 600px;

  top: 20px

  padding: 10px;

  overflow: auto;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: center;

  padding-bottom: 100px;

       pointer-events: none;

}

.b7-bottom-Justification{

  position: absolute;

color: black;

text-shadow: 2px 2px 4px #ffffff;

  max-width: 500px;

  width: 40 %;

    bottom: 100px;

  right: 50px;

  left: 50%;

  transform: translate(-10%, -10%);

  float: left;

  padding: 10px;

  overflow: auto;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: left;

  padding-bottom: 100px;

       pointer-events: none;

}

.b7-header-Justification{

   position: absolute;

  color: black;

  text-shadow: 2px 2px 4px #ffffff;

  font-size: 50px; 

  line-height: 50px;

  border-radius: 5px;

  padding: 12px;

  right: 50px;

  left: 600px;

  top: 20px

  padding: 10px;

  overflow: auto;

  text-align: justify;

  text-justify: inter-word;

  text-align-last: center;

  padding-bottom: 200px;

       pointer-events: none;



}



.center-right {

  position: right;

  bottom: 10px;

  right: 16px;

}



.center_one {

  text-align: right;

  z-index: 0;

  left: center;

  display: inline-flex;

  flex-direction: center;

  flex-wrap: nowrap;

  justify-content: center;

  align-items: flex-end ;

  align-content: bottom;

  height: calc(100vw / 2.35);

  max-height: 700px;

  position: absolute;

  text-align: left;

  margin-top: calc(100vw / -2.32);

  margin-left: 6px;

}



.dot-container {



  display: inline-flex;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: center;

  align-items: bottom;

  align-content: bottom;

  text-align: center;

}



.dot {

  display: inline-block;

  width: 10px;

  height: 10px;

  margin: 5px;

  cursor: pointer;

  transition: all 1s ease-in;

  border-radius: 20px;

  background-color: #ffffff;

}



.dot1 {

  display: inline-block;

  width: 10px;

  height: 10px;

  margin: 5px;

   transition: all 1s ease-in;

  border-radius: 20px;

  background-color: #ffffff;

}





.fade-animation {

  transition: all 1s ease-in;

  -webkit-animation-name: fade;

  animation-name: fade;

  -webkit-animation-duration: 5s;

  animation-duration: 5s;



}

/* banner - end */

.image-intro-container {

  width: calc(100% - 20px);

  margin: 25px 10px;

  text-align: left;

  display: inline-flex;

  flex-wrap: nowrap;

  flex-direction: column;

  justify-content: start;

  align-items: stretch;

  align-content: center;

}



.image-intro-left {

  margin-left: 0;

  display: inline-flex;

  flex-wrap: nowrap;

  flex-direction: row;

  justify-content: center;

  align-items: center;

  align-content: center;

}



.image-intro-right {

  margin: 0 0 0 20px;

  width: calc(100% - 20px);

  padding: 5px;

}



.intro-image {

  width: 100%;

  max-width: 240px;

  margin: auto;

}



.intro-image-title {

  margin: 0 auto 20px;

}



.intro-image-text {

  margin: 10px auto;

}



.left {

  text-align: left;

  margin-left: 0;

}



.justify {

  text-align: justify;

  margin-left: 0;

  margin-right: 0;

  width: 100%;

}



.title-1 {

  font-size: 64px;

  line-height: 1.5em;

  font-family: "varela", "lato", verdana;

 

}



.title-2 {

  font-size: 36px;

  line-height: 1.5em;

  font-family: "varela", "lato", verdana;

}



.title-3 {

  font-size: 28px;

  line-height: 1.5em;

  font-family: "varela", "lato", verdana;

}



.title-4 {

  font-size: 24px;

  line-height: 1.5em;

  font-family: "varela", "lato", verdana;

}



.title-5 {

  font-size: 20px;

  line-height: 1.5em;

  font-family: "varela", "lato", verdana;

}



.title-6 {

  font-size: 18px;

  line-height: 1.5em;

  font-family: "varela", "lato", verdana;

}



.small-text {

  font-size: 15px;

  line-height: 2em;

  word-spacing: 2px;

}



.normal-text {

  font-size: 16px;

  line-height: 2em;

  word-spacing: 2px;

}



.large-text {

  font-size: 16px;

  line-height: 2em;

  word-spacing: 2px;

}



.light-text {

  color: #bbbbbb;

}



.lighter-text {

  color: #eeeeee;

}



.-text {

  color: #ffffff;

}



.dark-text {

  color: #777777;

}



.darker-text {

  color: #000000;

}



.darkest-text {

  color: #333333;

}



.client-list-container {

  display: inline-flex;

  overflow: hidden;

  align-content: center;

  align-items: baseline;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: center;

  min-width: 320px;

  width: 100%;


}



.client-list-container2 {

  display: inline-flex;

  overflow: hidden;

  align-content: center;

  align-items: baseline;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: center;

  min-width: 480px;

  width: 100%;

  margin: 5px auto 30px;

  min-height: calc(100vh - 130px);

}



.client-container {

  display: inline-block;

  width: calc(100% - 16px);

  min-width: 178px;

  max-width: 180px;

  margin: 15px;

  text-align: center;

  vertical-align: middle;

  border-radius: 3px;

  background: transparent;

  border: 1px solid #eaeaea;

}



.client-image-container {

  display: inline-flex;

  align-content: center;

  align-items: center;

  flex-direction: column;

  justify-content: center;

  width: 100%;

  min-width: 176px;

  max-width: 176px;

  margin: auto;

  text-align: left;

  text-align: center;

  vertical-align: middle;

}



.client-image {

  width: 100%;

  min-width: 176px;

  max-width: 176px;

  height: 100%;

  min-height: 96px;

  max-height: 96px;

}



.partner-list-container-wrapper {

  width: 100%;

}



.partner-reseller-split-container {

  display: inline-flex;

  align-content: center;

  align-items: center;

  flex-direction: row;

  justify-content: stretch;

  flex-wrap: nowrap;

  width: 100%;

  margin: 5px auto 30px;

}



.partner-list-container {

  display: inline-flex;

  overflow: hidden;

  align-content: center;

  align-items: baseline;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: center;

  

  width: 100%;

  margin: 15px auto;

  border-right: 2px solid #b4b4b4;

  padding: 15px 0;

}



.partner-container {

  display: inline-block;

  width: calc(100% - 20px);

  

  max-width: 180px;

  margin: 10px;

  text-align: center;

  vertical-align: middle;

  border-radius: 3px;

  background: transparent;

  border: 1px solid #eaeaea;

}



.partner-image-container {

  display: inline-flex;

  align-content: center;

  align-items: center;

  flex-direction: column;

  justify-content: center;

  width: 100%;

 

  max-width: 176px;

  margin: auto;

  text-align: left;

  text-align: center;

  vertical-align: middle;

}



.partner-image {

  width: 100%;

  min-width: 176px;

  max-width: 176px;

  height: 100%;

  min-height: 96px;

  max-height: 96px;

}



.reseller-list-container-wrapper {

  width: 100%;

}



.reseller-list-container {

  display: inline-flex;

  overflow: hidden;

  align-content: center;

  align-items: baseline;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: center;

  

  width: 100%;

  margin: 15px auto;

  border-left: 2px solid transparent;

  padding: 15px 0;

}



.reseller-container {

  display: inline-block;

  width: calc(100% - 20px);

 

  max-width: 180px;

  margin: 10px;

  cursor: pointer;

  text-align: center;

  vertical-align: middle;

  border-radius: 3px;

  background: transparent;

  border: 1px solid #eaeaea;

}



.reseller-image-container {

  display: inline-flex;

  align-content: center;

  align-items: center;

  flex-direction: column;

  justify-content: center;

  width: 100%;

 

  max-width: 176px;

  margin: auto;

  text-align: left;

  text-align: center;

  vertical-align: middle;

}



.reseller-image {

  width: 100%;

  min-width: 176px;

  max-width: 176px;

  height: 100%;

  min-height: 96px;

  max-height: 96px;

}



.milestone-big,

.milestone-small,

.milestones-container {

  display: inline-flex;

  align-content: center;

  align-items: center;

  flex-direction: row;

  justify-content: center;

  flex-wrap: nowrap;

  margin: 20px auto 50px;

}



.milestone-small {

  background: #2f3153;

  background: linear-gradient(180deg, #2f3153 0%, #6D71CE 100%);

  min-width: 200px;

  min-height: 200px;

  max-width: 200px;

  max-height: 200px;

  border-radius: 200px;

  z-index: 10;

  margin: auto;

  padding: 10px;

}



.milestone-big {

  background: #2f3153;

  background: linear-gradient(180deg, #2f3153 0%, #6D71CE 100%);

  min-width: 300px;

  min-height: 300px;

  max-width: 300px;

  max-height: 300px;

  border-radius: 300px;

  z-index: 15;

  margin: auto;

  padding: 10px;

}



.circle-left {

  margin-right: -20px;

}



.circle-right {

  margin-left: -20px;

}



.subscribe-form {

  width: 100%;

  display: inline-flex;

  flex-direction: column;

  flex-wrap: nowrap;

  justify-content: space-between;

  align-items: center;

  align-content: center;

}



.subscribe-input {

  width: 100%;

  margin: 10px 0 20px;

  padding: 10px;

  background: #ffffff;

  border-radius: 2px;

}



.subscribe-input:active,

.subscribe-input:focus {

  text-decoration: none;

  border: none;

}



.subscribe-button {

  width: 100%;

  padding: 10px;

  background: #535795;

  border-radius: 2px;

  color: #ffffff;

  margin: 20px 0 10px;

  transition: all 0.5s ease-in;

}



.subscribe-button:active,

.subscribe-button:focus,

.subscribe-button:hover {

  background: #7377B5;

  cursor: pointer;

}



.footer-splitter-container {

  width: 100%;

  background: #2f3153;

  display: inline-flex;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: start;

  align-items: stretch;

  align-content: stretch;

  margin: 0 auto;

}



.footer-splitter {

 

  width: 100%;

  display: inline-flex;

  flex-direction: column;

  flex-wrap: nowrap;

  justify-content: start;

  align-items: stretch;

  align-content: stretch;

  margin: 10px 0;

  padding: 5px;

}



.split-max {

  max-width: calc(100% / 3.33);

}



.split-min {

  max-width: calc(100% / 4.3);

}



.footer-splitter:first-child {

  padding-left: 10px;

}



.footer-splitter:last-child {

  padding-right: 10px;

}



.footer-title {

  margin: 10px 0;
color: black;
}



.footer-text {

  margin: 5px 0;

  overflow-wrap: anywhere;

}



.milestone-text {

  font-family: "lato", "varela", verdana;

}



.footer-bottom-container {

  padding: 20px 5px;

  font-family: "lato", "varela", verdana;

  background: #1f2143;

}



.footer-admin-bottom-container {

  padding: 20px 5px;

  font-family: "lato", "varela", verdana;

}



.blank {

  display: block;

  visibility: hidden;

  height: 1px;

  margin: 25px auto;

  width: 100%;

}



.about-content-container {

  width: calc(100% - 20px);

  margin: 0 10px 30px;

}



.page-title {

  margin: 20px auto;

}



.service-content-container {

  width: calc(100% - 10px);

  margin: 0 5px;

  text-align: left;

  display: inline-flex;

  flex-wrap: nowrap;

  flex-direction: row;

  justify-content: start;

  align-items: start;

  align-content: center;

}



.service-content-container:last-child {

  margin-bottom: 25px;

}



.service-content-left-image,

.service-content-right-image {

  display: inline-flex;

  flex-wrap: nowrap;

  flex-direction: row;

  justify-content: center;

  align-items: center;

  align-content: center;

  margin-left: 0;

  margin-top: 0;

  padding-top: 15px;

}



.service-content-right-image {

  margin-right: 0;

}



.service-content-left-text,

.service-content-right-text {

  width: calc(100% - 15px);

  padding: 5px;

  margin: 0 0 0 15px;

}



.service-content-left-text {

  margin: 0 15px 0 0;

}



.service-image {

  width: 100%;

  max-width: 360px;

  margin: auto;

}



.service-content-title {

  margin: 0;

}



.service-content-text {

  margin: 0 auto 30px;

}



.footer-contact-container {

  display: inline-flex;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: stretch;

  align-items: stretch;

  align-content: stretch;

  width: 100%;

  margin: 0;

}



.footer-contact-icon {

  margin: auto 15px auto auto;

  line-height: 2rem;

  font-size: 22px;

  min-width: 20px;

}



.contact-content-container {

  width: calc(100% - 20px);

  margin: 30px 10px 0;

}



.address-map-container {

  width: 100%;

  margin: 0 auto 10px;

  border: 1px solid #eeeeee;

  border-radius: 2px;

  min-height: 400px;

}



.address-container {

  display: inline-flex;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: center;

  align-items: center;

  align-content: center;

  width: calc(100% - 20px);

  margin: 10px 20px 10px 0;

}



.phone-container {

  display: inline-flex;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: center;

  align-items: center;

  align-content: center;

  margin: 10px 20px 10px 0;

}



.address-contact-icon {

  margin: auto 10px auto 0;

  line-height: 40px;

  font-size: 20px;

  min-width: 40px;

  background: #535795;

  border-radius: 50px;

}



.address-text {

  margin: 5px auto 5px 0;

}



.address-title {

  margin: 0;

  width: 100%;

}



.address-container-wrapper {

  display: inline-flex;

  flex-direction: column;

  flex-wrap: nowrap;

  justify-content: start;

  align-items: stretch;

  align-content: start;

  width: 100%;

  margin: 0;

}



.phone-container-wrapper {

  display: inline-flex;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: start;

  align-items: stretch;

  align-content: start;

  width: 100%;

  margin: 0;

}

/*

.form-image-container {

  width: 100%;

  max-width: 1920px;

  min-height: calc(100vw / 2.4);

  max-height: 700px;

  vertical-align: middle;

  background-repeat: no-repeat;

  background-attachment: scroll;

  background-position: center center;

  background-size: 100% 100%;

}



.f-i-c-bg-1 {

  background-image: url("../images/slider/banner-1.jpg");

}



.f-i-c-bg-2 {

  background-image: url("../images/slider/banner-2.jpg");

}



.f-i-c-bg-3 {

  background-image: url("../images/slider/banner-3.jpg");

}



.f-i-c-bg-4 {

  background-image: url("../images/slider/banner-4.jpg");

}



.f-i-c-bg-5 {

  background-image: url("../images/slider/banner-5.jpg");

}



.f-i-c-bg-6 {

  background-image: url("../images/slider/banner-6.jpg");

}



.f-i-c-bg-7 {

  background-image: url("../images/slider/banner-7.jpg");

}



.form-image-container-shadow {

  width: 100%;

  background: rgba(0, 0, 0, 0.4);

}

*/

.product-content-container {

  width: calc(100% - 10px);

  margin: 25px 5px 0;

  text-align: left;

  display: inline-flex;

  flex-wrap: nowrap;

  flex-direction: row;

  justify-content: start;

  align-items: stretch;

  align-content: center;

}



.about-content-container .product-content-container {

  margin-top: 0;

}



.about-content-container .product-content-text {

  margin-top: 0;

}



.product-content-left-image,

.product-content-right-image {

  margin-left: 0;

  display: inline-flex;

  flex-wrap: nowrap;

  flex-direction: row;

  justify-content: center;

  align-items: center;

  align-content: center;

}



.product-content-right-image {

  margin-right: 0;

}



.product-content-left-text,

.product-content-right-text {

  margin: 0 0 0 15px;

  width: calc(100% - 15px);

  padding: 5px;

}



.product-content-left-text {

  margin: 0 15px 0 0;

}



.product-image {

  width: 100%;

  max-width: 360px;

  margin: auto;

}



.about-image {

  width: 100%;

  max-width: 512px;

  margin: auto;

}



.about-content-text {

  margin: 1px auto;

}

/*

.product-image-title {

  margin: 5px auto;

  font-family: "lato", "varela", verdana;

}



.product-image-text {

  margin: 5px auto;

  font-family: "lato", "varela", verdana;

}

*/



.contact-form {

  border-radius: 3px;

  margin: 0 5px;

  width: calc(100% - 10px);

  min-width: 500px;

  padding: 0;

}



.contact-input {

  width: 100%;

  margin: 0 0 20px auto;

  padding: 10px;

  background: #ffffff;

  border: 1px solid #eeeeee;

  border-radius: 3px;

  font-family: "lato", "varela", verdana;

}



.contact-input:last-child {

  margin-bottom: 0;

}



.contact-input:active,

.contact-input:focus {

  text-decoration: none;

}



.contact-textarea {

  width: 100%;

  margin: 0;

  padding: 10px;

  background: #ffffff;

  border: 1px solid #eeeeee;

  border-radius: 3px;

  font-family: "lato", "varela", verdana;

  resize: vertical;

  min-height: 150px;

  height: 150px;

  max-height: 200px;

}



.contact-textarea:active,

.contact-textarea:focus {

  text-decoration: none;

}



.contact-button {

  width: 100%;

  margin: 20px 0 0;

  padding: 10px;

  background-color: #414474;

  color: #ffffff;

  border: 1px solid #2f3153;

  border-radius: 3px;

  font-family: "lato", "varela", verdana;

  cursor: pointer;

  transition: all 0.5s ease-in;

}



.contact-button:active,

.contact-button:focus,

.contact-button:hover {

  background-color: #535795;

  color: #ffffff;

}



.contact-form-title {

  margin: 30px auto 10px;

}



.form-input-splitter {

  display: inline-flex;

  flex-wrap: nowrap;

  flex-direction: row;

  justify-content: center;

  align-items: stretch;

  align-content: stretch;

  width: 100%;

  margin: 20px 0 50px;

}



.form-input-left {

  margin: 0 10px;

  width: calc(100% - 20px);

}



.form-inner-container {

  display: inline-flex;

  flex-wrap: nowrap;

  flex-direction: column;

  justify-content: space-between;

  align-items: center;

  align-content: center;

  margin: 0;

  width: 100%;

  max-width: 400px;

}



.form-input-right {

  display: inline-flex;

  flex-wrap: nowrap;

  flex-direction: column;

  justify-content: space-between;

  align-items: center;

  align-content: center;

  margin: 0 10px 0 0;

  width: calc(100% - 10px);

}



.login-form-container {

  display: inline-flex;

  align-content: center;

  align-items: center;

  flex-direction: column;

  justify-content: center;

  width: 100%;

  min-height: 100vh;

}



.login-form {

  border-radius: 3px;

  margin: auto;

  width: 100%;

  min-width: 300px;

  max-width: 400px;

  padding: 40px 15px;

  background: #dedede;

  min-height: 80vh;

  display: inline-flex;

  align-content: center;
  
 

  align-items: center;

  flex-direction: column;

  justify-content: center;

}



.login-input {

  width: 100%;

  margin: 0 0 20px;

  padding: 10px;

  background: #ffffff;

  border-radius: 3px;
  
  border-color: #000066;

  font-family: "lato", "varela", verdana;

}



.login-input:active,

.login-input:focus {

  text-decoration: none;

  border: none;

}

.login-form-logo{
height: 50px;
width: 10px;
display: inline-block;

}

.login-button {

  width: 100%;

  margin: 40px 0 0;

  padding: 10px;

  height: 50px;

  border-radius: 3px;

  background: #000066;

  color: #fff;

  font-family: "lato", "varela", verdana;

  cursor: pointer;

}



.login-button:active,

.login-button:focus,

.login-button:hover {

  background-color: #57AAE1;

}



.data-list-container {

  display: inline-flex;

  align-content: stretch;

  align-items: stretch;

  flex-direction: column;

  flex-wrap: wrap;

  justify-content: start;

  width: calc(100% - 10px);

  margin: 0 auto 30px;

  min-height: calc(100vh - 200px);

}



.data-content-container {

  display: inline-flex;

  align-content: center;

  align-items: stretch;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: center;

  width: 100%;

  margin: 0 auto;

  padding: 0;

  border: 1px solid #000066;

  border-top: none;

}



.data-content-container:first-child {

  border-top: 1px solid #000066;

}



.data-content-div {

  border-right: 1px solid #000066;

  display: inline-flex;

  align-content: center;

  align-items: center;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: center;

  overflow-wrap: anywhere;

}



.dcd1 {

  width: 100%;

}



.dcd2 {

  width: 100%;

  max-width: 80px;

}



.dcd3 {

  width: 100%;

  max-width: 120px;

}



.dcd4 {

  width: 100%;

  max-width: 160px;

}



.dcd5 {

  width: 100%;

  max-width: 200px;

}



.data-content-div:last-child {

  border: none;

}



.data-left,

.data-right,

.dcd1 + .dark-text {

  padding: 15px 5px;

}



.dcd2 .data-left,

.dcd2 .data-right {

  padding: 0;

  overflow-wrap: anywhere;

}



.data-delete-button,

.data-delete-button:active,

.data-delete-button:focus,

.data-delete-button:hover,

.data-delete-button:visited {

  color: #FFFFFF;

  background: #F14455;

  text-decoration: none;

  padding: 8px;

  border-radius: 3px;

}



.data-extra-container {

  display: inline-flex;

  align-content: center;

  align-items: stretch;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: center;

  width: 100%;

  margin: 30px auto 0;

  padding: 0;

}



.data-load-button,

.data-load-button:visited {

  color: #FFFFFF;

  background: #535795;

  text-decoration: none;

  padding: 7px 10px;

  border-radius: 3px;

  min-width: 125px;

}



.data-load-button:active,

.data-load-button:focus,

.data-load-button:hover {

  background: #414474;

}



.dlb-left {

  margin-left: 0;

}



.dlb-right {

  margin-right: 0;

}



.contact-display-splitter {

  display: inline-flex;

  flex-wrap: nowrap;

  flex-direction: row;

  justify-content: center;

  align-items: stretch;

  align-content: stretch;

  width: 100%;

  margin: 0;

}



.contact-display-left {

  width: 100%;

  margin: 10px auto 10px 0;

}



.contact-display-right {

  width: 100%;

  margin: 10px 0 10px auto;

}



.service-list-container {

  list-style-type: none;

  width: 100%;

}



.service-list-text {

  list-style-type: none;

  width: 100%;

  margin: 5px 0;

}



.service-list-text::before {

  font-family: "Font Awesome 5 Free Solid";

  font-weight: 900;

  font-style: normal;

  content: "\f058";

  margin-right: 10px;

  font-size: 100%;

  color: #118811;

}



.title-split {

  display: inline-flex;

  flex-wrap: nowrap;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

  align-content: center;

  width: 100%;

  margin: 0 auto;

}



.title-view-button,

.title-view-button:visited {

  padding: 3px 12px;

  color: #515494;

  border: 1px solid #6367A5;

  border-radius: 3px;

  font-family: "lato", "varela", verdana;

  cursor: pointer;

  margin-right: 0;

}



.title-view-button:active,

.title-view-button:focus,

.title-view-button:hover {

  background-color: #6367A5;

  color: #FFFFFF;

}



.non-visible {

  margin-bottom: 25px;

  white-space: normal;

  content: "";

}



.no-bottom-margin {

  margin-bottom: 0;

}



.partner-reseller-title {

  padding: 5px;

  border-bottom: 0 solid #dedede;

}



.product-container-wrapper {

  display: inline-flex;

  flex-wrap: wrap;

  flex-direction: row;

  justify-content: start;

  align-items: stretch;

  align-content: center;

  width: 100%;

  margin: 10px auto 0;

}



.product-container {

  display: inline-flex;

  flex-wrap: nowrap;

  flex-direction: column;

  justify-content: stretch;

  align-items: center;

  align-content: center;

  width: calc(100% - 30px);

  margin: 10px 30px 10px 0;

  border: 1px solid #eaeaea;

  max-width: 200px;

  border-radius: 3px;

  pointer-events: active;

}



.product-title {

  margin: 5px auto;



}



.product-text {

  margin: 5px auto;



}



.product-image-container {

  display: inline-flex;

  flex-wrap: nowrap;

  flex-direction: column;

  justify-content: space-between;

  align-items: center;

  align-content: center;

  margin-top: 20px;

}



.product-list-image {

  width: 100%;

  max-width: 196px;

  margin: auto;

}



.product-desc-container {

  display: inline-flex;

  align-content: center;

  align-items: flex-start;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: flex-start;

  width: 100%;

  margin: 25px auto;

  text-align: left;

}



.product-desc-picture-container {

  display: inline-flex;

  align-content: center;

  align-items: center;

  flex-direction: column;

  justify-content: center;

  width: calc(100% - 10px);

  min-width: calc((100% - 10px) / 3);

  max-width: calc((100% - 10px) / 3);

  margin: 10px 5px;

}



.desc-picture {

  width: 100%;

  max-width: 300px;

  height: 100%;

}



.product-desc-info-container {

  display: inline-flex;

  align-content: flex-start;

  align-items: flex-start;

  flex-direction: column;

  justify-content: flex-start;

  width: calc(100% - 10px);

  margin: 10px 5px;

}



.product-spec-list-container {

  list-style-type: none;

  width: 100%;

}



.product-spec-list-text {

  list-style-type: none;

  width: 100%;

  margin: 5px 0;

}



.download-button {

  width: calc(100% - 10px);

  margin: 15px 5px;

  padding: 10px 5px;

  background-color: #535795;

  color: #ffffff;

  border: 1px solid #4A4A9A;

  border-radius: 3px;

  font-family: "lato", "varela", verdana;

  cursor: pointer;

  transition: all 0.5s ease-in;

  max-width: 300px;

}



.product-content-title {

  margin: 0 0 15px;

}



.product-content-text {

  margin: 15px 0;

}



.page-filler {

  width: 100%;

  min-height: 100vh;

}



.product-spec-list-text::before {

  font-family: "Font Awesome 5 Free Solid";

  font-weight: 900;

  font-style: normal;

  content: "\f192";

  margin-right: 10px;

  font-size: 75%;

  color: #777777;

}

.overview {
   text-align: justify;
   text-justify: inter-word;  
   text-align-last: left
  
}


.more-button {

  margin: auto auto 6px;

  padding: 10px 15px;

  background-color: rgba(0, 0, 0, 0.20);

  color: #ffffff;

  border: 1px solid rgba(0, 0, 0, 0.25);

  border-radius: 50px;

  

  cursor: pointer;

  transition: all 0.25s ease-in;

}



.more-button:active,

.more-button:focus,

.more-button:hover {

  padding: 10px 30px;

}





@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */



.client-container {

  display: inline-block;

  width: calc(100% - 16px);

  min-width: 155px;

  max-width: 155px;
  padding-left:  5px;
  margin: 1px;

  text-align: center;

  vertical-align: middle;

  border-radius: 3px;

  background: transparent;

  border: 1px solid #eaeaea;

}



.client-image-container {

  display: inline-flex;

  align-content: center;

  align-items: center;

  flex-direction: column;

  justify-content: center;

  width: 100%;

  min-width: 150px;

  max-width: 150px;

  margin: auto;

  text-align: left;

  text-align: center;

  vertical-align: middle;

}



.client-image {

  width: 100%;

  min-width: 150px;

  max-width: 150px;

  height: auto;



}
.title-2 {

  font-size: 36px;
  line-height: 1.5em;
 
}


.title-1 {
  font-size: 28px;
  line-height: 1.5em;
  font-family: "varela", "lato", verdana;
 
}
.title-6 {
  font-size: 12px;
  line-height: 1.5em;
  font-family: "varela", "lato", verdana;
}

.title-4 {
  font-size: 18px;
  line-height: 1.5em;
   font-family: "Open Sans", sans-serif;
  color: #444444;

}
.milestone-big,
.milestone-small,
.milestones-container {
  display: inline-flex;
  align-content: center;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  flex-wrap: nowrap;
  margin: 20px auto 50px;
}

.milestone-small {
  background: #2f3153;
  background: linear-gradient(180deg, #2f3153 0%, #6D71CE 100%);
  min-width: 100px;
  min-height: 100px;
  max-width: 100px;
  max-height: 100px;
  border-radius: 100px;
  z-index: 10;
  margin: auto;
  padding: 10px;
}

.milestone-big {
  background: #2f3153;
  background: linear-gradient(180deg, #2f3153 0%, #6D71CE 100%);
  min-width: 150px;
  min-height: 150px;
  max-width: 150px;
  max-height: 150px;
  border-radius: 150px;
  z-index: 15;
  margin: auto;
  padding: 10px;
}

.enquiry-form-container-wrapper {
  z-index: 90;
  bottom: 8px;
  right: 8px;
  float: right;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  align-content: stretch;
  max-width: 100%;
    margin: auto;
  transition: all 1s ease-in;
}
.main-container {
  max-width: 479px;
}
.topbar {
  border-bottom: 1px solid #eaeaea;
  background: #ffffff;
  padding: auto 0;
}


.sticky {
  position: relative;
  z-index: 10;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: auto;
}


.b1-header-Justification{
position: absolute;
color: white;
text-shadow: 2px 2px 4px #000000;
font-size: 70%; 
left: 50%;
top: 10%;
bottom: 70%;
padding: 1%;
line-height: 150%;
overflow: auto;
text-align: justify;
text-justify: inter-word;
text-align-last: left;
pointer-events: none;
}
.b1-bottom-Justification{
position: absolute;
font-size: 60%;
top: 25%;
bottom: 0%;
right: 0%;
line-height: 150%;
float: left;
text-shadow: 2px 2px 4px #000000;
overflow: auto;
text-align: justify;
text-justify: inter-word;
text-align-last: left;
pointer-events: none;
  overflow-wrap: break-word;
  word-wrap: break-word;


}
.b1-readmore{
position: absolute;
font-size: 60%;
top: 60%;
left: 45%;
right: 0%;
transform: translate(-1%, -1%);
float: left;
color: white;
text-shadow: 2px 2px 4px #000000;
padding: 3%;
padding-bottom: 10%;
text-align: right;
overflow: hidden;
}
.b2-header-Justification{
position: absolute;
color: white;
text-shadow: 2px 2px 4px #000000;
font-size: 70%; 
left: 50%;
top: 10%;
bottom: 70%;
padding: 1%;
line-height: 150%;
overflow: auto;
text-align: justify;
text-justify: inter-word;
text-align-last: left;
pointer-events: none;
}
.b2-bottom-Justification{
position: absolute;
font-size: 60%;
top: 25%;
left: 40%;
bottom: 0%;
right: 10%;
line-height: 150%;
float: left;
padding-right: 5%;
text-shadow: 2px 2px 4px #000000;
overflow: auto;
text-align: justify;
text-justify: inter-word;
text-align-last: left;
pointer-events: none;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.b2-readmore{
position: absolute;
font-size: 60%;
top: 60%;
left: 45%;
right: 0%;
transform: translate(-1%, -1%);
float: left;
color: white;
text-shadow: 2px 2px 4px #000000;
padding: 3%;
padding-bottom: 10%;
text-align: right;
overflow: hidden;
}
.b3-header-Justification{
position: absolute;
color: white;
text-shadow: 2px 2px 4px #000000;
font-size: 70%; 
left: 50%;
top: 10%;
bottom: 70%;
padding: 1%;
line-height: 150%;
overflow: auto;
text-align: justify;
text-justify: inter-word;
text-align-last: left;
pointer-events: none;
}
.b3-bottom-Justification{

position: absolute;
font-size: 60%;
top: 25%;
left: 40%;
bottom: 0%;
right: 10%;
line-height: 150%;
float: left;
padding-right: 0%;
text-shadow: 2px 2px 4px #000000;
overflow: auto;
text-align: justify;
text-justify: inter-word;
text-align-last: left;
pointer-events: none;
  display: flex;
    overflow-wrap: break-word;
  word-wrap: break-word;

}
.b3-readmore{
position: absolute;
font-size: 60%;
top: 40%;
left: 45%;
right: 0%;
bottom: 40%;
transform: translate(-1%, -1%);
float: left;
color: white;
text-shadow: 2px 2px 4px #000000;
padding: 10%;
padding-bottom: 10%;
text-align: right;
overflow: hidden;
}
.b4-header-Justification{
position: absolute;
color: black;
text-shadow: 1% 1% 1% #ffffff;
font-size: 70%; 
left: 50%;
top: 5%;
bottom: 70%;

line-height: 150%;
overflow: auto;
text-align: justify;
text-justify: inter-word;
text-align-last: left;
pointer-events: none;
}
.b4-bottom-Justification{
position: absolute;
color: #000000;
  font-size: 60%;
  line-height: 150%;
text-shadow: 1% 1% 1% #ffffff;
top: 25%;
bottom: 4%;
right: 5%;
left: 40%;

float: left;

overflow: auto;
text-align: justify;
text-justify: inter-word;
text-align-last: left;
padding-bottom: 5%;
pointer-events: none;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.b4-readmore{
position: absolute;
font-size: 60%;
top: 70%;
left: 45%;
right: 10%;
transform: translate(-1%, -1%);
float: left;
color: black;
text-shadow: 1% 1% 1% #ffffff;
padding: 3%;
padding-bottom: 10%;
text-align: right;
overflow: hidden;
}
.b5-header-Justification{
position: absolute;
color: white;
text-shadow: 2px 2px 4px #000000;
font-size: 70%; 
left: 50%;
top: 10%;
bottom: 70%;
padding: 1%;
line-height: 150%;
overflow: auto;
text-align: justify;
text-justify: inter-word;
text-align-last: left;
pointer-events: none;
}
.b5-bottom-Justification{
position: absolute;
font-size: 60%;
top: 30%;
left: 50%;
bottom: 20%;
right: 3%;
line-height: 150%;
float: left;
text-shadow: 2px 2px 4px #000000;
padding: 3%;
overflow: auto;
text-align: justify;
text-justify: inter-word;
text-align-last: left;
pointer-events: none;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.b5-readmore{
position: absolute;
font-size: 60%;
top: 60%;
left: 45%;
right: 0%;
transform: translate(-1%, -1%);
float: left;
color: white;
text-shadow: 2px 2px 4px #000000;
padding: 3%;
padding-bottom: 10%;
text-align: right;
overflow: hidden;
}
.b6-header-Justification{
position: absolute;
color: black;
text-shadow: 2px 2px 4px #000000;
font-size: 70%; 
left: 50%;
top: 10%;
bottom: 70%;
padding: 1%;
line-height: 150%;
overflow: auto;
text-align: justify;
text-justify: inter-word;
text-align-last: left;
pointer-events: none;
}
.b6-bottom-Justification{
position: absolute;
font-size: 60%;
color: black;
top: 30%;
left: 45%;
bottom: 20%;
right: 3%;
line-height: 150%;
float: left;
text-shadow: 2px 2px 4px #000000;
padding: 3%;
overflow: auto;
text-align: justify;
text-justify: inter-word;
text-align-last: left;
pointer-events: none;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.b6-readmore{
position: absolute;
font-size: 60%;
top: 60%;
left: 45%;
right: 0%;
transform: translate(-1%, -1%);
float: left;
color: black;
text-shadow: 2px 2px 4px #000000;
padding: 3%;
padding-bottom: 10%;
text-align: right;
overflow: hidden;
}
.b7-header-Justification{
position: absolute;
color: black;
text-shadow: 2px 2px 4px #000000;
font-size: 70%; 
left: 50%;
top: 10%;
bottom: 70%;
padding: 1%;
line-height: 150%;
overflow: auto;
text-align: justify;
text-justify: inter-word;
text-align-last: left;
pointer-events: none;
}
.b7-bottom-Justification{
position: absolute;
font-size: 60%;
top: 30%;
left: 45%;
bottom: 20%;
right: 3%;
line-height: 150%;
float: left;
color: black;
text-shadow: 2px 2px 4px #000000;
padding: 3%;
overflow: auto;
text-align: justify;
text-justify: inter-word;
text-align-last: left;
pointer-events: none;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.b7-readmore{
position: absolute;
font-size: 60%;
top: 60%;
left: 45%;
right: 0%;
transform: translate(-1%, -1%);
float: left;
color: black
text-shadow: 2px 2px 4px #000000;
padding: 3%;
padding-bottom: 10%;
text-align: right;
overflow: hidden;
}

}

@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */


.b1-bottom-Justification{

  position: absolute;
font-size:15px;
top: 55px;
  

  right: 2px;

  left: 150px;
  bottom: 5px;
  line-height: 12px;

 

  float: left;

  color: #ffffff;

  text-shadow: 2px 2px 4px #000000;
  padding: 2px;
  overflow: auto;
  text-align: justify;
  text-justify: inter-word;
  text-align-last: left;
  padding-bottom: 50px;
  pointer-events: none;
  border: 2px;
  border-radius: 4px;



}
 .title-2 {
  font-size: 36px;
  line-height: 1.5em;
  font-family: "varela", "lato", verdana;
 }

.title-1 {
  font-size: 29px;
  line-height: 1.5em;
  font-family: "varela", "lato", verdana;
 
}
.title-6 {
  font-size: 13px;
  line-height: 1.5em;
  font-family: "varela", "lato", verdana;
}
.title-4 {
  font-size: 18px;
  line-height: 1.5em;
  font-family: "varela", "lato", verdana;
}
.milestone-big,
.milestone-small,
.milestones-container {
  display: inline-flex;
  align-content: center;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  flex-wrap: nowrap;
  margin: 20px auto 50px;
}

.milestone-small {
  background: #2f3153;
  background: linear-gradient(180deg, #2f3153 0%, #6D71CE 100%);
  min-width: 120px;
  min-height: 120px;
  max-width: 120px;
  max-height: 120px;
  border-radius: 120px;
  z-index: 10;
  margin: auto;
  padding: 10px;
}

.milestone-big {
  background: #2f3153;
  background: linear-gradient(180deg, #2f3153 0%, #6D71CE 100%);
  min-width: 180px;
  min-height: 180px;
  max-width: 180px;
  max-height: 180px;
  border-radius: 180px;
  z-index: 15;
  margin: auto;
  padding: 10px;
}

.enquiry-form-container-wrapper {
  z-index: 90;
  bottom: 8px;
  right: 8px;
  float: right;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  align-content: stretch;
  max-width: 100%;
  margin: auto;
  transition: all 1s ease-in;
}
.main-container {
  max-width: 599px;
}
.topbar {
  border-bottom: 1px solid #eaeaea;
  background: #ffffff;
  padding: auto 0;
}


.sticky {
  position: relative;
  z-index: 10;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: auto;
}
 }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ 
 .title-2 {
  font-size: 36px;
  line-height: 1.5em;
  font-family: "varela", "lato", verdana;
    
}

.title-1 {
  font-size: 31px;
  line-height: 1.5em;
  font-family: "varela", "lato", verdana;
 
}
.title-6 {
  font-size: 14px;
  line-height: 1.5em;
  font-family: "varela", "lato", verdana;
}

.title-4 {
  font-size: 20px;
  line-height: 1.5em;
  font-family: "varela", "lato", verdana;
}
.milestone-big,
.milestone-small,
.milestones-container {
  display: inline-flex;
  align-content: center;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  flex-wrap: nowrap;
  margin: 20px auto 50px;
}

.milestone-small {
  background: #2f3153;
  background: linear-gradient(180deg, #2f3153 0%, #6D71CE 100%);
  min-width: 150px;
  min-height: 150px;
  max-width: 150px;
  max-height: 150px;
  border-radius: 150px;
  z-index: 10;
  margin: auto;
  padding: 10px;
}

.milestone-big {
  background: #2f3153;
  background: linear-gradient(180deg, #2f3153 0%, #6D71CE 100%);
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  border-radius: 200px;
  z-index: 15;
  margin: auto;
  padding: 10px;
}

.enquiry-form-container-wrapper {
  z-index: 90;
  bottom: 8px;
  right: 8px;
  float: right;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  align-content: stretch;
  max-width: 100%;
    margin: auto;
  transition: all 1s ease-in;
}

.sticky {
  position: relative;
  z-index: 10;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: auto;
}
}
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */
 .title-2 {
  font-size: 36px;
  line-height: 1.5em;
  font-family: "varela", "lato", verdana;
  
}

.title-1 {
  font-size: 32px;
  line-height: 1.5em;
  font-family: "varela", "lato", verdana;
 
}
.title-6 {
  font-size: 14px;
  line-height: 1.5em;
  font-family: "varela", "lato", verdana;
}
.title-4 {
  font-size: 21px;
  line-height: 1.5em;
  font-family: "varela", "lato", verdana;
}
.milestone-big,
.milestone-small,
.milestones-container {
  display: inline-flex;
  align-content: center;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  flex-wrap: nowrap;
  margin: 20px auto 50px;
}

.milestone-small {
  background: #2f3153;
  background: linear-gradient(180deg, #2f3153 0%, #6D71CE 100%);
  min-width: 180px;
  min-height: 180px;
  max-width: 180px;
  max-height: 180px;
  border-radius: 180px;
  z-index: 10;
  margin: auto;
  padding: 10px;
}

.milestone-big {
  background: #2f3153;
  background: linear-gradient(180deg, #2f3153 0%, #6D71CE 100%);
  min-width: 250px;
  min-height: 250px;
  max-width: 250px;
  max-height: 250px;
  border-radius: 250px;
  z-index: 15;
  margin: auto;
  padding: 10px;
}

.enquiry-form-container-wrapper {
  z-index: 90;
  bottom: 8px;
  right: 8px;
  float: right;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  align-content: stretch;
  max-width: 100%;
    margin: auto;
  transition: all 1s ease-in;
}
.main-container {
  max-width: 1024px;
}
.topbar {
  border-bottom: 1px solid #eaeaea;
  background: #ffffff;
  padding: auto 0;
}


.sticky {
  position: relative;
  z-index: 10;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: auto;
}

 }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
 .title-2 {
  font-size: 36px;
  line-height: 1.5em;
  font-family: "varela", "lato", verdana;
    
}

.title-1 {
  font-size: 32px;
  line-height: 1.5em;
  font-family: "varela", "lato", verdana;
 
}
.title-6 {
  font-size: 14px;
  line-height: 1.5em;
  font-family: "varela", "lato", verdana;
}
.title-4 {
  font-size: 21px;
  line-height: 1.5em;
  font-family: "varela", "lato", verdana;
}
 .milestone-big,
.milestone-small,
.milestones-container {
  display: inline-flex;
  align-content: center;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  flex-wrap: nowrap;
  margin: 20px auto 50px;
}

.milestone-small {
  background: #2f3153;
  background: linear-gradient(180deg, #2f3153 0%, #6D71CE 100%);
  min-width: 200px;
  min-height: 200px;
  max-width: 200px;
  max-height: 200px;
  border-radius: 200px;
  z-index: 10;
  margin: auto;
  padding: 10px;
}

.milestone-big {
  background: #2f3153;
  background: linear-gradient(180deg, #2f3153 0%, #6D71CE 100%);
  min-width: 300px;
  min-height: 300px;
  max-width: 300px;
  max-height: 300px;
  border-radius: 300px;
  z-index: 15;
  margin: auto;
  padding: 10px;
}

.enquiry-form-container-wrapper {
  z-index: 90;
  bottom: 8px;
  right: 8px;
  float: right;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: baseline;
  align-content: stretch;
  max-width: 100%;
    margin: auto;
  transition: all 1s ease-in;
}
.main-container {
  max-width: 1280px;
}
.topbar {
  border-bottom: 1px solid #eaeaea;
  background: #ffffff;
  padding: auto 0;
}


.sticky {
  position: relative;
  z-index: 10;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: auto;
}

 }
/*@media (min-width:1281px) {  hi-res laptops and desktops  }} */