@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700');

* {

  -webkit-box-sizing: border-box;

          box-sizing: border-box;

}



body {

  background: #fff;

  color: #000;

  font-family: 'Raleway', sans-serif;

  font-size: 14px;

  font-weight: 500;

  line-height: 1.5em;

  overflow-x: hidden;

}



h1, h2, h3, h4, h5, h6 {

  font-weight: 300;

  letter-spacing: 2px;

  line-height: 1.3em;

  margin-bottom: 20px;

}



p {

  margin-bottom: 15px;

  color: #0d0d0d;

}



strong {

  font-weight: 700;

}



.cta {

  background: #000 url(http://image.mail.beautygifter.ca/lib/fe9813737564017f73/m/1/icon_chat.png) 26px center no-repeat;

  background-size: 24px 24px;

  border: 1px solid #444444;

  color: #fff;

  display: inline-block;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 2px;

  padding: 10px 26px 10px 64px;

  text-transform: uppercase;

}



.cta-gold {

  background: #e5b14e url(http://image.mail.beautygifter.ca/lib/fe9813737564017f73/m/1/icon_chat.png) 26px center no-repeat;

  background-size: 24px 24px;

  border: 1px solid #a5772a;

}



.cust-btn {

  background: #000;

  color: #fff;

  display: inline-block;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 2px;

  padding: 10px 75px;

  text-transform: uppercase;

}



.btn_gold {

  background: #e5b14e;

}



section {

  padding: 45px 0;

}



.section-heading {

  text-align: center;

}



.section-heading h3 {

  font-size: 44px;

  font-weight: 300;

  letter-spacing: 2px;

  line-height: 1.3em;

  margin-bottom: 20px;

}



.section-heading h4 {

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2px;

  margin-bottom: 0;

  position: relative;

}



.section-heading h4 {

  display: inline-block;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 2px;

  margin-bottom: 0;

  position: relative;

}



.section-heading h4::before {

  background: #000;

  content: "";

  height: 2px;

  position: absolute;

  top: 50%;

  -webkit-transform: translateY(-50%);

      -ms-transform: translateY(-50%);

          transform: translateY(-50%);

  width: 40px;

  left: -50px;

}



.section-heading h4::after {

  background: #000;

  content: "";

  height: 2px;

  position: absolute;

  top: 50%;

  -webkit-transform: translateY(-50%);

      -ms-transform: translateY(-50%);

          transform: translateY(-50%);

  width: 40px;

  right: -50px;

}





/*** General ***/



a {

  color: #000;

}



a:focus, a:hover {

  color: #fff;

  text-decoration: none;

}



a:focus {

  outline: 0;

}







.bg-white {

  background-color: #fff;

}





/** Navigation **/



nav {

  background-color: #fff;

  -webkit-box-shadow: 2px 2px 5px 0px rgba(173, 173, 173, .2);

          box-shadow: 2px 2px 5px 0px rgba(173, 173, 173, .2);

}



.navbar-fixed-top {

  border-width: 0 0 1px;

  margin-bottom: 0;

}





/* header */



#navigation {

  padding: 0;

}



#customNav {

  max-width: 1170px;

  margin: 0 auto;

  padding: 0 15px 15px;

}



.header {

  background-color: #0d0d0d;

  position: fixed;

  width: 100%;

  z-index: 3;

}



.header ul {

  margin: 0;

  padding: 0;

  list-style: none;

  overflow: hidden;

  background-color: #0d0d0d;

}



.header li a {

  display: block;

  padding: 12px 16px;

  text-decoration: none;

  color: #fff;

}



.header li a:hover, .header .menu-btn:hover {

  background-color: transparent;

  color: rgba(255, 255, 255, 0.7);

}



.header .logo {

  display: block;

  float: left;

  font-size: 30px;

  padding: 14px 20px 0 0;

  text-decoration: none;

}





/* Menu */



.header .menu {

  clear: both;

  max-height: 0;

  -webkit-transition: max-height .2s ease-out;

  -o-transition: max-height .2s ease-out;

  transition: max-height .2s ease-out;

}





/* Menu icon */



.header .menu-icon {

  cursor: pointer;

  display: inline-block;

  float: right;

  padding: 35px 25px 0;

  position: relative;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

}



.header .menu-icon .navicon {

  background: #fff;

  display: block;

  height: 2px;

  position: relative;

  -webkit-transition: background .2s ease-out;

  -o-transition: background .2s ease-out;

  transition: background .2s ease-out;

  width: 18px;

}



.header .menu-icon .navicon:before, .header .menu-icon .navicon:after {

  background: #fff;

  content: '';

  display: block;

  height: 100%;

  position: absolute;

  -webkit-transition: all .2s ease-out;

  -o-transition: all .2s ease-out;

  transition: all .2s ease-out;

  width: 100%;

}



.header .menu-icon .navicon:before {

  top: 5px;

}



.header .menu-icon .navicon:after {

  top: -5px;

}





/* menu btn */



.header .menu-btn {

  display: none;

}



.header .menu-btn:checked~.menu {

  max-height: 100%;

}



.header .menu-btn:checked~.menu-icon .navicon {

  background: transparent;

}



.header .menu-btn:checked~.menu-icon .navicon:before {

  -webkit-transform: rotate(-45deg);

      -ms-transform: rotate(-45deg);

          transform: rotate(-45deg);

}



.header .menu-btn:checked~.menu-icon .navicon:after {

  -webkit-transform: rotate(45deg);

      -ms-transform: rotate(45deg);

          transform: rotate(45deg);

}



.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before, .header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {

  top: 0;

}





/* Hamburger Icon*/



@media (min-width: 992px) {

  .header li {

    float: left;

  }

  .header li a {

    /* padding: 26px 21px; */

    font-size: 13px;

    letter-spacing: .05em;

    font-weight: 700;

  }

  .header .menu {

    clear: none;

    float: right;

    max-height: none;

  }

  .header .menu-icon {

    display: none;

  }

}



.btn-links {

  margin-top: 25px;

}



.custContainer {

  max-width: 1180px;

}





/*** Hero ***/



#hero {

  background: #f0f0f0;

  position: relative;

  padding: 0;

}



#hero img {

  margin: 0 auto 0 0;

}



#hero .bg {

  background: url("../img/hero-text.jpg") right top no-repeat;

  background-size: cover;

  height: 300px;

}



#hero .bg img {

  display: none;

  margin-left: 0;

}



#hero .text-content {

  padding: 25px 25px 5px;

  text-align: left;

}



#hero .text-content p strong {

  text-transform: uppercase;

}



#hero .text-content .title {

  display: none;

}



#hero p {

  margin: 0;

}



#hero div.text-content p {

  font-size: 14px;

  margin-bottom: 50px;

}



h5 {

  letter-spacing: 0;

  line-height: 1.3em;

  margin-bottom: 0;

  text-transform: uppercase;

}





/*** Gifting ***/

#gifting img {

  margin: 0 auto;

}



#gifting {

  position: relative;

}



#gifting .gifting-imgs img {

  margin-top: 80px;

}





/*** Videos ***/

#videos img {

  margin: 0 auto;

}



#videos .section-heading {

  margin-bottom: 80px;

}



#videos .vid-imgs {

  width: 100%;

  margin-bottom: 30px;

}



#videos .vid-imgs:nth-last-child(1) {

  margin-right: 0;

}



#videos .action-btns {

  text-align: center;

  margin: 20px 0 30px;

}



#videos p {

  font-weight: 300;

}



#videos .action-btns a:hover {

  color: #fff;

}



#videos .share a:focus, #videos .share a:hover {

    color: #000;

    text-decoration: none;

}



#videos .share {

  text-align: center;

}



#videos #shareBtn {

  border-bottom: 1px solid #000;

  display: inline-block;

  cursor: pointer;

  font-weight: 500;

  letter-spacing: 2px;

  margin-bottom: 5px;

  position: relative;

  text-transform: uppercase;

}



#videos #shareBtn:hover {

  border-bottom: 1px solid #fff;

}



#videos #shareBtn::before {

  background: url("../img/icon_share.png") left top no-repeat;

  content: "";

  height: 17px;

  left: -30px;

  position: absolute;

  top: 0;

  width: 21px;

}





/*** From Me ***/

#from-me img {

  margin: 0 auto;

}



#from-me {

  padding: 90px 0;

  background-color: #f0f0f0;

}



#from-me .section-heading {

  text-align: left;

}



#from-me .section-heading h3 {

  text-transform: uppercase;

  font-size: 34px;

}



#from-me .section-heading h3 strong {

  display: block;

}



#from-me .last {

  margin-bottom: 34px;

}



#from-me p {

  margin-bottom: 0;

}



#from-me .inner {

  padding: 90px;

}





/*** Brands ***/

#brands {

  background: #000;

  padding: 60px 25px;

}



#brands h3 {

  color: #fff;

}



#brands h4 {

  color: #fff;

}



#brands .section-heading h4::before, #brands .section-heading h4::after {

  background: #fff;

}



#brands ul {

  list-style: none;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

      flex-wrap: wrap;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

      -ms-flex-direction: row;

          flex-direction: row;

  margin: 50px 0;

  padding: 0;

}



#brands ul li a {

  padding: 30px;

  display: block;

}



#brands .section-heading h3, #brands .delivery .section-heading h3 {

  text-transform: uppercase;

  font-size: 34px;

}





/*** Ready ***/

#ready img {

  margin: 0 auto;

}



#ready {

  padding: 90px 0;

  background-color: #f0f0f0;

}



#ready .section-heading {

  text-align: left;

}



#ready .section-heading h3 {

  text-transform: uppercase;

  font-size: 34px;

}



#ready .section-heading h3 strong {

  display: block;

}



#ready .last {

  margin-bottom: 34px;

}



#ready .inner {

  padding: 90px;

}





/*** Calendar ***/

#calendar img {

  margin: 0 auto;

}



#calendar {

  padding: 45px 25px;

}



#calendar .section-heading h3 strong {

  display: block;

}



#calendar .section-heading h4 {

  margin-bottom: 60px

}



#calendar .action-btns {

  text-align: center;

  margin-top: 60px;

}





/*** Subscribe ***/



#subscribe {

  background-color: #000;

  color: #fff;

  text-align: center;

}



#subscribe form {

  margin-bottom: 15px;

}



#subscribe form div.input {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

      -ms-flex-direction: row;

          flex-direction: row;

  -webkit-box-pack: center;

      -ms-flex-pack: center;

          justify-content: center;

}



#subscribe form div.input input[type="email"], #subscribe form div.input input[type="submit"] {

  -webkit-box-sizing: border-box;

          box-sizing: border-box;

  color: #fff;

  display: block;

  height: 46px;

  line-height: 44px;

  outline: none;

  vertical-align: top;

  border-radius: 0;

}



#subscribe form div.input input[type="email"] {

  background: none;

  border: 1px solid #e5b14e;

  font-size: 14px;

  font-weight: 400;

  padding-left: 20px;

  padding-right: 20px;

  border-radius: 0;

}



#subscribe form div.input input[type="submit"] {

  background: #e5b14e;

  border: 1px solid #e5b14e;

  border-left: none;

  cursor: pointer;

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 2px;

  padding-left: 30px;

  padding-right: 30px;

  text-transform: uppercase;

  border-radius: 0;

}



#subscribe form div.input input[type="submit"]:hover {

  border-color: #e5b14e;

  border-left: none;

}



::-webkit-input-placeholder {

  /* Chrome/Opera/Safari */

  color: #fff;

}



::-moz-placeholder {

  /* Firefox 19+ */

  color: #fff;

}



:-ms-input-placeholder {

  /* IE 10+ */

  color: #fff;

}



:-moz-placeholder {

  /* Firefox 18- */

  color: #fff;

}



#subscribe small {

  display: block;

  font-size: 12px;

  opacity: .4;

}



#subscribe a {

  color: #fff;

  display: block;

  text-decoration: underline;

}



#subscribe a:hover {

  opacity: .8;

}





/*** Footer ***/



footer {

  background-color: #fff;

  padding: 30px 0;

}



footer .copyright {

  text-align: center;

  font-size: 14px;

  color: #fff;

  padding: 0 20px;

}



footer .copyright p {

  margin-bottom: 0;

  color: #000;

}



footer .image {

  width: 200px;

  margin: 0 auto;

  padding-top: 10px;

}



footer img {

  height: 8px;

}



footer .image {

  width: 200px;

  margin: 0 auto;

  padding-top: 10px;

}





/*** Media Queries ***/



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

  #hero div.text-content a.cta {

    position: relative;

  }

}



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

  #hero div.text-content {

    right: 7%!important;

    top: 30%!important;

    width: 30%!important;

  }

  #hero div.text-content p {

    font-size: 14px!important;

  }

}



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

  #hero div.text-content p {

    margin-bottom: 30px;

  }

}



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

  #hero div.text-content p {

    margin-bottom: 30px;

  }

}



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

  .header li a {

    padding: 12px 16px 12px 0;

  }

  #hero .text-content {

    padding: 25px 90px 5px;

  }

  #customNav {

    padding: 0 15px 0 15px;

    max-width: 800px;

  }

  .header .menu-icon {

    padding: 25px 16px;

  }

  .section-heading h3 {

    font-size: 24px;

  }

  #hero .text-content {

    padding: 25px 20px 5px;

  }

  #gifting .gifting-imgs img {

    margin-top: 40px;

  }

  #videos .section-heading {

    margin-bottom: 40px;

  }

  #videos .vids {

    max-width: 488px;

    margin: 0 auto;

  }

  #videos .action-btns {

    margin: 0 0 25px;

  }

  #from-me, #ready {

    padding: 25px;

  }

  #from-me .inner, #ready .inner {

    padding: 25px;

  }

  #from-me .text-content, #from-me .section-heading {

    text-align: center;

  }

  #from-me .section-heading h3 strong {

    display: initial;

  }

  #from-me .section-heading h3, #brands .section-heading h3, #brands #delivery .section-heading h3 {

    font-size: 24px!important;

  }

  #brands #delivery .section-heading h3 {

    font-size: 24px!important;

  }

  #from-me a.cta {

    margin-bottom: 34px;

  }

  #brands ul {

    margin: 0;

  }

  #ready {

    text-align: center;

  }

  #ready .section-heading h3 {

    text-align: center;

    font-size: 24px;

  }

  #ready .section-heading h3 strong {

    display: initial;

  }

  #ready .text-content {

    margin-bottom: 34px;

    /*padding: 0 94px;*/

  }

  #calendar .section-heading h3 strong {

    display: initial;

  }

  #calendar .section-heading h4 {

    margin-bottom: 30px;

  }

  #calendar .action-btns {

    margin-top: 30px;

  }

}



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

  #hero .text-content {

    text-align: center;

  }

}





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

  #hero div.bg {

    background: none;

    height: auto;

  }

  #hero div.bg img {

    display: block;

    height: auto;

    width: 100%;

  }

  #hero div.text-content {

    background: none;

    color: #000;

    padding: 0;

    position: absolute;

    right: 5%;

    top: 25%;

    width: 32%;

  }

  #hero div.text-content p {

    font-size: 12px;

  }

  #hero div.text-content .title {

    display: block;

    margin-bottom: 30px;

  }

  #hero div.text-content .title img {

    height: auto;

    max-width: 573px;

    width: 100%;

  }

  #subscribe a {

    display: inline;

  }

}

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

  #customNav {

    padding: 0 0 0 15px;

  }

  #hero .cta-btns {

    text-align: center;

  }

  #hero .text-content {

    padding: 25px 17px 5px;

  }

}