@import 'css-less-helpers.less';

@base-url : "https:facialvitamin.com/promos/";
@dark: #333;
@maincolor: #ff05b4;
@maincolor2: #acff35;
@maincolor3: #444444;
@maintxtcolor: #6d6d6d;
@offwhitetxt: #dadada;
@whitetxt: #fff;

@header_bg: @maincolor2;
@footer_bg:#1a1a1a;

@xfont1 : 'Roboto';
@xfont2 : 'Open Sans';

@font1-escape : escape(@xfont1);
@font2-escape : escape(@xfont2);

@font-size-default : 16px;

@import url('https://fonts.googleapis.com/css?family=@{font2-escape}:400,700');
@import url('https://fonts.googleapis.com/css?family=@{font1-escape}:400,700');

//usable fonts
@font1: 'Roboto', sans-serif;
@font2: 'Open Sans', sans-serif;

// Helper
._linear-gradient-prefixes(@deg, @start, @end){
  background-image: -webkit-linear-gradient(@deg, @start, @end);
  background-image:    -moz-linear-gradient(@deg, @start, @end);
  background-image:      -o-linear-gradient(@deg, @start, @end);
  background-image:     -ms-linear-gradient(@deg, @start, @end);
}
// Core
.linear-gradient(@_, @start, @end){
  background-color: mix(@start, @end, 50%);
  }
  .linear-gradient(@_, @start, @end) when (isnumber(@_)){
    @deg: @_ + 0deg;
    @legacy-deg: @deg - 90deg;
    ._linear-gradient-prefixes(@legacy-deg, @start, @end);
    background-image: linear-gradient(@deg, @start, @end);
  }
  .linear-gradient(to-bottom, @start, @end){
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=%d, endColorstr=%d)", @start, @end));
		-ms-filter: e(%("'progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=%d, endColorstr=%d)'", @start, @end));
		background-image: -webkit-gradient(linear, left top, left bottom, from(@start),to(@end));
		._linear-gradient-prefixes(top, @start, @end);
		background-image: linear-gradient(to bottom, @start, @end);
	}
	.linear-gradient(to-top, @start, @end){
		filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=%d, endColorstr=%d)", @end, @start));
		-ms-filter: e(%("'progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=%d, endColorstr=%d)'", @end, @start));
		background-image: -webkit-gradient(linear, left bottom, left top, from(@start),to(@end));
		._linear-gradient-prefixes(bottom, @start, @end);
		background-image: linear-gradient(to top, @start, @end);
	}
	.linear-gradient(to-right, @start, @end){
		filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=%d, endColorstr=%d)", @start, @end));
		-ms-filter: e(%("'progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=%d, endColorstr=%d)'", @start, @end));
		background-image: -webkit-gradient(linear, left top, right top, from(@start),to(@end));
		._linear-gradient-prefixes(left, @start, @end);
		background-image: linear-gradient(to right, @start, @end);
	}
	.linear-gradient(to-left, @start, @end){
		filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=%d, endColorstr=%d)", @end, @start));
		-ms-filter: e(%("'progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=%d, endColorstr=%d)'", @end, @start));
		background-image: -webkit-gradient(linear, right top, left top, from(@start),to(@end));
		._linear-gradient-prefixes(right, @start, @end);
		background-image: linear-gradient(to left, @start, @end);
}

.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
	text-shadow: @string;
}
.box-shadow (@string) {
	-webkit-box-shadow: @string;
	-moz-box-shadow:    @string;
	box-shadow:         @string;
}
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
	-webkit-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	-moz-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	box-shadow:		@x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
	-webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
	-moz-box-shadow:    inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
	box-shadow:         inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

.box-sizing (@type: border-box) {
	-webkit-box-sizing: @type;
	-moz-box-sizing:    @type;
	box-sizing:         @type;
}

.border-radius (@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius:    @radius;
	border-radius:         @radius;

	-moz-background-clip:    padding;
	-webkit-background-clip: padding-box;
	background-clip:         padding-box;
}
.border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
	-webkit-border-top-right-radius:    @topright;
	-webkit-border-bottom-right-radius: @bottomright;
	-webkit-border-bottom-left-radius:  @bottomleft;
	-webkit-border-top-left-radius:     @topleft;

	-moz-border-radius-topright:        @topright;
	-moz-border-radius-bottomright:     @bottomright;
	-moz-border-radius-bottomleft:      @bottomleft;
	-moz-border-radius-topleft:         @topleft;

	border-top-right-radius:            @topright;
	border-bottom-right-radius:         @bottomright;
	border-bottom-left-radius:          @bottomleft;
	border-top-left-radius:             @topleft;

	-moz-background-clip:    padding; 
	-webkit-background-clip: padding-box; 
	background-clip:         padding-box; 
}

.opacity (@opacity: 0.5) {
	-webkit-opacity: 	@opacity;
	-moz-opacity: 		@opacity;
	opacity: 		@opacity;
}

.gradient (@startColor: #eee, @endColor: white) {
	background-color: @startColor;
	background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
	background: -webkit-linear-gradient(top, @startColor, @endColor);
	background: -moz-linear-gradient(top, @startColor, @endColor);
	background: -ms-linear-gradient(top, @startColor, @endColor);
	background: -o-linear-gradient(top, @startColor, @endColor);
}
.horizontal-gradient (@startColor: #eee, @endColor: white) {
 	background-color: @startColor;
	background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
	background-image: -webkit-linear-gradient(left, @startColor, @endColor);
	background-image: -moz-linear-gradient(left, @startColor, @endColor);
	background-image: -ms-linear-gradient(left, @startColor, @endColor);
	background-image: -o-linear-gradient(left, @startColor, @endColor);
}

.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
	-webkit-animation: @name @duration @delay @ease;
	-moz-animation:    @name @duration @delay @ease;
	-ms-animation:     @name @duration @delay @ease;
}

.transition (@transition) {
	-webkit-transition: @transition;  
	-moz-transition:    @transition;
	-ms-transition:     @transition; 
	-o-transition:      @transition;  
}
.transform(@string){
	-webkit-transform: @string;
	-moz-transform: 	 @string;
	-ms-transform: 		 @string;
	-o-transform: 		 @string;
}
.scale (@factor) {
	-webkit-transform: scale(@factor);
	-moz-transform: 	 scale(@factor);
	-ms-transform: 		 scale(@factor);
	-o-transform: 		 scale(@factor);
}
.rotate (@deg) {
	-webkit-transform: rotate(@deg);
	-moz-transform: 	 rotate(@deg);
	-ms-transform: 		 rotate(@deg);
	-o-transform: 		 rotate(@deg);
}
.skew (@deg, @deg2) {
	-webkit-transform:       skew(@deg, @deg2);
	-moz-transform: 	 skew(@deg, @deg2);
	-ms-transform: 		 skew(@deg, @deg2);
	-o-transform: 		 skew(@deg, @deg2);
}
.translate (@x, @y:0) {
	-webkit-transform:       translate(@x, @y);
	-moz-transform: 	 translate(@x, @y);
	-ms-transform: 		 translate(@x, @y);
	-o-transform: 		 translate(@x, @y);
}
.translate3d (@x, @y: 0, @z: 0) {
	-webkit-transform:       translate3d(@x, @y, @z);
	-moz-transform: 	 translate3d(@x, @y, @z);
	-ms-transform: 		 translate3d(@x, @y, @z);
	-o-transform: 		 translate3d(@x, @y, @z);
}
.perspective (@value: 1000) {
	-webkit-perspective: 	@value;
	-moz-perspective: 	@value;
	-ms-perspective: 	@value;
	perspective: 		@value;
}
.transform-origin (@x:center, @y:center) {
	-webkit-transform-origin: @x @y;
	-moz-transform-origin:    @x @y;
	-ms-transform-origin:     @x @y;
	-o-transform-origin:      @x @y;
}

.link-underline(@color: @maincolor, @size: 2px, @duration: 0.25s,  @centered: false) {
  /*color: @color;*/
  display: inline-block;
  position: relative;
  text-decoration: none; 
  &:before {
    background-color: @color;
    content: '';
    height: @size;
    position: absolute;
    bottom: 0 - (@size/2);
    transition: width @duration ease-in-out;
    width: 100%;
    & when (@centered = true) {
      left: 50%;
      transform: translateX(-50%);
    }
  }
  &:hover {
    &:before {
      width: 0;
    }
  }
}


// Fancy Underline
// Creates a nice underline for links using CSS linear gradient
// with control on width, color and distance from baseline
// Inspired by Medium's technique ca. 2015
.fancy-underline ( @color: rgba(0, 0, 0, 0.5), @start: 0.05em, @end: 0.15em ) {
	text-decoration: underline;
	// Use Modernizr
	// http://modernizr.com/download/#-cssgradients-printshiv-cssclasses-prefixes-cssclassprefix:has!
	.has-cssgradients & {
		text-decoration: none;
		background-image: linear-gradient(to top, transparent, transparent @start, @color @start, @color @end, transparent @end );
	}
}



@smartphones: ~"only screen and (max-width: 479px)";
//@tablets: ~"only screen and (min-width: 768px) and (max-width: 959px)";
@tablets: ~"only screen and (min-width: 480px) and (max-width: 959px)";


.padding (@top:10px,@right:10px,@bottom:10px,@left:10px) {
	padding-top: @top;
	padding-right: @right;
	padding-bottom: @bottom;
	padding-left: @left;
}

.padding_all(@value:10px) {
	padding:  @value;
}

body {
	color: @maintxtcolor;
	font-family: @font2;
	font-size: @font-size-default;
}

a { color: @maincolor; }

a:hover {.transition(all 0.3s ease-in-out);}

.btn { font-family: @font1; .linear-gradient(to-top, lighten(@maincolor2, 5%), darken(@maincolor2, 5%)); color: @whitetxt;border:2px @maincolor2 solid;
	&-dark { background: @dark;font-size: 20px;color: #fff;margin-top: 60px; }
		&:hover { .linear-gradient(to-top, lighten(@dark, 5%), darken(@dark, 5%)); color: @maincolor2; }
	&-maincolor { background: @maincolor2;font-size: 20px;color: #fff;margin-top: 60px; }
		&:hover { background: transparent; }
	&-inverse { border: 1px #fff solid; .border-radius(30px); }
	&-md { font-size: 16px; font-weight: 700; color: @whitetxt; }
} 

h1, h2, h3, h4, h5, h6 { font-family: @font1; }

header {   position: relative;background: url('@{base-url}images/woman-2197947_960_720.jpg') center center no-repeat,linear-gradient(#41E2ED, #2C7D80); background-size: cover;
  & .header-txt {
  			& .not-bold {  font-weight: 400 !important;font-size: 30px;color: @maincolor; }
  }
  & .navbar-default { background: @maincolor; border-color: transparent; margin-bottom: 0;z-index: 999;    width: inherit;
  				& .navbar-brand { font-weight: 700; color: @whitetxt; }
				& .navbar-nav>li>a { color:@whitetxt; font-family: @font2; font-weight: 700;letter-spacing: .5px; margin: 0 15px; }
				& .navbar-nav>li:last-child>a::after { content: ''; }
				& .navbar-nav>li.active>a, & .navbar-nav>li.active>a:hover, & .navbar-nav>li>a:focus, & .navbar-nav>li>a:hover { color: @maincolor3 !important;background: transparent !important; }		
		}
   & h1 { padding: 50px 0;text-align: center; font-family: @font2; color: @dark; font-size: 50px;.text-shadow();
	  & span { font-weight: 700; }
	}

	& .header-txt { padding-top: 20px; }

	& p { color: @dark; }

	svg {  position: absolute; bottom: -1px; width: 100%; height: 100px;
	}

	& .product_img { position: relative;
			& img { position: relative; z-index: 1; }
	}

	@media (max-width: 699px) {
	  .svg--lg {
	    display: none;
	  }
	}

	@media (min-width: 700px) {
	  .svg--sm {
	    display: none;
	  }
	}
	@media (max-width: 767px) {
		.navbar-default .navbar-nav .open .dropdown-menu>li>a {
		    color: #fff;
		}
	}
}

.product-section { margin-bottom:50px;top: -30px;.border-radius(10px);background: #fff; padding:20px; .drop-shadow(0,0,40px,0,0.25);  
	& h3 { text-align: center;padding:20px 0;font-size: 28px;font-weight: 400;color: @maincolor;  }
}

section#video { background: #fafafa;padding: 30px 0;text-align: center; 
	& .btn { margin: 30px auto; }
	& h3 { text-align: center;padding:20px 0;font-size: 28px;font-weight: 400;color: @maincolor;  }
}

section#innerpage-content {	background: #fff;padding: 100px 0;
	& p { font-size: 16px; }
	& .blog_articles { margin: 20px 0; }
	& h3 { color: @maincolor3; 
		& a { color: @maincolor3; }
	}
	& h5 { font-size: 18px; color: @maincolor; }

}















section h1 { font-size: 44px;color: @maincolor;margin-bottom:80px; font-weight: 700;letter-spacing: -1px;  
	& span { font-size:48px; font-weight: normal; color: @dark; display: block;margin: 10px auto;  }
}

.spacer50 { height: 50px;clear: both; }
.spacer100 { height: 100px;clear: both; }
.spacer200 { height: 200px;clear: both; }

.line-sep-1 { height: 20px; background: url('@{base-url}images/line-separator-1.png') center no-repeat;margin: 10px auto; }

.p_20 { font-size: 20px; }

.plr_80 { padding:0 80px 0 80px; }

.title-big { font-size: 34px;color: #666; }

.row { margin-right: 0; margin-left: 0; }

/*** styles for all elements inside section general **/
section {
	& h1 { font-family: @font2; }
	& .action-btn { margin-top: 30px; text-align: center; }
	& .pricing-btn { background: @maincolor; border: 2px @maincolor solid; .border-radius(30px);
		&:hover { background:transparent; border-color: @maincolor;color: @maincolor;.transition(all 0.3s ease-in-out); }
	}
	& .btn-lg { padding:15px 50px;font-size: 24px; color: @dark; font-family: @font2;font-weight: 700; }
}

p { line-height: 24px;padding: 15px 0; }

.align-center { text-align: center; }

.btn-xl { padding:35px 55px;  }

.highlight { color: @maincolor; }
.darktxt { color: @dark; }
.whitetxt { color: #fff; }
.clear { clear: both; }

.cols-wrap-2 { border:1px #fff solid; .border-radius(6px);padding: 30px; }

::-moz-selection { /* Code for Firefox */
    color: @whitetxt;
    background: @maincolor;
}

::selection {
    color: @whitetxt;
    background: @maincolor;
}



section#footer { background: @footer_bg; padding:50px 0; text-align: center; color: #666;
	& p.copyright { text-transform: none; color: @whitetxt; font-size: 14px;
		
	}
	& a { color: @whitetxt; }
	& .logo-footer-txt { color: @whitetxt;font-size: 24px; }
	& ul { list-style: none; margin:15px 0;padding: 0;
		& li { display: inline; 
			& a { font-size:14px;color: @whitetxt;font-weight: bold;padding: 10px;  }
		}
	}
	& img { margin-bottom: 20px; }
	& small { .border-radius(30px);padding: 20px; border: 1px #888 solid; display: block; margin: 10px auto;  } 
}


body.contact-page section.contact-banner { min-height: 300px !important; }

section#topmost .affix { 

	position: fixed; 
    left: 0;
    top: 0;
    background: @maincolor !important;
    width: 100%;
    z-index: 999;
    text-align: center !important;
    display: table;
    padding-top: 0;
    height: 70px !important;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    min-height: 60px !important;
    & .navbar-nav { margin:0 auto;float: none; display: inline-block;  } 
    & .navbar-nav > li > a { color: @whitetxt !important;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out; }
    & #myNavbar { padding-top: 10px !important;  }
    & .logo { padding-top: 24px;font-size: 24px; color: @whitetxt; 
    	& span { color: @whitetxt; }
    }
}


section#contact-page-content { .padding(50px,0,50px,0);
	& h4  { border-bottom: 1px #ddd solid; padding-bottom: 5px; }
}


#myBtn { .border-radius(50px);.padding_all(20px);background: @header_bg;color: @dark; position: fixed;bottom: 50px; right: 30px; z-index: 99; border: none;    outline: none; }


@media @smartphones, @tablets { 
		section#banner { min-height: 910px; }
		.btn-xl { padding: 15px !important; }
		 header .product_img img { bottom: 0 !important; left: 0 !important; }
		.header-txt { margin-top: 80px !important; }
		.btn-lg { padding:15px 20px !important;font-size: 20px !important;  }
		.product_img img { width: 98%; }
		header {
			& .header-txt {
  				& .not-bold { font-size: 30px !important; }
  			}
  			& h1 { font-size: 44px !important; }
		}
		#myBtn { right: 10px !important; bottom: 10px !important;  }
}