html {
  font-family: 'Lato', sans-serif;
}

body {
  margin: auto;
  font-family: 'Lato', sans-serif;
}

h1 {
  text-align: center;
  overflow: hidden;
  padding: 50px;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
}

/* This is a universal / shared component - changing
 * it will impact all cards. Be careful how you use it.
 */
.layout-master,
.layout-master-100,
.layout-master-50,
.layout-master-33,
.layout-master-25,
.layout-master-20,
.layout-master-nospace {
  /*! padding: 5px 5px; */
  float: left;
  height: auto;
  box-sizing: border-box;
  margin: 0;
  width: 33.33%;
}

.layout-master-100 {
  width: 100%;
  /*! padding: 1% 5%; */
  /*! padding-bottom: 5%; */
}

.layout-master-50 {
  width: 50%;
}

.layout-master-33 {
  width: 33.33%;
}

.layout-master-25 {
  width: 25%;
}

.layout-master-20 {
  width: 20%;
}

.layout-master-nospace {
  /*! padding: 5px 5px; */
  width: 50%;
  /*! padding-left: 0; */
  /*! padding-right: 0; */
}

div#lm-care.layout-master {
  padding: 5px 5px;
  width: 25%;
}

div#lm-care.layout-master:hover {}

/* These are default values
 * To be completed ...
 */
div#principles.card-t06 {
  background-color: #baa57b3b;
}

.card-title {
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  font-family: 'Lato', sans-serif;
  padding-bottom: 0;
}

.card-desc {}

/* ------------- Card Type 01 ------------- */
.container-card-t01 {
  /* The container helps categorize our modules.
  *  We Should copy/paste modules by container.
  */
  overflow: hidden;
  padding: 4rem;
}

.card-t01 {
  /*! background-color: #00273d; */
  margin-top: -4px;
  color: black;
  width: 100%;
  float: right;
  overflow: hidden;
}

.card-t01-title {
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  padding-top: 20px;
}

.card-t01-desc {
  /*! padding: 10px; */
  text-align: left;
  font-size: 18px;
  padding: 5%;
  height: 120px;
}

.card-t01-desc:hover {
  transition: transform .3s ease-out;
  transform: translateY(5px);
}

div.card-image img {
  width: 100%;
  height: auto;
}

div.card-image img:hover {
  transition: transform .3s ease-out;
  transform: translateY(5px);
}

/* ------------- Card Type 02 ------------- */
.container-card-t02 {
  /* The container helps categorize our modules.
  *  We Should copy/paste modules by container.
  */
  overflow: hidden;
}

.card-t02-01, .card-t02-02, .card-t02-03,
.card-t02-04, .card-t02-05, .card-t02-06 {
  height: auto;
  font-family: 'Lato', sans-serif;
  line-height: 1.8em;
  padding: 20px;
  border-top: 5px solid #ff5757;
}

/* Card Type 02 */
.card-t02-01 {
  background-color: #ecf6f5;
  color: #52c0b3;
}

.card-t02-02 {
  background-color: #f7efe6;
  color: #f79726
}

.card-t02-03 {
  background-color: #f9f3f3;
  color: #f26865;
}

.card-t02-04 {
  background-color: #f5ecf6;
  color: #9352c0;
}

.card-t02-05 {
  background-color: #e9e6f7;
  color: #266ef7;
}

.card-t02-06 {
  background-color: #f9f8f3;
  color: #f2c865;
}

/* Card Type 02 Icons */
.card-t02-icons {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 6%;
}

/* Card Type 02 Title */
.card-t02-title {
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  padding-top: 20px;
}

/* Card Type 02 Description/Text */
.card-t02-desc {
  padding: 10px;
  text-align: left;
  font-size: 18px;
  color: #3D3D3D;
}

/* ------------- END Card Type 02 ------------- */
/* ------------- Card Type 03 ------------- */
.container-card-t03 {
  /* The container helps categorize our modules.
  *  We Should copy/paste modules by container.
  */
  overflow: hidden;
}

.card-t03-01, .card-t03-02, .card-t03-03,
.card-t03-04, .card-t03-05, .card-t03-06 {
  height: auto;
  font-family: 'Lato', sans-serif;
  line-height: 1.8em;
  padding: 20px;
  border-top: 5px solid #ff5757;
}

/* Card Type 03 */
.card-t03-01 {
  background-color: #ecf6f5;
  color: #52c0b3;
}

.card-t03-02 {
  background-color: #f7efe6;
  color: #f79726
}

.card-t03-03 {
  background-color: #f9f3f3;
  color: #f26865;
}

.card-t03-04 {
  background-color: #f5ecf6;
  color: #9352c0;
}

.card-t03-05 {
  background-color: #e9e6f7;
  color: #266ef7;
}

.card-t03-06 {
  background-color: #f9f8f3;
  color: #f2c865;
}

/* Card Type 03 Icons */
.card-t03-icons {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 6%;
  float: left;
}

/* Card Type 03 Title */
.card-t03-title {
  font-size: 30px;
  text-align: left;
  font-weight: bold;
  padding-top: 20px;
}

/* Card Type 03 Description/Text */
.card-t03-desc {
  padding: 10px;
  text-align: left;
  font-size: 18px;
  color: #3D3D3D;
}

/* ------------- END Card Type 03 ------------- */
/* ------------- Card Type 04 ------------- */
.container-card-t04 {
  /* The container helps categorize our modules.
  *  We Should copy/paste modules by container.
  */
  overflow: hidden;
}

.card-t04 {
  height: auto;
  font-family: 'Lato', sans-serif;
  line-height: 1.8em;
  padding: 20px;
  background-color: white;
  border: 1px solid #f0f0f0;
  box-shadow: 0 4px 7px rgba(0, 0, 0, .05);
  border-top: 5px solid #1b95f5;
  background-color: #f5f7f9;
  /* or swap this with white and have the background this color*/
}

/* Card Type 04 Icons */
.card-t04-icons {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 6%;
}

/* Card Type 04 Title */
.card-t04-title {
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  padding-top: 20px;
}

/* Card Type 04 Description/Text */
.card-t04-desc {
  padding: 10px;
  text-align: left;
  font-size: 18px;
  color: #3D3D3D;
}

/* ------------- END Card Type 04 ------------- */
/* ------------- Card Type 05 ------------- */
.container-card-t05 {
  /* The container helps categorize our modules.
  *  We Should copy/paste modules by container.
  */
  overflow: hidden;
  padding: 4%;
  /*! max-width: 1520px; */
}

.card-t05-01, .card-t05-02, .card-t05-03,
.card-t05-04, .card-t05-05, .card-t05-06 {
  height: auto;
  font-family: 'Lato', sans-serif;
  line-height: 1.8em;
}

.card-t05-01 {
  background-color: #e5f9ff;
  color: #52c0b3;
  margin: 1%;
  /*! min-height: 250px; */
}

.card-t05-02 {
  background-color: #f7efe6;
  color: #f79726
}

.card-t05-03 {
  background-color: #f9f3f3;
  color: #f26865;
}

.card-t05-04 {
  background-color: #f5ecf6;
  color: #9352c0;
}

.card-t05-05 {
  background-color: #e9e6f7;
  color: #266ef7;
}

.card-t05-06 {
  background-color: #f9f8f3;
  color: #f2c865;
}

/* Card Type 05 Title */
.card-t05-title {
  /*! font-size: 30px; */
  text-align: right;
  font-weight: bold;
  padding-top: 20px;
}

/* Card Type 05 Description/Text */
.card-t05-desc {
  padding: 10%;
  text-align: left;
  font-size: 18px;
  color: black;
  border-bottom: 3px solid #13273b;
}

/* ------------- END Card Type 05 ------------- */
/* ------------- Card Type 06 ------------- */
.container-card-t06 {
  /* The container helps categorize our modules.
  *  We Should copy/paste modules by container.
  */
  overflow: hidden;
}

.card-t06,
.card-t07 {
  background-color: white;
  color: black;
  min-height: 100%;
  width: 50%;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-image-left {
  display: flex;
}

div.card-image-left img {
  width: 50%;
  height: auto;
  object-fit: cover;
}

.card-t06-desc,
.card-t07-desc {
  padding: 50px;
  font-size: 1.4rem;
  font-weight: 100;
  /*! letter-spacing: .7px; */
  line-height: 1.6;
}

/* ------------- END Card Type 06 ------------- */
/* ------------- Card Type 07 ------------- */
.container-card-t07 {
  /* The container helps categorize our modules.
  *  We Should copy/paste modules by container.
  */
  overflow: hidden;
}

.card-image-right {
  display: flex;
  flex-direction: row-reverse;
}

div.card-image-right img {
  width: 50%;
  height: auto;
  object-fit: cover;
}

/* ------------- END Card Type 07 ------------- */
/*
*
*
*
*/
/* ------------- MEDIA QUERIES ------------- */
@media only screen and (max-width: 1385px) {

  .layout-master,
  .layout-master-33,
  .layout-master-nospace {
    padding: 5px 5px;
    float: left;
    width: 50%;
  }

  .layout-master-nospace {
    padding: 5px;
    width: 100%;
  }

  /* Card Type 01 */
  .card-t01 {
    height: auto;
  }

  /* Card Type 06 */
  .layout-master-100 {
    width: 100%;
    /*! padding: 1% 5%; */
  }

  div#lm-about.layout-master-100 {
    padding-bottom: 0px;
  }

  .card-t06 {
    width: 100%;
    overflow: hidden;
  }

  div.card-image-left img,
  div.card-image-right img {
    width: 100%;
    height: auto;
  }

  .card-image-left,
  .card-image-right {
    flex-direction: column;
  }

  .card-t06-desc, .card-t07-desc {
    padding: 9%;
  }

  /* Card Type 07 */
  .card-t07 {
    width: 100%;
    overflow: hidden;
  }

  /* Universal Components */
  .card {
    width: 100%;
  }
}

@media only screen and (max-width: 37.5em) {

  .layout-master,
  .layout-master-33,
  .layout-master-nospace {
    padding: 5px 5px;
    float: left;
    width: 100%;
  }

  .layout-master-nospace {
    padding: 5px;
  }

  /* Used in Card 06 */
  .layout-master-100 {
    width: 100%;
    /*! padding: 1% 5%; */
  }

  div#lm-about.layout-master-100 {
    padding-bottom: 0;
  }

  .container-card-t05 {
    padding: 0;
  }
}