html {
    position: relative;
    min-height: 100%;
}

body {
  margin: 0 0 100px;
  padding: 0;
  font-size: 18px;
}

h1 {
  font-size: 2em;
}

.frokMu .h1-hero {
 font-style: normal;
 color: #000;
 margin: 5px 0 20px 0;
 /*font-size: 2.2em;*/
}

h1 {
  font-size: 2.5em;
  line-height: 60px;
  font-weight: 500;
}

h2 {
 margin-top: 0px;
 font-size: 2em;
}

h3 {
  margin-top: 0px;
  font-size: 1.8em;
}

.row {
  margin-bottom: auto;
}

.card-panel {
  border-radius: 5px;
}

#mb-container a,
a.card-btn {
  /* color: #039be5 !important; */
  /* color: #617ba9 !important; */
  color: #000;
}

#mb-container a.btn {
  color: #fff !important;
}

nav .logo {
  position: inherit;
  font-size: 3em;
  font-weight: 100;
  margin-right: 105px;
  color: #000;
  display: flex;
  align-items: center;
}

.nav-wrapper {
  display: flex;
  justify-content: space-between;
}

.logo span {
  color: #f44336;
}
/*
.logo img {
  width: 60%;
  margin-right: 5px;
  vertical-align: middle;
}
*/

#mb-container nav,
#mb-container footer {
  background-color: #2d3f4f;
  overflow: hidden;
  padding: 0 20px;
  box-shadow: none!important;
}

#mb-container nav {
  /*background-color: #f5f8fa;*/
  background-color: #fff;
  box-shadow: none;
  /*border-bottom: 1px solid #617ba9;*/
}

#mb-container footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    overflow: hidden;
  padding: 5px 16px;
  font-size: 12px;
  text-align: right;
  color: #fff;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

footer a {
  color: inherit !important;
}

#mb-container nav ul a:hover {
  background-color: transparent;
}

#mainNav .active {
  font-weight: bold;
  /*
  background-color: #dbe7ff;
  color: #fff !important;
  */
}

#mobileNav {
  display: none;
  text-align: center;
  font-size: 20px;
  margin: 0;
}
#mobileNav.open {
  display: block;
}

#mobileNav.open li {
  border-bottom: 1px solid #dbe7ff;
  padding: 10px 0;
}

.frokMu {
  display: flex;
}

.section {
  padding: 40px 40px;
}

.parallax img {
display: block;
}
.center-align {width: 100%;}

.valign-wrapper	{
    top: 50%;
    left: 30%;
    position: absolute;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 20px;
    opacity: 0.7;
    width: 510px;
	}
.section-odd {
  /*background-color: #dbe7ff;*/
  /*background-color: #f5f8fa;*/
  /*
  -webkit-clip-path: polygon(0px 0px,100% 0px,100% 100%,0px calc(100% - 5vw));
  clip-path: polygon(0px 0px,100% 0px,100% 100%,0px calc(100% - 5vw));
  */
}

.jIEpi {
  -webkit-clip-path: polygon(0px 0px,100% 8%,100% 100%,0% 100%);
  clip-path: polygon(0px 0px,100% 8%,100% 100%,0% 100%);
}

.easy-steps {
  margin: 0 15px;
  padding: 0;
}
.easy-steps li{
  margin: 0;
  padding: 0;
}
.easy-steps li span {
  background-color: #f5f8fa;
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  border-radius: 10px;
}

.practial-uses li {
  margin-bottom: 10px;
}

.practial-uses li::before {
  content: '';
  display: inline-block;
  height: 20px;
  width: 20px;
  background-image:url('img/bullet.svg');
  margin-right: 5px;
  vertical-align: middle;
}

#mb-container .card,
#mb-container .card-action {
  border-radius: 10px;
  overflow: hidden;
}

.frokMu h1 {
  /* color: #039be5; */
  color: #617ba9;
  font-style: italic;
  font-weight: 900;
  margin: 0 20px 20px;
}

.frokMu h2 {
  color: #617ba9;
  margin: 0;
}

.frokMu h3 {
  line-height: 1.7em;
  margin-bottom: 0;
}

.frokMu .hero-content {
  padding: 20px 60px;
  background-color: #fff;
  border-radius: 10px;
}

.frokMu .hero-content {
  background-color: #fff;
}

.blob, .blob-feedback {
  position: relative;
  background-color: #fff;
  /*border: 8px solid #383f72;*/
  border: 8px solid #2d3f4f;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  -webkit-box-shadow: 2px 2px 4px #383f72;
  -moz-box-shadow: 2px 2px 4px #383f72;
  box-shadow: 2px 2px 4px #383f72;
  max-width: 1000px;
}

.blob:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  right: -50px;
  bottom: 311px;
  border: 25px solid;
  /*border-color: transparent transparent #383f72 #383f72;*/
  border-color: transparent transparent #2d3f4f #2d3f4f;
}

.blob:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  right: -30px;
  bottom: 319px;
  border: 15px solid;
  border-color: transparent transparent #fff #fff;
}

.blob-feedback span {
  color: #617ba9;
  font-size: 18px;
  font-style: italic;
  font-weight: bold;
  display: inline-block;
  margin: 20px 20px 0 20px;
}
.blob-feedback:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  right: 70px;
  bottom: -50px;
  border: 25px solid;
  /*border-color: #383f72 #383f72 transparent transparent;*/
  border-color: #2d3f4f #2d3f4f transparent transparent;

}

.blob-feedback:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  right: 78px;
  bottom: -28px;
  border: 15px solid;
  border-color: #fff #fff transparent transparent;
}

.frokMu .hero-image {
  padding: 0 0 0 40px;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  width: 100%;
}

.hero-action {
  text-align: center;
  margin: 20px 0;
}

.btn {
  border-radius: 4px;
}

.card .card-content .card-title {
  margin-top: 0px;
  font-size: 1.2em;
  font-weight: 600;
  line-height: initial;
  display: block;
}

.card .card-content {
  color: #0009;
  padding-bottom: 0;
}

.card {
  margin-bottom: 5em;
  border-radius: 10px;
  overflow: hidden;
}

.card .card-action {
  border: none;
}

.pricing-box {
  /*
  display: flex;
  justify-content: flex-end;
  align-items: end;
  */
  text-align: center;
}

.pricing-box ul {
  display: table;
  margin-right: auto;
  margin-left: auto;
}
.pricing-main {
  display: flex;
  align-items: flex-end;
}

.pricing-main .card {
  margin: 0 80px;
  text-align: center;
}

.pricing-main li:before,
.pricing-box li:before {
  content: '✓';
  color: #2196f3;
  padding-right: 3px;
  font-family: system-ui;
  font-weight: bold;
}
.pricing-main ul {
  display: inline-block;
  flex-direction: column;
  align-items: center;
  text-align: left;
  margin: 0;
}
.pricing-main li,
.pricing-box li {
  text-align: left;
  line-height: 2em;
}

main .pricing-pre {
  margin-top: 20px;
  text-align: center;
  font-size: 1.5em;
}

.card-price h2 {
  display: inline-block;
}

.card-price h5 {
  display: inline;
}

.text-size-footnote {
  margin-top: 80px;
  font-size: 11px;
  text-align: center;
}

#contact-form {
  margin: 20px;
  color: #666;
}

#contact-form h5 {
  color: #617ba9;
  margin: 0 0 20px 0;
}

#contact-form label {
  font-size: 14px;
}
#contact-form textarea {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px 0;
}

#contact-form input {
  border-bottom: 1px solid #ccc;
  margin: 0 0 10px 0;
}

#errorElement {
  color: red;
  margin: 0 0 10px 0;
}

.compliance {
  padding: 10px 0;
}

.compliance,
.compliance h2{
  margin: 0;
  font-size: 12px;
  text-align: left;
}
.compliance li {
  text-align: left;
  line-height: 18px;
}

.footer {
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 600px) {
  .section {
    padding: 20px 20px;
  }
  .frokMu {
    flex-direction: column-reverse;
    padding: 40px 0;
    text-align: center;
  }
  .frokMu .hero-content {
    padding: 20px;
    margin: 20px 10px;
  }
  .frokMu .hero-content:before,
  .frokMu .hero-content:after {
    display: none;
  }
  .hero-action {
    text-align: center;
    margin: 40px 0 0 0;
  }
  .frokMu .hero-image {
    padding: 0;
  }
  .hero-image img {
    max-width: 100%;
    height: auto;
  }
  .jIEpi {
    padding: 40px 0;
    -webkit-clip-path: polygon(0px 0px,100% 2%,100% 100%,0% 100%);
    clip-path: polygon(0px 0px,100% 2%,100% 100%,0% 100%);
  }
  .card {
    margin-bottom: 2em;
  }
  .pricing-main {
    flex-direction: column;
  }
  .pricing-main .col {
    margin-bottom: 20px;
  }
  .pricing-main .card {
    margin: 0;
  }
  .pricing-main .card-content ul li {
    font-size: 1.5em;
  }

  .contact-page .card{
    box-shadow: none;
  }
  footer {
    padding: 5px 5px;
    text-align: center;
  }
}

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

}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {
  #myDropdown {
    left:0;
    width: 100%;
  }
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}