/**
 * MIXIN: Responsive Media Queries.
 *
 * Creates responsive media queries for seven different screen sizes.
 * These are based on min-width which means if x is the size then your
 * CSS will affect any device with screen width x and above.
 *
 * USAGE: 
 *	@include r(240)  { }
 *	@include r(320)  { }
 *	@include r(480)  { }
 *	@include r(768)  { }
 *	@include r(1024) { }
 *	@include r(1140) { }
 *	@include r(1280) { }
 *  @include r(1500) { }
 *
 * CSS content goes inside {} brackets. These mixins should be used inside
 * a class definition. For example:
 *
 * The following CSS will hide the .header on screen width 320px and above.
 * .header {
 * 	  @include r(320)  { display: none; }
 * }
 *
 * @author Ahmad Awais (https://github.com/ahmadawais)
 */
@mixin r( $point ) {
	@if $point==240 {
		@media ( min-width: 240px ) {
			@content;
		}
	}
	@if $point==320 {
		@media ( min-width: 320px ) {
			@content;
		}
	}
	@if $point==480 {
		@media ( min-width: 480px ) {
			@content;
		}
	}
	@if $point==600 {
		@media ( min-width: 600px ) {
			@content;
		}
	}
	@if $point==768 {
		@media ( min-width: 768px ) {
			@content;
		}
	}
	@if $point==1024 {
		@media ( min-width: 1024px ) {
			@content;
		}
	}
	@if $point==1140 {
		@media ( min-width: 1140px ) {
			@content;
		}
	}
	@if $point==1280 {
		@media ( min-width: 1280px ) {
			@content;
		}
	}
	@if $point==1500 {
		@media ( min-width: 1500px ) {
			@content;
		}
	}
}

/* global box-sizing */
*,
*:after,
*:before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* html element 62.5% font-size for REM use */
html {
    font-size: 62.5%;
    height:100%;
    min-height:100%;
}

body {
    font: 400 11px/1.4 sans-serif;
    margin: 0;
    height:100%;
    min-height:100%;
    word-break: break-word;
    -webkit-word-break: break-word;
}

// Example styling.
.wrap {
  display: table;
  width: 100%;
  font-family: 'Playfair Display', serif;
  margin: 0 auto;
  text-align: center;
  background: white;
  color: black;

  div {
    display: table-cell;
    width: 100%;
    height: 100vh;
    vertical-align: middle;
    font-size: 5vw;
    padding: 5vw;
    
    span {
      background: rgba(0, 0, 0, 0.1);
      padding: 0.3rem 1rem;
      font-style: italic;
    }
  }
  
  // Display the div on a particular screen size and above.
  .c240 { 
    display: none;
    @include r(240)  { display: table-cell; }
    @include r(320)  { display: none; }
  }
  .c320 { 
    display: none;
    @include r(320)  { display: table-cell; }
    @include r(480)  { display: none; }
  }
  .c480 { 
    display: none;
    @include r(480)  { display: table-cell; }
    @include r(768)  { display: none; }
  }
  .c768 { 
    display: none;
    @include r(768)  { display: table-cell; }
    @include r(1024)  { display: none; }
  }
  .c1024 {
    display: none;
    @include r(1024)  { display: table-cell; }
    @include r(1140)  { display: none; }
  }
  .c1140 {
    display: none;
    @include r(1140)  { display: table-cell; }
    @include r(1280)  { display: none; }
  }
  .c1280 {
    display: none;
    @include r(1280)  { display: table-cell; }
    @include r(1500)  { display: none; }
  }
  .c1500 {
    display: none;
    @include r(1500)  { display: table-cell; }
  }
  
  // Here we use the mixin inside the .wrap div.
  @include r(240)  { background: beige; }
  @include r(320)  { background: orange; }
  @include r(480)  { background: orangered; }
  @include r(768)  { background: royalblue; }
  @include r(1024) { background: gold; }
  @include r(1140) { background: khaki; }
  @include r(1280) { background: thistle; }
  @include r(1500) { background: tomato; }
}





























// [IGNORE] DEMO CSS BELOW.
.twitter {
	position: fixed;
	display: block;
	right: 12px;
	bottom: 12px;
	svg {
		width: 32px;
		height: 32px;
		fill: #1da1f2;
	}
}