@charset "UTF-8";
/* 
	Theme Name: The Other Range 1.0
	Description: The Other Range Original Theme
	Text Domain: theotherrange
	Domain Path: /languages/
	Author: Gianfranco Lanucara
	Author URI: https://gianfrancolanucara.com
	Version: 1.0
	Framework: Scratch Is Dead (2.0)Version: 1.0
	
*/
/* CSS IMPORTS
------------------------------------------------------------- */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+Pro&family=Bebas+Neue&family=Allison&display=swap");
html {
	line-height: 1.15;
	  /* 1 */
	-webkit-text-size-adjust: 100%;
	  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */

body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
	box-sizing: content-box;
	  /* 1 */
	height: 0;
	  /* 1 */
	overflow: visible;
	  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
	font-family: monospace, monospace;
	  /* 1 */
	font-size: 1em;
	  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */

a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
	border-bottom: none;
	  /* 1 */
	text-decoration: underline;
	  /* 2 */
	text-decoration: underline dotted;
	  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b, strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code, kbd, samp {
	font-family: monospace, monospace;
	  /* 1 */
	font-size: 1em;
	  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */

img {
	border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button, input, optgroup, select, textarea {
	font-family: inherit;
	  /* 1 */
	font-size: 100%;
	  /* 1 */
	line-height: 1.15;
	  /* 1 */
	margin: 0;
	  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button, input {
	/* 1 */
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button, select {
	/* 1 */
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button, [type="button"], [type="reset"], [type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
	box-sizing: border-box;
	  /* 1 */
	color: inherit;
	  /* 2 */
	display: table;
	  /* 1 */
	max-width: 100%;
	  /* 1 */
	padding: 0;
	  /* 3 */
	white-space: normal;
	  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"], [type="radio"] {
	box-sizing: border-box;
	  /* 1 */
	padding: 0;
	  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
	-webkit-appearance: textfield;
	  /* 1 */
	outline-offset: -2px;
	  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
	-webkit-appearance: button;
	  /* 1 */
	font: inherit;
	  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
	display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */

template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
	display: none;
}

/* Normalize Browser Preferences */
/* Px to Rem
------------------------------------------------------------- */
/* 

2px = 0.125rem
4px = 0.25rem
6px = 0.375rem
8px = 0.5rem
10px = 0.625rem
12px = 0.75rem
14px = 0.875rem (font)

16px = 1rem (font)

18px = 1.125rem (font)
20px = 1.25rem (font)
22px = 1.375rem (font)
24px = 1.5rem
26px = 1.625rem
28px = 1.75rem
30px = 1.875rem

32px = 2rem
34px = 2.125rem (font: Main Titles)

*/
/* TYPOGRAPHY
============================================================= */
/* FONTS IMPORTS
------------------------------------------------------------- */
/* FONT FAMILIES
------------------------------------------------------------- */

body, #home h2 {
	font-family: 'Source Serif Pro', Helvetica, Arial, sans-serif;
}

h1, h2 {
	font-family: 'Bebas Neue', Helvetica, Arial, sans-serif;
}

section#manifest h2 {
	font-family: 'Allison', Helvetica, Arial, sans-serif;
}

/* VARIABLES & MIXINS
============================================================= */
/* Major Breakpoints - Based On Default Font = 16px
------------------------------------------------------------- */
/* 320px */
/* 480px */
/* 600px */
/* 768px */
/* Usage:
@media (min-width: $screen2) { }
*/
/* SETTINGS
============================================================= */

html {
	font-size: 16px;
}

/* Box Model Behaviour For Inside Padding And Borders */

*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* Make Images Fluid */

img {
	max-width: 100%;
	height: auto;
	width: auto\9;
	  /* ie8 */
}

/* Figure Reset */

figure {
	margin: 0;
}

/* Unordered Lists Reset */

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Paragraphs Reset */

p {
	margin: 0;
	margin-bottom: 1rem;
}

/* Links Reset */

a {
	text-decoration: none;
}

/* Headings Reset */

h1, h2, h3, h4, h5, h6 {
	/* font-size: 1rem; */
	font-weight: normal;
	margin: 0;
}

/* Address Reset */

address {
	font-style: normal;
}

/* Emphasis & Strong Reset
em { 
  font-style: normal;
  font-style: italic;
}

strong { 
  font-weight: normal;
  font-weight: bold;
}  
*/
/* Remove Blue Highlight when tapping on some Android Touch Screens */

button, textarea, input, select, a, #menu, .close, #video-menu {
	-webkit-tap-highlight-color: transparent;
}

/* Fonts, Colors, Breakpoints */
/* FONT SIZES
------------------------------------------------------------- */
/* Default */

main {
	font-size: 1rem;
}

@media (min-width: 20rem) {
	main {
		font-size: 1.25rem;
		line-height: 1.6rem;
	}
}
  @media (min-width: 37.5rem) {
	main {
		font-size: 1.5rem;
		line-height: 2.125rem;
	}
}
/* Titles */

h1 {
	font-size: 2rem;
}

@media (min-width: 20rem) {
	h1 {
		font-size: 3rem;
	}
}
  @media (min-width: 30rem) {
	h1 {
		font-size: 4rem;
	}
}
  @media (min-width: 37.5rem) {
	h1 {
		font-size: 5rem;
	}
}
h2 {
	font-size: 2rem;
}

@media (min-width: 20rem) {
	h2 {
		font-size: 2.5rem;
	}
}
  @media (min-width: 30rem) {
	h2 {
		font-size: 3rem;
	}
}
  @media (min-width: 37.5rem) {
	h2 {
		font-size: 4rem;
	}
}
#home h2 {
	font-size: 1rem;
}

@media (min-width: 20rem) {
	#home h2 {
		font-size: 1.75rem;
	}
}
  @media (min-width: 30rem) {
	#home h2 {
		font-size: 2rem;
	}
}
  @media (min-width: 37.5rem) {
	#home h2 {
		font-size: 2rem;
	}
}
section#manifest h2 {
	font-size: 3rem;
	line-height: 2.5rem;
}

@media (min-width: 20rem) {
	section#manifest h2 {
		font-size: 3.2rem;
		line-height: 3rem;
	}
}
  @media (min-width: 30rem) {
	section#manifest h2 {
		font-size: 4rem;
		line-height: 3rem;
	}
}
  @media (min-width: 37.5rem) {
	section#manifest h2 {
		font-size: 5rem;
		line-height: 4rem;
	}
}
  @media (min-width: 48rem) {
	section#manifest h2 {
		font-size: 5.7rem;
	}
}
h3 {
	font-size: 1.5rem;
}

@media (min-width: 20rem) {
	h3 {
		font-size: 1.75rem;
	}
}
  @media (min-width: 30rem) {
	h3 {
		font-size: 2rem;
	}
}
  @media (min-width: 37.5rem) {
	h3 {
		font-size: 2.5rem;
	}
}
/* Exceptions */

p.hero {
	font-size: 1.25rem;
	line-height: 1.6rem;
}

@media (min-width: 20rem) {
	p.hero {
		font-size: 1.5rem;
		line-height: 2.125rem;
	}
}
  @media (min-width: 37.5rem) {
	p.hero {
		font-size: 2rem;
		line-height: 2.5rem;
	}
}
#home #bar p {
	font-size: 1rem;
}

@media (min-width: 20rem) {
	#home #bar p {
		font-size: 1.25rem;
		line-height: 1.6rem;
	}
}
  @media (min-width: 37.5rem) {
	#home #bar p {
		font-size: 1.5rem;
		line-height: 2.125rem;
	}
}
#quote p:first-of-type {
	/* Same as "p.hero" */
	font-size: 1.25rem;
	line-height: 1.6rem;
}

@media (min-width: 30rem) {
	#quote p:first-of-type {
		font-size: 1.5rem;
		line-height: 2.125rem;
	}
}
  @media (min-width: 37.5rem) {
	#quote p:first-of-type {
		font-size: 2rem;
		line-height: 3rem;
	}
}
footer {
	font-size: 0.875rem;
}

@media (min-width: 20rem) {
	footer {
		font-size: 1rem;
	}
}
/* Fonts Definitions, Fonts Size, Fonts Families */
/* COLORS
============================================================= */
/* Definitions: Colors 
------------------------------------------------------------- */
/* Texts */
/* Dark */
/* Green */
/* Tangerine */
/* Pale */
/* Default */
/* Background
------------------------------------------------------------- */

body {
	background: #F8F9FA;
}

/* Text Colors
------------------------------------------------------------- */

body {
	color: #777;
}

h1 {
	color: #6C757D;
}

h2 {
	color: #6C757D;
}

#home h2 {
	color: #BBC7A4;
}

section#manifest h2 {
	color: #BBC7A4;
}

h3 {
	color: #BBC7A4;
}

#home #bar p {
	color: #BBC7A4;
}

p.hero {
	color: #BBC7A4;
}

.slogan p, #quote p:first-of-type {
	color: #EC975F;
}

#manifest p, #quote p:last-of-type, footer {
	color: #aaa;
}

/* Base Link Color */

a {
	color: #777;
	text-decoration: underline;
}

a:hover {
	color: #BBC7A4;
}

/* Hover State Transitions (but only for devices with :hover capabilities (No Touchscreen) */

@media (hover: hover) and (pointer: fine) {
	a {
		transition: color 0.25s, background 0.25s;
	}
}

/* Colors Definitions, Colors */
/* HTML Structure:

body

  div#canvas
	
	  header
	
	  main
	    section
	    section
	  	
	  footer
	 
*/
/* GENERAL LAYOUT
============================================================= */
/* Sticky Footer
------------------------------------------------------------- */

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	flex: 1;
	  /* So that it fills the available vertical space pushing the footer down */
}

/* Define Centered Column for Content & Side Margins
------------------------------------------------------------- */

#canvas {
	/* Centering */
	margin: 1rem auto;
	  /* Create Side Margins */
	width: 90%;
	max-width: 1000px;
	  /* Define Column Content */
}

@media (min-width: 30rem) {
	#canvas {
		margin-top: 3rem;
	}
}
  @media (min-width: 37.5rem) {
	#canvas {
		width: 93%;
	}
}
/* Site Layout, Content Layout */
/* Main Navigation System & Styles, Video Navigation System & Styles */
/* GENERAL ELEMENTS
============================================================= */
/* Headings & Titles
------------------------------------------------------------- */
/* Texts (Content)
------------------------------------------------------------- */
/* Headings, Texts, Links, Buttons, Forms */
/* GENERAL LAYOUT
------------------------------------------------------------- */

div.slogan {
	text-align: center;
	border-top: 1px solid #DEE2E6;
	border-bottom: 1px solid #DEE2E6;
	padding-top: 2rem;
	padding-bottom: 2rem;
	  /* Vertical Space */
	margin-top: 4rem;
	margin-bottom: 2rem;
}

@media (min-width: 20rem) {
	div.slogan {
		margin-top: 5rem;
		margin-bottom: 3rem;
	}
}
  @media (min-width: 30rem) {
	div.slogan {
		margin-top: 6rem;
	}
}
  @media (min-width: 37.5rem) {
	div.slogan {
		margin-top: 8rem;
		margin-bottom: 4rem;
	}
}
  div.slogan p {
	margin: 0;
}

.slogan p, #quote p:first-of-type {
	font-style: italic;
}

/* Override Last Paragraph Bottom Margin */

section#manifest p:last-of-type, section#about .content p:last-of-type, section#approach .content p:last-of-type, footer p:last-of-type {
	margin-bottom: 0;
}

/* Shift Layout */

@media (min-width: 20rem) {
	p.hero {
		margin-left: 3rem;
		padding-left: 1rem;
		border-left: 1px solid #BBC7A4;
	}
}

@media (min-width: 30rem) {
	p.hero {
		margin-left: 7rem;
		margin-bottom: 2rem;
	}
	
	div.content {
		width: 75%;
	}
}

@media (min-width: 37.5rem) {
	p.hero {
		margin-bottom: 3rem;
	}
}

/* Vertical Space */

h2, h3 {
	margin-bottom: 1rem;
}

@media (min-width: 20rem) {
	h2, h3 {
		margin-bottom: 2rem;
	}
}
  @media (min-width: 37.5rem) {
	h2, h3 {
		margin-bottom: 3rem;
	}
}
/* Helpers
------------------------------------------------------------- */

.center {
	display: flex;
	justify-content: center;
}

/* HEADER
------------------------------------------------------------- */

header {
	/* Vertical Space */
	padding: 2rem 0;
	margin-bottom: 1.5rem;
}

/* BAR
------------------------------------------------------------- */

#bar {
	border-top: 3px solid #DEE2E6;
	border-bottom: 3px solid #DEE2E6;
	  /* Vertical Space */
	padding: 2rem 0;
	margin-bottom: 1rem;
}

@media (min-width: 37.5rem) {
	#bar {
		margin-bottom: 1.5rem;
	}
}
  #bar p {
	margin: 0;
}

#bar a {
	text-decoration: none;
}

/* HOMEMPAGE
------------------------------------------------------------- */

#home section {
	border-bottom: 1px solid #DEE2E6;
	padding-bottom: 2rem;
	margin-left: 5rem;
	margin-bottom: 2rem;
}

#home h2 {
	margin: 0 0 1rem 0;
}

/* MANIFEST
------------------------------------------------------------- */

section#manifest {
	/* Vertical Space */
	margin-bottom: 3rem;
}

@media (min-width: 20rem) {
	section#manifest {
		margin-bottom: 4rem;
	}
}
  @media (min-width: 30rem) {
	section#manifest {
		margin-bottom: 6rem;
	}
}
  section#manifest h2 {
	margin-bottom: 0.5rem;
    /* Override Defalut */
}

section#manifest p {
	margin-left: 2rem;
}

@media (min-width: 48rem) {
	section#manifest p {
		margin-left: 3rem;
	}
}
/* ABOUT ME
------------------------------------------------------------- */

section#about {
	border-top: 3px solid #DEE2E6;
	padding-top: 0.5rem;
}

section#about h2 {
	color: white;
	margin-left: 1rem;
	margin-top: -2.2rem;
}

@media (min-width: 20rem) {
	section#about h2 {
		margin-top: -3rem;
		margin-left: 1.2rem;
	}
}
    @media (min-width: 37.5rem) {
	section#about h2 {
		margin-top: -4rem;
		margin-left: 1.5rem;
	}
}
/* APPROACH
------------------------------------------------------------- */

section#approach {
	/* Background */
	position: relative;
}

section#approach:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: -3rem;
	z-index: -1;
	background-image: url(../images/bg-1.png);
	background-repeat: no-repeat;
	background-position: center top;
}

/* PROGRAM
------------------------------------------------------------- */

section#program {
	/* Background */
	position: relative;
}

section#program:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: -3rem;
	z-index: -1;
	background-image: url(../images/bg-1.png);
	background-repeat: no-repeat;
	background-position: center top;
}

#modules {
	/* Vertical Space */
	margin-top: 3rem;
}

@media (min-width: 30rem) {
	#modules {
		margin-top: 4rem;
	}
}
  @media (min-width: 37.5rem) {
	#modules {
		margin-top: 5rem;
	}
}
.module {
	/* Vertical Space */
	margin-bottom: 2rem;
	border-bottom: 1px solid #DEE2E6;
	padding-bottom: 1rem;
}

.module:last-of-type {
	margin-bottom: 0;
}

@media (min-width: 30rem) {
	.module {
		margin-bottom: 3rem;
	}
}
  @media (min-width: 37.5rem) {
	.module {
		margin-bottom: 4rem;
	}
}
  .module p {
	margin-bottom: 1rem;
}

.module ul {
	margin-left: 3rem;
	list-style-type: circle;
}

.module li {
	margin-bottom: 1rem;
}

/* INFO
------------------------------------------------------------- */

#info {
	/* Background */
	position: relative;
	  /* Vertical Space */
	margin-bottom: 3rem;
}

#info:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: -3rem;
	z-index: -1;
	background-image: url(../images/map.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

@media (min-width: 30rem) {
	#info {
		margin-bottom: 4rem;
	}
}
  @media (min-width: 37.5rem) {
	#info {
		margin-bottom: 6rem;
	}
}
a.button {
	text-decoration: none;
	color: #fff;
	display: inline-block;
	background-color: #BBC7A4;
	padding: 1rem;
	margin-top: 2rem;
}

a.button:hover {
	color: #fff;
	background-color: #6C757D;
}

/* QUOTE
------------------------------------------------------------- */

#quote {
	/* Double Border with Pseudo Element */
	position: relative;
	border-top: 1px solid #DEE2E6;
	padding: 6rem 0;
}

#quote:before {
	content: " ";
	position: absolute;
	z-index: -1;
	top: 3px;
	bottom: 3px;
	left: 0;
	right: 0;
	border-bottom: 1px solid #BBC7A4;
	border-top: 1px solid #BBC7A4;
}

#quote p:last-of-type {
	margin-left: 2rem;
}

/* FOOTER
------------------------------------------------------------- */

footer {
	border-top: 1px solid #DEE2E6;
	border-bottom: 1px solid #DEE2E6;
	padding-top: 1rem;
	padding-bottom: 1rem;
	text-align: center;
}

/* General (Header, Footer, …); Specific (Training, Programs, …) */
/* @import 'breakpoints-viewer';For Developement Only */