* {
   box-sizing: content-box;
}

img {
   vertical-align: inherit;
}

body {
   font-family: "Exo 2", sans-serif;
   font-size: 14px;
   background: #f7f8f8;
   margin: 0;
   line-height: normal;
}

.bgtop {
   position: absolute;
   width: 100%;
   top: 0;
   left: 0;
   z-index: 1;
   height: 807px;
   min-width: 1000px;
   background: url(../img/lp/bgtop.png) center top no-repeat;
}

.container {
   width: 1000px;
   margin: 0 auto;
   position: relative;
   z-index: 10;
}

.mainmenu {
   margin-top: 28px;
   margin-bottom: 22px;
   margin: 0;
   position: fixed;
   background-color: #2b5d83;
   width: 100%;
   z-index: 1000;
   padding-left: 10px;
   padding-top: 10px;
}
.mainmenu ul {
   float: right;
   margin: 0 50px 0 0;
   padding: 0;
}
.mainmenu li {
   display: inline-block;
   margin: 0 10px;
}
.mainmenu li > a {
   color: #f7f8f8;
   font-size: 18px;
}
.mainmenu li > a:hover {
   color: #f74235;
}
.mainmenu li > a.btn.sign-in {
   text-decoration: none;
}
.mainmenu li > a.btn.sign-in:hover {
   color: #0a1b7e;
}

.branding {
   display: none;
   position: relative;
   height: 200px;
   margin-bottom: 80px;
}
.branding .logo {
   margin-left: 21px;
}
.branding .tagline {
   position: absolute;
   top: 105px;
   left: 276px;
   width: 370px;
   font-size: 26px;
   color: #f9fafb;
}

.promovideo {
   position: relative;
   height: 400px;
}
.promovideo .hint {
   position: absolute;
   top: 165px;
   left: 304px;
   font-size: 18px;
   color: #454545;
   width: 156px;
   text-align: right;
}
.promovideo .video-container {
   float: left;
   margin-left: 584px;
   margin-top: 88px;
   border: 2px solid #dfdfdf;
   line-height: 0;
   box-shadow: 5px 6px 10px rgba(0, 0, 0, 0.2);
}

.reasons {
   margin-bottom: 80px;
}
.reasons .h {
   position: relative;
   /* width: 70%; */
   min-height: 112px;
   font-size: 40px;
   color: #666;
   font-weight: 700;
  
   padding-top: 22px;
   /* margin-left: 116px; 
    padding-left: 154px;
   */
   margin-bottom: 70px;
   text-align: center;
}
.reasons .h:before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 125px;
   height: 135px;
   background: url(../img/lp/hicon1.png) no-repeat;
}
.reasons .list {
   margin: 0;
   padding: 0;
   list-style: none;
}
.reasons .list > li {
   float: left;
   width: 50%;
   margin-bottom: 44px;
}
.reasons .list .icon {
   float: left;
   width: 121px;
   text-align: center;
}
.reasons .list .text {
   font-size: 20px;
   color: #79797a;
   margin: 18px 20px 0 155px;
}

.for-whom {
   margin-bottom: 80px;
}
.for-whom .h {
   position: relative;
   /* width: 70%; */
   min-height: 120px;
   font-size: 40px;
   color: #666;
   font-weight: 700;
   /* padding-left: 154px;
    margin-left: 116px;
    */
   padding-top: 14px;
  
   margin-bottom: 82px;
   text-align: center;
}
.for-whom .h:before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 123px;
   height: 134px;
   background: url(../img/lp/hicon2.png) no-repeat;
}
.for-whom .list {
   margin: 0;
   padding: 0;
   list-style: none;
   text-align: center;
}
.for-whom .list > li {
   width: 33%;
   display: inline-block;
   margin-bottom: 65px;
}
.for-whom .list .icon {
   height: 100px;
   padding-bottom: 8px;
}
.for-whom .list .text {
   font-size: 20px;
   color: #666;
}

.value {
   color: #666;
   margin-bottom: 80px;
}
.value .h {
   position: relative;
   /* width: 70%; */
   min-height: 110px;
   font-size: 40px;
   font-weight: 700;
   /* padding-left: 154px; margin-left: 78px;
   */
   padding-top: 24px;
   
   margin-bottom: 70px;
   text-align: center;
}
.value .h:before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 95px;
   height: 152px;
   background: url(../img/lp/hicon3.png) no-repeat;
}
.value .list {
   margin: 0 60px;
   padding: 0;
   list-style: none;
}
.value .list .red {
   color: #e7792a;
}
.value .list > li {
   float: left;
   width: 45%;
}
.value .list > li:first-child {
   margin-left: 0%;
   margin-right: 10%;
}
.value .list > li small {
   font-size: 14px;
   font-style: italic;
   display: block;
   line-height: 20px;
   margin-top: 2px;
}
.value .list > li .ih {
   font-size: 40px;
   font-weight: bold;
   margin-bottom: 30px;
   text-align: center;
}
.value .list > li .price {
   font-size: 24px;
   border-top: 2px solid #8a8a8a;
   border-bottom: 2px solid #8a8a8a;
   padding: 12px 0 16px;
   margin-bottom: 12px;
}
.value .list .features {
   font-size: 18px;
   margin: 0 0 36px;
   padding: 0;
   list-style: none;
}
.value .list .features.nomb {
   margin-bottom: 0;
}
.value .list .features > li {
   margin-bottom: 16px;
}
.value .list .contrib {
   font-size: 24px;
   border-top: 2px solid #8a8a8a;
   border-bottom: 2px solid #8a8a8a;
   padding: 28px 0 34px;
}

.to-start {
   color: #666;
   margin-bottom: 74px;
}
.to-start .h {
   position: relative;
   /* width: 60%; */
   min-height: 154px;
   font-size: 40px;
   font-weight: 700;
   /* padding-left: 190px; */
   /* margin-left: 116px; */
   margin-bottom: 50px;
   text-align: center;
}

.to-start .h:before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 155px;
   height: 154px;
   background: url(../img/lp/hicon4.png) no-repeat;
}
.to-start .list {
   margin: 0;
   padding: 0;
   list-style: none;
}
.to-start .list > li {
   float: left;
   width: 21%;
   margin: 0 2%;
}
.to-start .list .icon {
   height: 94px;
   margin-bottom: 32px;
   display: grid;
   place-items: center;
}
.to-start .list .text {
   font-size: 20px;
   text-align: center;
}

.order-form-container {
   width: 572px;
   margin: 266px auto 0;
}
.order-form .h {
   font-size: 38px;
   font-weight: 700;
   color: #666;
   text-align: center;
   margin: 0 -10px 26px;
}
.order-form .line {
   margin-bottom: 15px;
}
.order-form .hinput {
   position: relative;
}
.order-form .hinput .holder {
   position: absolute;
   top: 0;
   right: 2px;
   width: 118px;
   background: #efeeee;
   color: #555;
   font-size: 15px;
   padding: 7px 3px 8px 4px;
   border: 1px solid #cdcccd;
   border-radius: 0 3px 3px 0;
   text-align: center;
}
.order-form .hinput > small {
   margin-left: 165px;
   display: inline-block;
}
.order-form .line .hinput > input.txti {
   width: 255px;
}
.order-form .line label {
   float: left;
   width: 134px;
   margin-right: 30px;
   margin-top: 7px;
   text-align: right;
   font-weight: 700;
   font-size: 15px;
   color: #333;
}
.order-form .line input.txti {
   font-family: "Exo 2", sans-serif;
   font-size: 15px;
   width: 372px;
   padding: 7px 14px 8px;
   background: #fff;
   border: 1px solid #cdcccd;
   border-radius: 3px;
   outline: none;
   box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.06);
}
.order-form .right {
   text-align: right;
}
.order-form .sub {
   color: #fff;
   background: #f74235;
   border: 1px solid #d45047;
   border-radius: 4px;
   text-transform: uppercase;
   padding: 10px 20px 8px;
   text-shadow: 0 0 1px #a94b44;
   outline: none;
   cursor: pointer;
}
.order-form .sub:hover {
   background: #fd291a;
}
.order-form .sub:active {
   position: relative;
   top: 1px;
}
.order-form .sep {
   width: 100%;
   height: 1px;
   background: #e6e6e6;
   margin-bottom: 14px;
}

.footer {
   color: #45a4d6;
   position: absolute;
   width: 100%;
   bottom: 175px;
}
.footer .col {
   float: left;
   width: 33%;
}
.footer .dev {
   margin-top: -13px;
}
.footer .mmlogo {
   position: relative;
   top: 7px;
   left: 2px;
}

.bgbottom {
   position: relative;
   width: 100%;
   height: 1157px;
   min-width: 1000px;
   background: url(../img/lp/bgbottom.png) center top no-repeat;
   overflow: hidden;
}

.btn {
   border: 2px solid #f7f8f8;
   border-radius: 4px;
   padding: 2px 22px 4px;
}
.btn:hover {
   background: #f7f8f8;
   color: #0a1b7e;
}

.clearfix:before,
.clearfix:after {
   content: " ";
   display: table;
}
.clearfix:after {
   clear: both;
}
.clearfix {
   zoom: 1;
}
.logo {
   width: 248 px;
}

@media screen and (max-width: 430px) {
   .promovideo {
      position: relative;
      height: 300px;
   }
   .for-whom {
      margin-bottom: 5px;
   }
   .value {
      color: #666;
      margin-bottom: 5px;
   }
   .reasons {
      margin-bottom: 30px;
   }
}
