/********************************************************************
            ==> Main CSS File <==
              => Alin Cirja <=
             > www.webvois.com <
********************************************************************/

/********************************************
==> General <==
********************************************/
body {
  background: url(../img/bg.jpg) no-repeat center center fixed;
  font-family: 'Archer';
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  padding: 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

#wrapper {
  padding: 35px 0 12px;
}

.goback {
  display: none;
  width: 140px;
  height: 42px;
  position: absolute;
  left: -35px;
  background: #fff;
  color: #000;
  font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
  top: 350px;
  margin-top: -21px;
  transition: .3s all;
}

@media (min-width: 800px) {
    .goback {
        display: block;
    }
}

.goback i {
  display: inline-block;
  width: 35px;
  color: #fff;
  background: #e72e07;
  text-align: center;
  line-height: 42px;
  font-size: 18px;
}

.goback span {
  display: inline-block;
  padding: 0 12px;
  font-weight: 700;
}

.goback:hover {
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  transform: scale(1.04);
}

.content {
  max-width: 1024px;
  margin: 0 auto;
  position: relative;
}

.top-logo {
  position: absolute;
  left: 0;
  top: 0;
}

.top-logo img {
  display: block;
  width: 160px;
}

.landing-content {
  margin: 0 0 25px 180px;
}

.kit-summary {
  padding-left: 15px;
  border-left: 1px solid #152c53;
  margin-bottom: 30px;
}


.kit-details {
  padding-left: 15px;
}

.landing-content .kit-details p {
  font-weight: bold;
}

.kit-details ul {
  line-height: 1.2em;
}

.kit-details ul li {
  padding-left: 20px;
  position: relative;
  margin-top: 4px;
}

.kit-details ul li::before {
  position: absolute;
  color: #ca2323;
  content: "\2022";
  font-size: 2em;
  left: 0;
  top: 0;
}

.kit-details ul li li:before {
  color: #162B54;
}

.landing-content h1 {
  color: #162B54;
  font-size: 45px;
  margin: 0 0 15px;
  font-weight: 700;
}
.inside .landing-content h1 {
  font-size: 32px;
}

.inside a {
  color: #ec2227;
}

.landing-content p {
  color: #2e2c2d;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
}

.inside .landing-content p {
  font-size: 15px;
}

.subtitle {
  color: #231f20;
  font-weight: 700;
  margin-top: 20px;
  font-size: 25px;
}

.inside .subtitle {
  font-size: 18px;
  text-align: center;
  margin-bottom: 20px;
  font-weight: normal;
}

.inside .subtitle strong {
  font-weight: 700;
}

.list-content-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 8px;
}

.list-content-container strong {
  font-weight: bold;
}

.list-content-container .list-image {
  flex: 0;
  width: 50%;
}

.kit-dispenser .list-content-container .list-image {
  width: 20%;
  margin-top: -50px;
}

.kit-cereal .list-content-container .list-image  {
  margin-left: 20px;
}

.kit-waffles .list-content-container {
  width: 120%;
}

.kit-waffles .list-content-container .list-image  {
  width: 60%;
}

.cart-buttons-container {
  margin: 40px 0 0;
}

.cart-buttons-container a {
  text-decoration: none !important;
}

button, select {
  display: block;
  margin-bottom: 12px;
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
  border-radius: 4px;
  width: 180px;
  color: #333;
  background-color: white;
  line-height:1.5em;
  cursor: pointer;
  border:none;
  transition:box-shadow 0.3s ease-out;
}

button[disabled] {
  cursor: not-allowed !important;
  background-color: #e4e4e4;
  color: #777;
}

select {
  padding: 3px 12px;
}

button:hover {
  box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
}

button.continue-to-checkout {
  background-color: #d89a16;
}

button.add-more-items {
}

.no-break {
  white-space: nowrap;
}

#video h2 {
  text-align: center;
  font-size: 1.5rem;
  padding: 40px 0 30px;
  font-weight: bold;
}


.footer {
  color: #231f20;
  margin: 0 auto;
  padding: 45px 0;
  font-weight: 700;
  text-align: left;
  padding-left: 44px;
}

.footer p {
  max-width: 890px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin: 10px auto;
}

.footer .copy {
  font-size: 12px;
}

.meal-into {
  padding: 181px 45px 15px 80px;
  display: table;
}

.meal-into .title {
  vertical-align: top;
  display: table-cell;
  padding-right: 35px;
}

.meal-into .title h1 {
  color: #231f20;
  font-size: 33px;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}

.meal-into .title h2 {
  color: #be1e2d;
  font-size: 20px;
  text-transform: uppercase;
  margin: 5px 0 15px;
  font-weight: 700;
}

.meal-into .intro-text {
  display: table-cell;
  padding-left: 15px;
  border-left: 2px solid #504f78;
}

.meal-into .intro-text p {
  color: #231f20;
  font-size: 15px;
  font-weight: 700;
  line-height: 21px;
}

b {
  font-weight: 700;
}

/********************************************
==> Header <==
********************************************/

/********************************************
==> Footer <==
********************************************/

/********************************************
==> Form <==
********************************************/
.group {margin-bottom: 5px;}

.label {
  display: inline-block;
  width: 130px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
}

label {
  font-size: 11px;
  font-weight: 700;
}

.field {
  border: 1px solid #b2b4b6;
  box-shadow: 1px 1px 4px 0px #d2d4d8;
  height: 26px;
  width: 100%;
  vertical-align: bottom;
  padding: 0 8px;
}

.group.antispam {display: inline-block; margin-left: 133px;}

.group.address {width: 480px; display: inline-block;}

.tip {display: block; font-size: 12px; margin-top: 2px;}

.group.phone {display: inline-block;}
.group.phone .field {width: 185px;}
.group.phone .field.fix {width: 50px;}

.group.email {width: 295px; display: inline-block;}
.group.email .field {width: 235px;}

.group.long .field {
  width: 345px;
}

.group.city {width: 230px;display: inline-block; margin-left: 134px;}
.state {width: 65px; display: inline-block;}
.state select {
  margin-bottom: 0;
  border-radius: 0;
}
.zip {width: 95px; display: inline-block;}


.group.question {
  padding-left: 130px;
}
.group.question label {
  font-size: 14px;
  font-weight: 600;
}


form .clear {margin-top: 5px;}

#send {
  width: 120px;
  height: 26px;
  cursor: pointer;
  background: #ec2227;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  float: right;
  border: none;
  font-size: 12px;
  border-bottom: 2px solid #ec2227;
  box-shadow: 2px 2px 2px #999;
  font-family: 'Archer';
}

form p {
  padding: 5px 0;
}

.msg strong {
  font-weight: bold;
}

.msg {
  border-radius: 5px;
  clear: both;
  border-width: 1px;
  text-align: center;
  color: black;
  padding: 10px 15px;
  max-width: 500px;
  margin: 15px auto
}
.msg.success {background: #b9ffa0; color: #0d7a28;}
.msg.error {background: #f88585; color: #850c0c;}


#video {
  background: #fefeff;
}

#video .content {
  width: 800px;
  padding: 40px 0 20px;
}

#video .content h3 {
    color: #231f20;
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 20px;
}

.video-player {
    width: 300px;
    float: left;
    margin-right: 26px;
    margin-bottom: 20px;
}

#video .content p {
    color: #2e2c2d;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
}

#more-inspiration-container {
  text-align: center;
}

#more-inspiration-container button {
  display: inline-block;
  margin-left: 20px;
}

#more-inspiration-container h4 {
  display: inline-block;
}

#premier-banner {
  width: 100%;
  padding-top: 11%;
  background: url('../img/premier_banner.png') no-repeat center transparent;
  background-size: cover;
}

span.tag {
  display: inline-block;
  padding: 0.2em 0.4em;
  background-color: #0f2c51;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 6px;
  margin: 0 6px;
}

.not-strong {
  font-weight: normal;
}

/********************************************
==> Responsive <==
********************************************/
@media only screen and (max-width: 1199px) {

}


@media only screen and (max-width: 1023px) {

}


@media only screen and (max-width: 800px) {
  #wrapper {
    padding-top: 0;
  }

  .top-logo {
    position: static;
  }
  .top-logo img {
    margin: 0 auto;
  }

  .landing-content {
    margin: 0 30px 30px;
    border-left: none;
    padding: 0;
  }

  .landing-content.inside {
    padding-right: 0;
  }
  

  .subtitle {
    margin-top: 20px;
    font-size: 20px;
  }

  #video .content {
    width: 100%;
    padding: 10px;
  }
  .video-player {
    float: none;
  }

  .kit-summary {
    padding-left: 0;
    border-left: none;
  }


  .list-content-container {
    width: 130%;
  }

  .kit-details.kit-rack img {
    margin-top: 0;
  }

  .kit-details.kit-dispenser img {
    margin-top: 0;
  }

  .kit-details.kit-dispenser .list-content-container {
    width: 100%;
  }

  .meal-list, .videos-gallery {
    flex-wrap: wrap;
    height: auto;
    width: auto;
    margin: 55px 15px;
  }

  .meal-list > li {
    margin-top: 20px;
    width: 50%;
  }

  .meal-into {
    display: block;
  }

  .meal-into .title {
    display: block;
  }

  .meal-into .intro-text {
    display: block;
    border-left: none;
    padding-left: 0;
  }

  .imgbl {
    bottom: -280px;
  }

  .meal-into {
    padding-left: 20px;
    padding-top: 180px;
  }

  form {
    margin-left: 20px;
    margin-right: 15px;
  }

  .group.address {
    width: 100%;
  }

  .group.long .field {
    width: 100%;
  }

  .label {
    text-align: left;
  }

  .tip.city {
    padding-left: 0;
  }

  .group.phone label,
  .group.email label {
    display: block;
  }

  .group.antispam {
    margin-left: 0;
  }

  .meal-list>li .fpic {
    position: static;
    display: block;
    margin: 10px auto 0;
  }

  .group.city {
    margin-left: 0;
    width: 132px;
  }

  .top-logo.aunt+.imgtr {
    max-width: 200px;
  }

  .goback {
    left: -2px;
    margin-top: 0;
    position: relative;
  }
  .group.question {
    padding:0;
  }
  .imgtr {
    width:50%;
    top:0;
  }
  .small-img .imgtr {
    width: 40%;
  }
  .landing-content {
    margin-top: 15px;
  }
  .landing-content p {
    font-size: 14px;
  }

  .footer {
    padding: 20px 5px;
  }
}


@media only screen and (max-width: 767px) {
}


@media only screen and (max-width: 639px) {
}


@media only screen and (max-width: 479px) {

}


@media only screen and (max-width: 359px) {

}