<section data-description="bold/cursive">
	<div class="wrapper">
	 <h1 class="beta uppercase montserrat regular line-after-heading">
		This shouldn't be so difficult 
		</h1>
		<p class="delta cardo regular italic">
		Wow, what a fine cofee flavor
		</p>
	 </div>
 </section>
	
	<section data-description="thin/bold">
	<div class="wrapper">
	 <h1 class="alpha lato thin thick-header-line uppercase ls-small">
		Nice web type
		</h1>
		<p class="mega open-sans bold uppercase">
		This shouldn't be<br> so difficult 
		</p>
	 </div>
	</section>
	
	<section data-description="Add emphasis with color">
	<div class="wrapper">
	 <h1 class="mega montserrat bold">
		Movement is <span class="color-emphasis-1">here.</span><br>
		 And it is here <span class="color-emphasis-1">to stay.</span>
		</h1>
	 </div>
	</section>
	
	<section data-description="Thin/Super bold/thin">
	<div class="wrapper">
	 <h1 class="gamma lato thin uppercase ls-xlarge">
		 Beautiful<br>
		 <span class="open-sans tera ls-xlarge bold">Type</span><br>
		 <span class="epsilon ls-medium">Yes it can be done</span>
		</h1>
	 </div>
	</section>
	
	<section data-description="Playing with serifs">
	<div class="wrapper">
	 <h1 class="gamma light merriweather italic text-left">
		 Welcome to typography<br>
		<span class="tera uppercase text-left ls-large vollkorn bold normal">Paradise</span>
		</h1>
	 </div>
	</section>
	
	<section data-description="Super contrast">
	<div class="wrapper">
	 <h1 class="delta uppercase thin raleway color-emphasis-2 ls-medium">
		 Please let me<br>
		<span class="supersize montserrat bold">Scale</span>
		</h1>
	 </div>
	</section>
	
	<section data-description="Vertical text">
	<div class="wrapper">
	 <h1 class="mega abril-fatface regular uppercase line-height-small ls-large">
		 <span class="delta lato light ls-small">Just</span><br>
		 T<br>
		 yp<br>
		 e<br>
		 &amp;<br>
		 fu<br>
		 n
		</h1>
	 </div>
	</section>
	
	<section data-description="Playful type">
	<div class="wrapper">
	 <h1 class="giga bree-serif regular double-header-line">Just Being Playful</h1>
		<p class="delta oswald regular uppercase ls-large">You know you like it</p>
	 </div>
	</section>
	
	<section data-description="Middle flourish">
	<div class="wrapper">
	 <h1 class="mega regular ls-large libre-baskerville uppercase color-emphasis-3">
			 Just <span class="decorative-span regular ls-small">The</span> Finest
	 </h1>
	 </div>
	</section>

	<section data-description="Overlay text">
	<div class="wrapper large-wrap">
		<h1 data-text="Wow, what a fine cofee flavor"  class="gigantic bold montserrat ls-xlarge uppercase text-overlay">
			Bold type
		</h1>
		</div>
	</section>

@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400|Playfair+Display:400,700,400italic|Libre+Baskerville:400,700,400italic|Muli:300,400|Open+Sans:400,300,700|Oswald:400,700|Raleway:400,100,300,700|Montserrat:400,700|Merriweather:400,300,300italic,400italic,700|Bree+Serif|Vollkorn:400italic,400,700|Abril+Fatface|Cardo:400,400italic);

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* Basically just a bunch of typeface classes, some helper classes(letter-spacing, font-weight, etc.), decorative classes(line-on-headers, double-lines, etc). Three types of bg, image, gradient and solid color. I do this for testing headings/hero-image typography. Now there are ten presets here, but you can mix everything. I know that this brings to classivitis, but I still didn't dwelved into Saas, it is next on my learning roadmap, but I will create a fork soon with Saas and variables. */


/* Preset 1 ---- Bold/cursive  */
/* Preset 2 ---- Thin/bold  */
/* Preset 3 ---- Add emphasis with color */
/* Preset 4 ---- Thin/Super bold/thin */
/* Preset 5 ---- Playing with serifs */
/* Preset 6 ---- Super contrast */
/* Preset 7 ---- Vertical text */
/* Preset 8 ---- Playful type */
/* Preset 9 ---- Middle flourish */
/* Preset 10 ---- Overlay text */

/* ==== Font sizes(based on Typeplate's scale) ==== */
html {
  font: normal 112.5%/1.65 serif; /* base font size 18px with 1.65 line-height */
  -moz-font-feature-settings: "liga=1, dlig=1"; /* common and discretionary ligatures */
    -ms-font-feature-settings: "liga", "dlig";
    -webkit-font-feature-settings: "liga", "dlig";
    -o-font-feature-settings: "liga", "dlig";
    font-feature-settings: "liga", "dlig";
}
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
  margin-top: 0;
  color: #fff;
	display: inline-block;
	position: relative;
}
p{
  margin-top: 4rem;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1
}
.gigantic{font-size: 11rem;}
.supersize{font-size: 8rem;}
.tera {
  font-size: 6.5rem; /* 117 / 18 = 6.5 */
  margin-bottom: 0.25385rem;
}

.giga {
  font-size: 5rem; /* 90 / 18 = 5 */
  margin-bottom: 0.33rem;
}

.mega {
  font-size: 4rem; /* 72 / 18 = 4 */
  margin-bottom: 0.4125rem;
}

.alpha {
  font-size: 3.33333rem; /* 60 / 18 = 3.3333 */
  margin-bottom: 0.495rem;
}

.beta {
  font-size: 2.6667rem; /* 48 / 18 = 2.6667 */
  margin-bottom: 0.61875rem;
}

.gamma {
  font-size: 2rem; /* 36 / 18 = 2 */
  margin-bottom: 0.825rem;
}

.delta {
  font-size: 1.3333333333333333rem; /* 24 / 18 = 1.3333 */
  margin-bottom: 1.2375rem;
}

.epsilon {
  font-size: 1.16667rem; /* 21 / 18 = 1.1667 */
  margin-bottom: 1.41429rem;
}

.zeta {
  font-size: 1rem; /* 18 = 18 × 1 */
  margin-bottom: 1.65rem;
}
/* ==== Typefaces  ==== */

.open-sans{font-family: 'Open Sans';}
.lato{font-family: 'Lato'}
.playfair-display{font-family: 'Playfair Display'}
.libre-baskerville{font-family: 'Libre Baskerville'}
.oswald{font-family: 'Oswald'}
.montserrat{font-family: 'Montserrat'}
.vollkorn{font-family: 'Vollkorn'}
.bree-serif{font-family: 'Bree Serif'}
.raleway{font-family: 'Raleway'}
.merriweather{font-family: 'Merriweather'}
.cardo{font-family: 'Cardo'}
.abril-fatface{font-family: 'Abril Fatface'}
.muli{font-family: 'Muli'}

/* ==== Weights, styles, letterspacing, etc. ==== */

.thin{font-weight: 100;}
.light{font-weight: 300;}
.regular{font-weight: 400;}
.bold{font-weight: 700;}
.italic{font-style: italic;}
.normal{font-style: normal;}
.ls-small{letter-spacing: 2px;}
.ls-medium{letter-spacing: 4px;}
.ls-large{letter-spacing: 8px;}
.ls-xlarge{letter-spacing: 12px;}
.uppercase{text-transform: uppercase;}
.color-emphasis-1{color: #FF4056}
.color-emphasis-2{color: #000;}
.color-emphasis-3{color: #60547c}
.text-left{text-align: left;}
.line-height-small{line-height: 1.2}
.line-height-medium{line-height: 1.45}
.line-height-large{line-height: 1.65}


/* ===== Flourish, heading horizontal lines, etc. ==== */

.thick-header-line:before, .thick-header-line:after{
	content: "";
	display: block;
	position: absolute;
	width:7rem;
	height: 4px;
	background-color: #fff;
	top:50%;
	margin-bottom: -4px;
}
.thick-header-line:before{
	left: -7.5rem;
}
.thick-header-line:after{
	right: -7.5rem;
}

.thin-header-line:before, .thin-header-line:after{
	content: "";
	display: block;
	position: absolute;
	width:7rem;
	height: 1px;
	background-color: #fff;
	top:50%;
	margin-bottom: -1px;
}
.thin-header-line:before{
	left: -7.5rem;
}
.thin-header-line:after{
	right: -7rem;
}
.line-after-heading:before{
	content: "";
	display: block;
	position: absolute;
	background-color: #fff;
	width:4rem;
	height: 2px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	bottom: -2rem;
	
}
.double-header-line:before, .double-header-line:after{
	content: "";
	display: block;
	position: absolute;
	width:7rem;
	background-color: transparent;
	height: 4px;
	border-top: 1px solid #fff;
	border-bottom:1px solid #fff;
	top: 50%;
	margin-bottom: -4px;
}
.double-header-line:before{
	left: -7.5rem;
}
.double-header-line:after{
	right: -7.5rem;
}
.decorative-span{
  display: inline-block;
    font-size: 30px;
    line-height: 60px;
    margin: 0 10px;
    position: relative;
    vertical-align: middle;
	color: #fff;
}
.decorative-span:before, .decorative-span:after{
    background-color: #fff;
    bottom: 100%;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    right: 0;
}
.decorative-span:after {
    top: 96%;
}

.text-overlay:before{
	content: attr(data-text);
	z-index: 99;
	width: 98%;
	height: 50px;
	background-color: hsla(0,0%,0%,0.6);
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	line-height: 50px;
	text-align: center;
	color:#f0ad00;
	font-family: 'bree serif';
	font-style: normal;
	font-size: 1.3rem;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 400;
}

/* ==== General styles ==== */
section{
	height: 600px;
	padding: 3rem 0;
	position: relative;
}
.wrapper{
	max-width: 53.33rem;
	margin: 0 auto;
	position: relative;
	z-index: 10;
	transform: translateY(-50%);
	top:50%;
	text-align: center;
}
.wrapper.large-wrap{max-width: 100%;}
section:nth-of-type(3n+1){
	background-size: cover;
}
section:nth-of-type(1){
	background-image: url(https://download.unsplash.com/photo-1429277096327-11ee3b761c93);
}
section:nth-of-type(2){
  background: -webkit-linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #24C6DC 10%, #514A9D 90%); /* W3C */
        
}
section:nth-of-type(3){
	background-color: #2A2C39;
}
section:nth-of-type(4){
	background-image: url(https://download.unsplash.com/photo-1428550670225-15f007f6f1ba)
}
section:nth-of-type(5){
  background: -webkit-linear-gradient(90deg, #134E5E 10%, #71B280 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #134E5E 10%, #71B280 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #134E5E 10%, #71B280 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #134E5E 10%, #71B280 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #134E5E 10%, #71B280 90%); /* W3C */
        
        
}
section:nth-of-type(6){
	background-color: #FCF751;
}
section:nth-of-type(7){
	background-image: url(https://images.unsplash.com/photo-1453974336165-b5c58464f1ed?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=12d0ef05e407b1c9c85ad9875ece1a13)
}
section:nth-of-type(8){
	
  background: -webkit-linear-gradient(90deg, #485563 10%, #29323c 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #485563 10%, #29323c 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #485563 10%, #29323c 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #485563 10%, #29323c 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #485563 10%, #29323c 90%); /* W3C */
        
}
section:nth-of-type(9){
	background-color: #b78681;
}
section:nth-of-type(10){
	background-image: url(https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5)
}
section:before{
	content: attr(data-description);
	font-size: 0.9rem;
	font-family: 'oswald';
	color: #fff;
	position: absolute;
	z-index: 20;
	left: 2rem;
	top: 2rem;
}

/* Media queries */
 @media screen and (min-width: 1440px) {
   section{height:700px}
 }