// LESS


/*
 * VARIABLES
 */
@img: "/campaign_builder/img/";

// colors
@fpoo_green: rgba(97,160,73,1);
@border_color: rgba(240,233,214,1.0);

// dimensions
@max_fixed_width: 750px;

// type
@default_font: "utopia-std", serif;
@default_font_size: 1.5em;
@content_font_size: 1.2em;
@aside_font_size: .75em;
@text_shadow_color: darken(@fpoo_green, 5%);

// media queries
@mobile_first: max—mobile;
@mobile_break: 400px;
@tablet_break: 775px;
@desktop_break: 1000px;
@desktopHD_break: 1200px;

// DEBUG—print media size to screen
/*
body:before{ content: @mobile_first; } // mobile first
@media (min-width: @mobile_break) { // larger than mobile
	body:before{ content: "larger than mobile min—@{mobile_break}"; }
}
@media (min-width: @tablet_break) { // larger than tablet
	body:before{ content: "larger than tablet min—@{tablet_break}"; } 	
}
@media (min-width: @desktop_break) { // larger than desktop
	body:before{ content: "larger than desktop min—@{desktop_break}"; }
}
@media (min-width: @desktopHD_break) { // larger than HD desktop
	body:before{ content: "larger than HD desktop min—@{desktopHD_break}"; }
}
*/
// END

/*
 * MIXINS
 */

// background-image MIXIN
.background-image(@image){
	//@img: fpooimg;
	
	@filename:  ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[1]`;
	@extension: ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[2]`;
	background-image: ~`"url('@{filename}.@{extension}')"`;
	
	
	
	@media (-webkit-min-device-pixel-ratio: 2),
	(min--moz-device-pixel-ratio: 2),
	(-moz-min-device-pixel-ratio: 2),
	(-o-min-device-pixel-ratio: 2/1),
	(min-device-pixel-ratio: 2),
	(min-resolution: 192dpi),
	(min-resolution: 2dppx) { 
		background-image: ~`"url('@{filename}_2x.@{extension}')"`;
	}
}



// Default Overides
html {
	margin: 0;
	padding: 0;
}

body {
	font-family: @default_font;
	font-size: @default_font_size;
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  	margin-top: 0;
  	margin-bottom: 2rem;
  	font-weight: 600; 
}
h1 {
	font-size: 6.0rem; 
	line-height: 1.2;  
	letter-spacing: -.1rem;
	font-weight: 600;
}
h2 { 
	font-size: 3.0rem; 
	line-height: 1.1; 
	letter-spacing: -.1rem; 
}
h3 { 
	font-size: 3.0rem; 
	line-height: 1.3;  
	letter-spacing: -.1rem;
}
h4 { 
	font-size: 2.4rem;
	line-height: 1.35; 
	letter-spacing: -.08rem; 
}
h5 { font-size: 1.8rem; 
	line-height: 1.5;  
	letter-spacing: -.05rem; 
}
h6 { font-size: 1.5rem; 
	line-height: 1.6;  
	letter-spacing: 0; 
}

img {
	width: 100%;
}


.container {
	// mobile first
	margin: auto;
	margin-top: 0em;
	margin-bottom: 1em;
	padding: 0;
	max-width: @max_fixed_width;
	width: 100%;
	
	
	@media (min-width: @mobile_break) { // larger than mobile
		
	}
	@media (min-width: @tablet_break) { // larger than tablet
		width: 98%;
		margin-top: 1em;
			
	}
	@media (min-width: @desktop_break) { // larger than desktop
		border: .20em solid @border_color;
		
	}
	@media (min-width: @desktopHD_break) { // larger than HD desktop
		
	}
}





// Asides
@aside_margin: 1.5em;
.aside-left,
.aside-right {
	background-color: lighten(@fpoo_green, 48%);
	padding: 1em;
	font-size: @aside_font_size;
	
	margin-bottom: @aside_margin;
	//width: 40%;
	
	p {
		line-height: 1.5em !important;
	}
	
	.testimonial_quote_open {
		display: inline-block;
		margin-top: .55em;
		vertical-align: bottom;
		line-height: 0em;
		font-size: 5em;
		text-indent: -0.2em;
		color: green;
	}
	.testimonial_quote_close {
		display: inline-block;
		vertical-align: -.3em;
		font-size: 2em;
		text-indent: 0;
		color: green;
	}
}
.aside-left {
	margin-right: @aside_margin;
	margin-left: 0;
	float: left;	
}
.aside-right {
	margin-left: @aside_margin;
	margin-right: 0;
	float: right;
}
.transparent {
		background-color: transparent !important; //kt
	}
.green {
	color: @fpoo_green;
}
.center {
	text-align: center;
}



#header {
	background-color: lighten(saturate(@fpoo_green, 20%), 20%);
	//width: @max_fixed_width;
	height: auto;
	
	
	img {
		display: block;
		border-bottom: .1em rgba(255,255,239,1) solid;
		//width: 100%;
	}
	
	.header_img {
		background-color: @border_color; // shows through as margin color between images
		width: 33.33%;
		padding-bottom: 22.105%; // 22.105%; // (950px[header width] / 210px[img height])
		display: block;
		background-repeat:no-repeat;
		background-size:100%;
		border-bottom: .2em solid rgba(240,233,214,1.0);
		
		
		@media (min-width: @mobile_break) { // larger than mobile
		}
		@media (min-width: @tablet_break) { // larger than tablet
		}
		@media (min-width: @desktop_break) { // larger than desktop
		}
		@media (min-width: @desktopHD_break) { // larger than huge desktop
			
		}
	}
	#header_img_1 {
		.background-image('@{img}olives_in_olive_oil.jpg');
		float: left;
		background-position-x: -.2em; // creates margin between photos
	}
	#header_img_2 {
		.background-image('@{img}bruschetta.jpg');
		float: left;
		
	}
	#header_img_3 {
		.background-image('@{img}moz_in_olive_oil.jpg');
		float: right;
		background-position-x: .2em; // creates margin between photos
	}
	
	
	
	h1 { // brand
		display: block;
		margin: 0;
		margin-top: 22.105%; // to offset header img float
		padding: .09em;
		height: auto;
		color: white;
		text-align: center;
		text-transform: capitalize;
		font-variant: small-caps;
		font-weight: 300;
		text-shadow: .02em .05em @text_shadow_color;
		line-height: 1em;
		letter-spacing: 0.02em;
		background: linear-gradient(to top,  @fpoo_green 0%, lighten(saturate(@fpoo_green, 20%), 20%) 100%);
		
		// mobile first	
		////font-size: 1.7em;
		font-size: 3em; // stack brand title onto 2 lines
		
		@media (min-width: @mobile_break) { // larger than mobile
			font-size: 2.3em;
		}
		@media (min-width: @tablet_break) { // larger than tablet
			font-size: 3.4em;
		}
		@media (min-width: @desktop_break) { // larger than desktop

		}
		@media (min-width: @desktopHD_break) { // larger than huge desktop
			
		}
	}
}

#content {
	padding: 1.4em;
	font-size: @content_font_size; // paragraph
	
	
	p {
		line-height: 1.3em;
		margin-bottom: 1em;
		text-indent: 1em;
	}
	
	img {
		margin-bottom: 1em;
	}
	
	.aside {  //Kt
		background-color: lighten(@fpoo_green, 50%);
		padding:1em 1.5em 1.5em 1.5em;
		
		@media (min-width: @tablet_break) { // larger than tablet
			padding: 3em 1.5em 0 1.5em;
		}
	}
	.right { //Kt
		float:right;
	}
	
	.left {  //Kt
		float:left;
	}
	.small { //Kt
		font-size:smaller;
	}
	.line {  //Kt
		width:100%;
		border-bottom: 1px solid black;
		margin: auto auto 20px auto;
	}
	.clear { //Kt
		clear:both;
		margin-top:10px;
	}
	.postscript { //Kt
		font-size: 2.3em;
		color: green;
	}
	.icon {  //Kt
		width:auto;
		vertical-align: -1.1em;
		margin-right:10px;
	}
	.large_set {  //Kt
		/*width:150px;*/
	}
	.small_set {  //Kt
		/*width:115px;*/
	}
	.border {  //Kt
		border:2px solid green;
	}
	.rotate { //Kt
		-ms-transform: rotate(5deg); /* IE 9 */
		-webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
		transform: rotate(5deg);
		-webkit-font-smoothing:antialiased;
	}
	.shadow { //Kt
		box-shadow: 0px 0px 3px #ddd;
		
	}
	.frame {  //Kt
		border:10px solid #fff;
	}
	.no_indent {  //Kt //kn changed to underscore
		text-indent: 0 !important;
	}
	.trademark {  //Kt registered symbol
		font-family:arial;
	}
	span.avoid_wrap { // updated to underscore
		display:inline-block;
		text-indent: 0;
	}
	
	
	div.signoff {
		width: 100%;
		margin-top: 3em;
		margin-bottom: 3em;
		
		@media (min-width: @mobile_break) { // larger than mobile
			width: 100%;
			margin-top: 5em;
			margin-bottom: 3em;
		}
		@media (min-width: @tablet_break) { // larger than tablet
			width: 64%;
			margin-top: 5em;
			margin-bottom: 3em;
		}
		
		
		p {
			margin: 0px;
			text-indent: 0em;
		}
		.tj_signoff_img {
			width: 40%;
			float: right;
			-webkit-font-smoothing:antialiased;
			-webkit-backface-visibility: hidden;
			
			@media (min-width: @mobile_break) { // larger than mobile
				width: 50%;
			}
		}
		.tj_signature {
			width: 45%;
		}
	}
	
	.choose-set {
		background-color: #f2f8f0;
		padding: 1em 1.5em 1.5em 1.5em;
		
		@media (min-width:775px) {
	        padding: 3em 1.5em 0 1.5em;
	        background-color: #f2f8f0;
	    }
	    
	    p {
			margin:auto 1em 1em 1em;
			
			@media (min-width:775px) {
		        margin:auto auto 1.5em auto;
		    }
		}
	    a.button_set {
			margin: .0em auto 1.5em auto;
			
			@media (min-width:775px) {
			    margin: 0em auto 1.5em auto;
			    background-color: #f2f8f0;
			}
		}
	}
	
	a.button_enroll,
	a.button_set {
		display: block;
		width: 80%;
		height: auto;
		margin: 1.5em auto 1.5em auto;
		padding: .5em;
		text-align: center;
		color: #fff;
		font-size: 1.85em;
		line-height: 1em;
		@media (min-width: @tablet_break) { // larger than mobile
			font-size: 1.4em;
		}
		@media (min-width: @desktop_break) { // larger than desktop
			font-size: 2.5em;
		}
		text-decoration: none;
		background-color: @fpoo_green;
		//background-image: linear-gradient(#42f057 0%, #1fba26 100%); // kn made 2 buttons same color
		background-image: linear-gradient(#1fba26 0%, #21782c 100%);
		border-radius: .5em;
		border: 1px solid #fff;
		box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.5);
		cursor: pointer;
	}
	a.button_set.small_set {
		//background-image: linear-gradient(#1fba26 0%, #21782c 100%);
	}
	a.button_set {
		font-size: 2em;
		@media (min-width: @tablet_break) { // larger than tablet
			font-size: 1.6em;
		}
	}
}
.image-hourglass, 
.image-olive-branch,
/*.image-bottles,
.image-olive-tree,
.image-olive-harvest,*/
.image-wine-glass { //scales images for mobile
		width:50%;
		margin:auto;
		display:block;
		
	@media (min-width: @tablet_break) { // larger than tablet
				width: 100%;
			}
}

div#footer {
	margin: auto;
	text-align: center;
	max-width: @max_fixed_width;
	width: 100%;
	
	@media (min-width: @tablet_break) { // larger than tablet
		width: 98%;
		margin-top: 1em;
	}
	p {
		margin: 0px auto;
	}
}