@charset "utf-8";
/* CSS Document */
* {
  margin : 0;
  padding: 0;
}
 
html
{
  height  : 100%; 
}

body {
  color: #666 !important;
  font-family: "futura-pt",sans-serif !important;
  font-size  : 16px !important;
  padding-top:70px;
  height  : 100%;
  overflow: auto;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img {
  max-width : 100%;
}
textarea {
  resize : vertical;
}
h1, h2,
h3, h4,
h5, h6 {
  margin     : 0 !important;
  font-weight: 300;
}
p, li, td, th {
  color      : #666666;
  font-size  : 16px;
  line-height: 19px;
  font-weight: 400;
  margin     :0 !important
}
a, a:hover {
  text-decoration : none !important;
}
.padding-0 {
  padding : 0 !important;
}
.pl-0 {
  padding-left : 0 !important;
}
.pr-0 {
  padding-right : 0 !important;
}
.pt-0 {
  padding-top : 0 !important;
}
/*********Buttons********/
.btn-custom {   
  background  : #af9570;
  transition  : background-color 0.5s ease 0s;
  color       : #fff;     
  padding     : 22px 0 20px !important;
  font-size   : 13px !important;
}
.btn-custom:hover, .btn-custom:focus {
  background : #776142;
  color      : #fff !important;  
}
.btn {  
  border-radius  : 0 !important;     
  text-transform : uppercase;
  letter-spacing : 0.2em !important;
  font-weight    : 600 !important; 
}
.btn-alt {  
  font-size        : 12px !important; 
  border           : 2px solid #af9570 !important;
  padding          : 20px 22px 18px;
  background-color  : #af9570;
  color             : #fff;

  -webkit-transition: background-color 400ms ease,color 500ms ease;
  -moz-transition: background-color 400ms ease,color 500ms ease;
  transition: background-color 400ms ease,color 500ms ease;
}
.btn-alt:hover, .btn-alt:focus {  
  
  background-color : transparent;
  color            : #af9570 !important;
  
}
.btn-white {  
  font-size         : 12px !important; 
  background-color  : transparent;
  border            : 2px solid #fff !important;
  color             : #fff;
  padding           : 20px 22px 18px;
}
.btn-white:hover, .btn-white:focus {  
  background-color  : #af9570;
  border            : 2px solid #af9570 !important;
  color             : #fff !important;
}

/*********header start********/
.top-header {
  position  : fixed;
  top       : 0;
  width     : 100%;
  z-index   : 5;
}
.banner {
  height   : 650px;
  overflow : hidden;
  position : relative;
}
#bg-video {
  max-width : 100%;
  display   : block;
  position: absolute;
  top: 0px
}
.overlay {
  background  : rgba(0, 0, 0, 0.5);
  height      : 100%;
  left        : 0;
  position    : absolute;
  top         : 0;
  width       : 100%;
  z-index     : 2;
}
.top-header-scroll { 
  background : #323232
}
.video-section {
  left     : 50%;
  position : absolute;
  top      : 0;
  width    : 100%;
  z-index  : 4;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);  
}
.logo img {
  padding : 24px 0;
  width   : 188px;
}
.header-right {
  text-align : right;
}
.header-right ul {
  padding-top : 24px;
}
.header-right li {
  padding : 10px;
  display : inline;
}
.header-right a {
  color         : #dadada;
  font-size     : 12px;
  font-weight   : 600;
  text-align    : right;
  text-transform: uppercase;
  letter-spacing: 0.2em;  
}
.header-right a:hover {
  color  : #dadada;
}
.header-right li:last-child::before {
  content     : "| ";
  font-size   : 12px;
  color       : #fff;
  margin-right: 20px;  
}
.banner-content h1 {
  color        : #fff;
  font-size    : 46px;
  font-weight  : 600;
  margin-bottom: 20px;
  margin-top   : 15px;
  line-height  : 60px;
  padding      : 205px 350px 0 350px;
}
.banner-content h2 {
  color      : #fff;
  font-size  : 18px;
  line-height: 25px;
  padding    : 20px 365px 65px;
}
.banner-content .btn-custom{
  width      : 225px;
}
/*********header end********/

/*********Steps-section start********/
.steps {
  background-color : #f0f0f0;
  color            : #666;
  padding          : 50px 0;
}
.step-col {
  border-right : 1px solid #e5e5e5;
}
.step-col:nth-last-child(2) {
  border-right : none;
}
.step-icon {
  opacity       : 0.5;
  padding-bottom: 20px;
}
.step-number {
  margin-right : 4px;
}
.step-number::after {
  color      : #bdbcbc;
  content    : "/";
  margin-left: 4px;
}
.step-header {
  color       : #323232;
  font-size   : 18px;
  padding-bottom: 20px;
}
.step-body p {
  padding  : 0 20px;
  font-size: 14px;
}
/*********Steps-section end********/

/*********Every look section start********/
.every-look {
  display  : table;
  width  : 100%;
}
.every-look h2 {
  font-size  : 24px;
  color      : #323232;
  font-weight: 600;
  padding-bottom: 25px;
}
.every-look p {
  color       : #7e7e7e;	
  line-height : 21px
}
.every-look-left {
  display       : table-cell;
  padding-right : 50px;
  text-align    : right;
  vertical-align: middle;
  width 	    : 50%;
}
.every-look-right > p {
  padding-right  : 20%;
  padding-bottom : 0 !important;
}
.every-look-left > p {
  padding-left : 20%;
}
.every-look-img {
  display       : table-cell;
  vertical-align: middle;
  width 		: 50%;
}
.every-look-right {
  display      : table-cell;
  padding-left : 50px;
  vertical-align: middle;
  width 		: 50%;
}
.every-look p {
  padding-bottom : 50px;
}
.stylist-name {
  display 	 : block;
  font-size  : 16px;  
  padding-top: 35px;
  color 	 : #323232;
  letter-spacing: 0.1em;	
}
.stylist-title {
  font-size : 14px;
  display   : block;
  color 	: #323232;
}
.show-in-mobile {
   display: none
}
/*********Every look section end********/

/*********quote section start********/
.quote-section {
  background-color: #323232;
  padding : 135px 0 115px;
}
.quote-text p:before {
  color 	 : #af9570;
  content    : open-quote;
  font-size  : 88px;
  font-weight: 100;
  line-height: 0.1em;
  margin-right  : 0.25em;
  vertical-align: -0.4em;
}
.quote-text p{
  font-size  : 32px;
  font-weight: 300;
  padding 	 : 0 150px 35px;
  color      : #dadada;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .05);
  line-height: 42px;
}
.quote-by {
  font-size   : 14px;
  font-weight : 400;  
  margin-left : 0;
  opacity     : .5;
  color 	  : #dadada;
  letter-spacing : .2em;
  text-transform : uppercase;
}
.quote-by:before {
  width    : 60px;  
  margin   :0 auto 15px;
  content  : "";
  display  : block;
  border-color: #dadada;
  border-bottom-style: solid;
  border-bottom-width: 2px;  
}
/*********quote section start********/

/*********brands-section start********/
.brands-section {
  padding-top : 80px;  
}
.brands-section .container {
  background  :url(../images/splash-1.jpg);
  background-position : right bottom;
  background-repeat   : no-repeat;
}
.heading-h2 {
  font-size  : 32px;
  color 	 : #323232;
}
.brands-section p {
  color    : #7e7e7e;
  font-size: 18px;
  padding-top   : 32px;
  padding-bottom: 85px;
}
.brand-wrapper-cols {
  width : 65%;
  padding-bottom: 135px;
}
.brand-col {
  float  : left;
  padding: 40px 20px 100px;
  width  : 25%;
}
.flip-container {
  perspective : 1000;
  transform-style : preserve-3d
}
.flipper {
  position : relative
}
.back,
.front {
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility : hidden;
  -o-backface-visibility  : hidden;
  backface-visibility     : hidden;
  position  : absolute;
  top       : 0;
  left      : 0;
  width     : 100%;  
}
.back,
.flipper,
.front {
  transition: .6s;
  transform-style: preserve-3d
}
.brand-logo {
  max-width  : 100%;
  max-height : 60px;
  display    : block;
  margin     : auto
}
.front {
  z-index   : 2;
  -webkit-transform : rotateY(0);
  -moz-transform    : rotateY(0);
  -ms-transform     : rotateY(0);
  -o-transform      : rotateY(0);
  transform         : rotateY(0)
}
.back {
  -webkit-transform : rotateY(-180deg);
  -moz-transform    : rotateY(-180deg);
  -ms-transform     : rotateY(-180deg);
  -o-transform 	    : rotateY(-180deg);
  transform         : rotateY(-180deg);
}
.flip-card .back {
  -webkit-transform : rotateY(0);
  -moz-transform    : rotateY(0);
  -ms-transform     : rotateY(0);
  -o-transform      : rotateY(0);
  transform         : rotateY(0)
}
.flip-card .front {
  -webkit-transform : rotateY(180deg);
  -moz-transform    : rotateY(180deg);
  -ms-transform     : rotateY(180deg);
  -o-transform 	    : rotateY(180deg);
  transform         : rotateY(180deg);
}
/*********brands-section end********/

/*********pricing-section start********/
.pricing-section {
  background-color  : #323232;
  padding-top   : 80px;
  padding-bottom: 50px;
  color: #dadada;
}
.pricing-section .heading-h2 {
  color : #dadada;
}
.pricing-section p {
  color    : #dadada;
  font-size: 18px;
  padding-top: 32px;
}
.pricing-container {
  padding-top : 110px;
}
.pricing-category {
  display : inline-block;
  padding : 0 8px 22px;
  position: relative;
  vertical-align : top;
}
.pricing-tag {
  position   : absolute;
  font-size  : 12px;
  font-weight: 600;  
  height     : 50px;
  width 	 : 100px;
  max-height : 50px;
  max-width  : 100px;
  padding    : 10px 5px;
  text-align : center;
  background-color: #6e5d44;    
  box-shadow: 10px 9px 45px -12px rgba(0, 0, 0, .5);
  text-transform: uppercase;
}
.pricing-small {
  font-style : italic;
}
.pricing-arrow-down::after,
.pricing-arrow-right::after,
.pricing-arrow-top-right::after,
.pricing-arrow-up::after {
  content : '';
  width   : 0;
  height  : 0;
  border-style: solid
}
.pricing-arrow-down {
  position: relative;
  top 	: 4px;
  left  : -8px
}
.pricing-arrow-down::after {
  position  : absolute;
  border-width : 20px 10px 0;
  border-color : #6e5d44 transparent transparent
}
.pricing-arrow-up {
  position: relative;
  top  : -57px;
  left : -8px
}
.pricing-arrow-up::after {
  position: absolute;
  border-width: 0 10px 20px;
  border-color: transparent transparent #6e5d44
}
.pricing-arrow-right {
  position: relative;
  top  : -11px;
  left : 50px
}
.pricing-arrow-right::after {
  position : absolute;
  border-width : 10px 0 10px 20px;
  border-color : transparent transparent transparent #6e5d44
}
.pricing-arrow-top-right {
  position: relative;
  top  : -58px;
  left : 22px
}
.pricing-arrow-top-right::after {
  position : absolute;
  border-width : 0 10px 20px;
  border-color : transparent transparent #6e5d44
}
.price-jean {
  left : 45px;
  top  : -40px;
}
.price-shirt {
  left: 49%;
  top: -40px;
  -webkit-transform : translateX(-50%);
  -moz-transform 	: translateX(-50%);
  -ms-transform 	: translateX(-50%);
  -o-transform 	 	: translateX(-50%);
  transform 		: translateX(-50%);
}
.price-chinos {
  bottom : 50%;
  right  : 75px;
  -webkit-transform : translateY(-50%);
  -moz-transform    : translateY(-50%);
  -ms-transform     : translateY(-50%);
  -o-transform      : translateY(-50%);
  transform 	    : translateY(-50%);
}
.price-shoes {
  left : 49%;
  top  : 145px;
  -webkit-transform : translateX(-50%);
  -moz-transform    : translateX(-50%);
  -ms-transform     : translateX(-50%);
  -o-transform      : translateX(-50%);	
  transform         : translateX(-50%);
}
.price-tees {
  left : -22px;
  top  : 83px;
} 
.price-blazers {
  bottom : 160px;
  left   : 26%;
}
.price-accessories {
  right : 25px;
  top   : -13px;
}
.pent-categ {
  top : 30px;
}
.shoes-categ {
  top : -25px;
}
.tees-categ {
  top : -60px;
}
.pricing-section .btn-white {
  margin-top : 20px;
}
/*********pricing-section end********/

/*********client says start********/
.client-says {
  background-color : #f0f0f0;
  padding-top : 85px;
}
.client-says-heading h2 {
  color  : #2c2c2c;
  font-size : 55px;
  padding-bottom : 30px;
}
.client-says-heading p {
  font-size     : 19px;
  margin-bottom : 70px;
  margin-top 	: 0;
  color 		: #646464;  
  font-weight   : 400;
  font-family   : proxima-nova, sans-serif;
}
.testimonial-img {
  height   : 202px;
  overflow : hidden;
}
.landing-testimonial-col {
  padding-left  : 35px;
  padding-right : 35px;
  margin-top    : 75px;
}
.white-box-testimonial {
  background-color : #fff;
  box-shadow : 0 1px 2px rgba(0, 0, 0, 0.15);
}
.quote-mark {
  color    : #af9570;  
  font-size: 150px;
  height   : 65px;
  line-height: 155px;
  padding    : 0;
  font-family: proxima-nova,sans-serif;
}
.landing-testimonial-name {  
  color      : #af9570;
  font-size  : 14px;
  font-weight: 600;
  padding 	 : 25px;
  text-align : center;
  border-top : 1px solid #e6e4e4;
}
.landing-testimonial-name span:before {
  content  : '•';
  color    : #ebc896;
  margin   : 0 10px;
  font-size: 18px;
}
.white-box-testimonial p{
  font-size   : 14px;
  line-height :23px;
  font-weight : 200;
  padding     : 35px;
  color  	  : #5b5a5a;
  min-height  : 280px;
}
.media-section {
  padding-bottom : 40px;
  padding-top    : 160px;
}
/*********client says end********/

/*********footer-section start********/
footer {
  background-color : #323232;  
  padding : 60px 0;
}
footer h4 {
  color    : #f0f0f0;
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 15px;
}
.footer-list {
  list-style : none;
}
.footer-list li {
  padding-bottom : 15px;
}
.footer-list li a, 
.footer-list li a:hover {
  color : #f0f0f0;  
  font-size: 14px;
  text-decoration: none;
}
.copy-right p {
  color : #f0f0f0;  
  font-size: 12px;
}
.copy-right p a {
  color : #f0f0f0 !important;  
}
.footer-last a {
  display : block;
  margin-bottom: 12px;
}
.copy-right {
  padding-top : 15px;
}

@media screen and (max-width:1250px) {
.every-look-left > p {
  padding-left : 15%;
}
.every-look-right > p {
  padding-right : 15%;
}
}
@media screen and (max-width:1199px) {
  .banner {
    height : 100%;
  }
  #bg-video
  {
    position: relative;
  }
  .banner-content h1 {
    padding: 145px 250px 0;
  } 
  .banner-content h2 {
    padding : 20px 270px 65px;
  }
  .step-body p {
    padding : 0;
  }
  .quote-text p {
    padding : 0 50px 35px;
  }
  .pricing-category {
    padding : 0 0 22px;
  }
  .landing-testimonial-col {
    padding-left : 15px;
    padding-right: 15px;
  }
  .white-box-testimonial p {
    padding : 35px 25px;
  }
}
@media screen and (max-width:1024px) {
.overlay {
  display:none
}
}
@media screen and (max-width:991px) {
.white-box-testimonial p {
  min-height : 370px;
 }
.banner-content h1 {
  padding : 145px 150px 0;
}
.banner-content h2 {
  padding : 20px 160px 65px;
}
.quote-text p {
  padding : 0 0 35px;
}
.brand-col {
  width : 33%;
}
.brands-section p {
  padding-bottom: 40px;
  font-size : 16px;
}
.brands-section .container {
  background : none;
}
.brands-section {
  background: url("../images/splash-1.jpg") no-repeat scroll 95% bottom;
  background-size:500px;
}
}
@media screen and (max-width:900px) {
.banner-content h1 {
  padding : 100px 150px 0;
}
.banner-content h2 {
  padding : 20px 160px 50px;
}
.every-look h2 {
  padding-bottom : 15px;
}
.every-look p {
  padding-bottom : 15px;
}
.stylist-name {
  padding-top : 15px;
}
.every-look-left, .every-look-right {
  padding-right : 20px;
  padding-left  : 20px;
}
.every-look-left > p {
  padding-left  : 20px;
}
.every-look-right > p {
  padding-right : 20px;
}
}
@media screen and (max-width:767px) {
.every-look-left > p {
  padding-left : 0;
}
.every-look-right > p {
  padding-right: 0;
}
.banner-content h1 {
  padding  : 100px 20px 0;
  font-size: 35px;
}
.banner-content h2 {
  padding : 0 120px 20px;
}
.step-col {
  padding-bottom : 50px;
}
.step-body p {
  padding : 0 150px;
}
.every-look {
  display : block;
}
.every-look-left, .every-look-img, .every-look-right {
  display : block;
  text-align: center;
  width : 100%;
}
.every-look-left, .every-look-right {
  padding : 30px 15px;
}
.hide-in-mobile {
  display : none;
}
.show-in-mobile {
  display : block;
}
.quote-section {
  padding : 50px 0;
}
.quote-text p {
  font-size  : 20px;
  line-height: 30px;
}
.brand-col {
  padding : 0 20px 110px;
}
.brands-section {
  background-size : 60% auto;
}
.brand-wrapper-cols {
  padding-bottom: 200px;
  width : 100%;
}
.testimonial-img {
  height : 350px;
}
.media-section {
  padding-bottom: 40px;
  padding-top 	: 40px;
}
.white-box-testimonial p {
  min-height : inherit;
}
.steps {
  padding : 50px 0 0;
}
.white-box-testimonial p {
  padding : 20px 25px;
}
.landing-testimonial-col {
  margin-top : 30px;
}
}
@media screen and (max-width:600px) {
.banner-content h1 {
  font-size : 25px;
  padding   : 0 15px;
}
.price-chinos {
  right : 45%;
}
.pent-categ {
  top : 0;
}
.tees-categ {
  top : 0;
}
.shoes-categ {
  top : 0;
}
.step-body p {
  padding : 0 130px;
}
body {
  padding-top : 70px;
}
.top-header {
  background : #323232;
}
.video-section {
  top : 60%;
  -webkit-transform : translate(-50%, -50%);
  -moz-transform 	: translate(-50%, -50%);
  -ms-transform 	: translate(-50%, -50%);
  -o-transform 		: translate(-50%, -50%);
  transform 		: translate(-50%, -50%);
}
.video-section.complete
{
  top : 30%;
}
.price-tees {
  left: 0px;
  top : 15px;
 }
.header-right ul {
  padding-top : 19px;
}
.pricing-category {
  display : block;
  padding : 0 0 80px;
}
.price-jean {
  left : 50%;
  -webkit-transform : translateX(-50%);
  -moz-transform 	: translateX(-50%);
  -ms-transform 	: translateX(-50%);
  -o-transform 		: translateX(-50%);
  transform 		: translateX(-50%);
}
.pricing-container {
  padding-top : 70px;
}
}
@media screen and (max-width:480px) {
  .banner-content h2 {
    padding : 0 15px 20px;
  }
  .step-body p {
    padding : 0 70px;
  }
  .banner-content h1 {
    font-size  : 20px;
    line-height: 40px;
  }
  .banner-content h2 {
    font-size  : 16px;
    line-height: 20px;
  }
  .banner-content .btn-custom {
    width  : auto;
  }
  .btn-custom {
    padding : 12px 15px 10px !important;
  }
  .btn-alt, .btn-white {
    padding : 12px 15px 10px;
  }
  .client-says-heading h2 {
    font-size : 35px;
  }
  .header-right li {
    display: inline;
    padding: 10px 2px;
  }
  .header-right li:last-child::before {
    margin-right : 5px;
  }
  body {
    padding-top : 70px;
  }
}
@media screen and (max-width:375px) {
  .step-body p {
    padding : 0;
  }
  .every-look h2 {
    font-size : 20px;
  }
  p, li, td, th {
    font-size : 14px;
  }
  .every-look p {
    line-height : 19px;
  }
  .heading-h2 {
    font-size : 28px;
  }
  .brand-col {
    width : 50%;
  }
  .brands-section {
    background-size : 290px auto;
  }
  .testimonial-img {
    height : 200px;
  }
  .top-header .col-xs-4 {
    text-align: center;
    width     : 100%;
  }
  .header-right {
    text-align: center;
    width     : 100%;
  }
  .header-right ul {
    padding-top : 0;
  }
  body {
    padding-top : 70px;
  }
  .heading-h2 {
    font-size : 25px;
  }
  .pricing-section p {
    font-size  : 16px;
    padding-top: 15px;
  }
}

.kal-link,
.kal-link:hover,
.kal-link:active,
.kal-link:focus
{
  font-family: 'proxima-nova';
  font-size: 14px;
  letter-spacing: -0.1px;
  text-align: center;
  color: #af9570;
}

.kal-text
{
  font-family: 'proxima-nova';
  font-size: 14px;
  letter-spacing: -0.1px;
  text-align: center;
  color: #323232;
}

.kal-link.heavy
{
  font-size: 16px;
  letter-spacing: -0.2px;
  font-weight: 600;
}


.kal-h1 
{
  font-family: 'futura-pt';
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.3px;
  text-align: center;
  color: #323232;

  margin-top:50px !important;
  margin-bottom:50px !important;
}

.gold
{
  color: #af9570 !important;
}


.kal-h5
{
  font-family: 'futura-pt';
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -0.2px;
  text-align: center;
  color: #323232;
}

.kal-input
{
  display: block;
  width: 100%;
  margin-top:16px;
  margin-bottom:33px;
  
  font-family: 'proxima-nova';
  font-size: 16px;
  letter-spacing: -0.2px;
  text-align: center;
  color: #323232;

  height: 50px;
  background-color: #FFFFFF;
  border: solid 1px #acacac;
}


.kal-select
{
	display:block;
	margin-top: 16px;
  margin-bottom: 33px;
  font-family: 'proxima-nova';
  font-size: 16px;
  letter-spacing: -0.2px;
  text-align: center;
  width:100%;
  height: 50px;
  background-color: #FFFFFF;
  border: solid 1px #acacac;
}

.kal-back,
.kal-back:hover,
.kal-back:focus,
.kal-back:active
{
	font-family: 'futura-pt';
	font-size: 12px;
	font-weight: 900;
	letter-spacing: -0.1px;
	text-align: center;
	color: #af9570;
  text-transform: uppercase;
  text-decoration: none;
}

.billing-label
{
  font-weight: normal;
  font-family: 'proxima-nova';
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.2px;
  text-align: left;
  color: #323232;
}

.billing-radio,
input[type=radio].billing-radio
{
  margin-left:10px;
  margin-right:10px;
}


.billing-textarea
{
	display: block;
	width:100%;
	padding:5px;
	margin-top:5px;
}

input:focus, 
textarea:focus {
  outline-style: solid;
  outline-width: 2px;
}

textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="button"],
input[type="submit"] {
  -webkit-appearance: none;
  border-radius: 0;
}

body.no-padding
{
    padding-top: 0px !important;
}

.kal-loading
{
  color: #af9570;
  text-align: center;
  padding-top:80px;  
}

.kal-saving-error
{
    text-align: center;
    color:#ec2055;    
}