@import '_reset.less';
@import '_grid.less';
@import '_mixins.less';
@import '_swiper.less';

// Grid

@column-width: 90;
@gutter-width: 30;
@columns: 12;
@total-width: (@column-width+@gutter-width)*@columns*1px;
@line-height: 20px;

// Breakpoints

@bp-xxl: 1400px;
@bp-xl: 1200px;
@bp-lg: 1000px;
@bp-md: 800px;
@bp-sm: 600px;
@bp-xs: 500px;

@bp-nav-collapse: @bp-md;

// Fonts

.font-family-1-extra-bold { font-family: 'Open Sans', sans-serif; font-optical-sizing: auto; font-weight: 800; font-variation-settings: "wdth" 100; font-style: normal; }
.font-family-1-bold { font-family: 'Open Sans', sans-serif; font-optical-sizing: auto; font-weight: 700; font-variation-settings: "wdth" 100; font-style: normal; }
.font-family-1-semi-bold { font-family: 'Open Sans', sans-serif; font-optical-sizing: auto; font-weight: 600; font-variation-settings: "wdth" 100; font-style: normal; }
.font-family-1-medium { font-family: 'Open Sans', sans-serif; font-optical-sizing: auto; font-weight: 500; font-variation-settings: "wdth" 100; font-style: normal; }
.font-family-1-regular { font-family: 'Open Sans', sans-serif; font-optical-sizing: auto; font-weight: 400; font-variation-settings: "wdth" 100; font-style: normal; }
.font-family-1-light { font-family: 'Open Sans', sans-serif; font-optical-sizing: auto; font-weight: 300; font-variation-settings: "wdth" 100; font-style: normal; }

.font-size-xs { font-size: 14px; line-height: 20px; }
.font-size-sm { font-size: 16px; line-height: 20px; }
.font-size { font-size: 18px; line-height: 24px; }
.font-size-md { font-size: 24px; line-height: 32px; }
.font-size-lg {  font-size: 28px; line-height: 32px; }
.font-size-xl {  font-size: 36px; line-height: 40px; }
.font-size-xxl {  font-size: 48px; line-height: 52px; }
.font-size-xxxl {  font-size: 64px; line-height: 74px; }

// Colors

@white: #FFFFFF; 
@black: #191919;

@color-white: #FFFFFF; 
@color-black: #191919;

@grey-dark: #212121;
@grey: #666666; 
@grey-light: #E1E1E1;
@grey-lightest: #F1F1F1;

@color-main: #5bc5f2; // Blu
@color-main-2: #FFED4E; // Giallo
@color-body-text: @color-black;

// Base

html {
	width: 100%;
	height: 100%;
}

body { 
	.font-family-1-regular; 
	.font-size-sm;
	color: @color-body-text; 
	height: 100%;
	background-color: @grey-dark;
	
	&.modal-open, &.locked { 
		overflow: hidden; 
	}
}

// Wrapper

.wrapper { 
	z-index: 100; 
	max-width: @total-width; 
	margin: 0 auto; 
	padding: 0 @gutter-width*1px; 
	overflow: hidden; 
			
	.responsive(@bp-sm, {
		padding: 0 @gutter-width*0.75px; 
	});
			
	.responsive(@bp-xs, {
		padding: 0 @gutter-width*0.5px; 
	});
}

// Typography

a, a:visited {
	text-decoration: none;
	color: @color-main;
	font-family: inherit;
}

a:hover {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

h1 {
	.font-family-1-bold;
	.font-size-xxl;
	color: @color-black;
	margin-top: 0;
	margin-bottom: @line-height*2;
		
  .responsive(@bp-xl, { 
    .font-size-xl;
  });
  
  em {
	  font-style: italic;
  }
}

h2 {
	.font-family-1-bold;
	.font-size-xl;
	color: @color-black;
	margin-bottom: @line-height*2;
		
	&.small {
  	.font-size;
  	a {
    	.font-family-1-bold;
    	color: @color-main;
  	}
	}
	
  .responsive(@bp-xl, { 
    .font-size-lg;
  });
  
  em {
	  font-style: italic;
  }
}

h3, .h3 {
	.font-family-1-bold;
	.font-size-md;
	color: @black;
	margin-bottom: @line-height;
			
  .responsive(@bp-xl, { 
    .font-size;
  });
  
  em {
	  font-style: italic;
  }
}

h4 {
  .font-family-1-medium;
  .font-size-md;
  color: @black;
  margin-bottom: @line-height;
  
  a {
    .font-family-1-bold;
  }
  
  .responsive(@bp-lg, { 
    .font-size;
  });
}

h5 {

}


p {
	.font-size;
	.font-family-1-light;
	margin-bottom: @line-height;
	color: @color-body-text;
	
  .responsive(@bp-xl, { 
		.font-size;
  });
	
	b, strong {
		.font-family-1-bold;
		
		i, em {
			.font-family-1-bold;
			font-style: italic;
		}
		
	}
	
	i, em {
		font-family: inherit;
		font-style: italic;
	}
	
	img {
		width: 100%;
		height: auto;
	}
}

ul {
	margin-bottom: @line-height;
	
	li {
		position: relative;
		.font-size;
		.font-family-1-light;
		padding-left: 20px;
		
		b, strong {
			.font-family-1-bold;
		}
		
		&:before {
			content: "";
			position: absolute;
			top: 9px;
			left: 0;
			width: 6px;
			height: 6px;
			.border-radius(50%);
			background-color: @black;
		}
		
	  .responsive(@bp-xl, { 
			.font-size;
	  });
	  
	  a, a:visited, a:hover {
		  color: @color-black; 
	  }
	}
}

b, strong {
	.font-family-1-bold;
	
	i, em {
		.font-family-1-bold;
		font-style: italic;
	}
	
}


// Button

.button, .button:visited {
	.font-family-1-semi-bold;
	.font-size-sm;
	display: inline-block;
	color: @white;
	padding: @line-height/3 @line-height @line-height/3 @line-height;
	text-align: center;
	.transition(background-color 0.2s linear);
	cursor: pointer;
	background-color: @color-main;
	margin-bottom: @line-height;
	border: 0;
	text-decoration: none;
	.border-radius(20px);
	
	&:hover {
		background-color: @color-main;
		color: @white;
		text-decoration: none;
		.opacity(0.8);
	}
	
	&.inactive {
  	.opacity(0.3); 
  	
  	&:hover {
    	background-color: @color-main;
  	  .opacity(0.3); 
  	}
	}
}

.center {
	text-align: center;
}

// Back to top

.top { 
	position: fixed; 
	bottom: 10px; 
	right: 10px; 
	width: 40px; 
	height: 40px; 
	cursor: pointer; 
	z-index: 8000; 
	display: none; 
	background-color: @black; 
	.opacity(1); 
	.border-radius(4px);
		
  .line {
	  position: absolute;
	  top: 0; 
	  left: 50%;
	  width: 16px;
	  height: 3px;
	  background-color: @white;
		.transition(margin-top 0.1s ease-in-out);
	  
	  &.line1 { top: 18px; .transform(rotate(135deg)) !important; margin-left: -13px; }
	  &.line2 { top: 18px; .transform(rotate(-135deg)) !important; margin-left: -3px; }
  }
  
  &:hover {
	  background-color: @color-main; 
  } 
}

.path {
	visibility: hidden;
	height: 0;
}

#map {
  width: 100%;
  height: @line-height*20;
  margin-top: @line-height*4;
}

// Imports

@import '_blocks.less';
@import '_hamburger.less';
@import '_header.less';
@import '_content.less';
@import '_footer.less';
@import '_chocolat.less';


.row {
  .row(12);
}

.overflow-visible {
	overflow: visible;
}

.responsive-img {
	width: 100%;
	height: auto;
}