/* ---------------------
title: CG stylesheet
author: Simon Tweedale
created: 26/07/15
version: 1.0
---------------------  */


/* reset everything, including pseudo elements. Apply the border-box model (http://css-tricks.com/box-sizing/) */
*,
*:before,
*:after {
  margin: 0;
  border: none;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* this helps windows phones and IE with media queries */
@-ms-viewport{
  width: device-width;
}

/* make me font nice webkit */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* set font at body level, comment out serif or sans serif accordingly. Line height at 1.5 to give a nice spacing. */
body {
  font-family: sans-serif;
  /*font-family: serif;*/
  line-height: 1.5;
  background: white;
}

/* set these html5 tags to display:block to make old IE versions happy */
section, header, footer, aside, article, nav  {
  display: block;
}

/* add a simple color transition to all links for a nicer hover. remove outline for older browsers */
a {
  outline: none;
  color: blue;
  -webkit-transition: Color 0.3s ease;
  -moz-transition: Color 0.3s ease;
  -ms-transition: Color 0.3s ease;
  -o-transition: Color 0.3s ease;
  transition: Color 0.3s ease;
}

p {
 padding-bottom: 15px;
}

/* add a simple hover state */
a:hover {
  text-decoration: none;
  color: #000;
}

/*this for old firefox versions to remove the ugly dotted line from links (http://bit.ly/1tHimBi) */
:focus {
  -moz-outline-style: none;
}

:focus {
  outline: none;
}

/* ----------------------------------------------------------------------------- clearfix */

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
 .clearfix:before,
 .clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
 .clearfix {
  *zoom: 1;
}

/* ----------------------------------------------------------------------------- custom text selection */

/* Mozilla based browsers */
::-moz-selection {
  background-color: #FFA;
  color: #000;
}
/* Works in Safari */
::selection {
  background-color: #FFA;
  color: #000;
}

/* -----------------------------------------------------------------------------  icon font */

@font-face {
  font-family: 'gehl';
  src: url('fonts/gehl.eot?35097777');
  src: url('fonts/gehl.eot?35097777#iefix') format('embedded-opentype'),
  url('fonts/gehl.woff?35097777') format('woff'),
  url('fonts/gehl.ttf?35097777') format('truetype'),
  url('fonts/gehl.svg?35097777#gehl') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: 'Bebas Neue';
    src: url('fonts/BebasNeueLight.woff2') format('woff2'),
        url('fonts/BebasNeueLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Bebas Neue Book';
    src: url('fonts/BebasNeueBook.woff2') format('woff2'),
        url('fonts/BebasNeueBook.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bebas Neue';
    src: url('fonts/BebasNeue-Thin.woff2') format('woff2'),
        url('fonts/BebasNeue-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Bebas Neue';
    src: url('fonts/BebasNeueBold.woff2') format('woff2'),
        url('fonts/BebasNeueBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Bebas Neue';
    src: url('fonts/BebasNeueRegular.woff2') format('woff2'),
        url('fonts/BebasNeueRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


.icon-up:before { content: '\e800'; } /* '' */
.icon-search:before { content: '\e801'; } /* '' */
.icon-right:before { content: '\e802'; } /* '' */
.icon-pin:before { content: '\e803'; } /* '' */
.icon-phone:before { content: '\e804'; } /* '' */
.icon-linkedin:before { content: '\e805'; } /* '' */
.icon-left:before { content: '\e806'; } /* '' */
.icon-email:before { content: '\e807'; } /* '' */
.icon-down:before { content: '\e808'; } /* '' */

/* -----------------------------------------------------------------------------  splash */

.splash {
	background: #222;
}

.splash .content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: white;
	text-align: center;
	width: 700px;
}

.splash .content h1, .splash .content h2 {
	opacity: 1;
	transform: translateX(0);
}

.splash .content a {
	margin-top: 50px;
	display: inline-block;
	padding: 20px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	text-decoration: none;
	color: white;
	line-height: 1;
	font-family: 'Bebas Neue';
	font-weight: bold;
	font-size: 20px;
	letter-spacing: 2px;
	transition: all ease 0.45s;
}

.splash .content a:hover {
	background: white;
	color: #222;
}

/* -----------------------------------------------------------------------------  generic style */

body {
	color: #535767;
	background: #fff;
	font-family: 'EB Garamond', serif;
	font-family: 'Spectral', serif;
  	font-weight: 300;
	font-size: 18px; 
	line-height: 1.5;
}

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

a:hover {
	color: #000;
  text-decoration: none;
}

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

header	{
  position: relative;
  height: 100vh;
  background-color: black;
}

header .bg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: url('../images/desolate.jpg') 50% 0 no-repeat;
  opacity: 0;
  z-index: 4;
  transition: all ease-out 1s 1s;
}

.action header .bg {
  opacity: 0.1;
}

header span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.action header span {
  opacity: 1;
}

header span.wreck {
  background: url('../images/wreck.png') 50% 0 no-repeat;
  z-index: 3;
  transition: all ease-out 1.5s 3s;
}

header span.sky {
  background: url('../images/sky.png') 50% 0 no-repeat;
  z-index: 2;
  transition: all ease-out 1.5s 3.5s;
}

.action header span.sky {
  opacity: 0.6;
}

header span::after {
  width: 100%;
  height: 100%;
  background: black;
  position: absolute;
  top: 0;
  content: "";
}

header span.wreck::after {
  right: 0;
  transition: all ease-out 1s 3s;
}

header span.sky::after {
  left: 0;
  transition: all ease-out 1s 4s;
}

.action header span.sky::after, .action header span.wreck::after  {
  width: 0;
}

header::after {
  position: absolute;
  top: 23vh;
  left: 50%;
  width: 1px;
  height: 0;
  background: white;
  content: "";
  z-index: 5;
  transition: all ease-out 2.6s 5.5s;
}

.action header::after {
  height: 70vh;
}

header .wrapper {
  position: relative;
  z-index: 5;
  padding-top: 20vh;
  height: 80vh;
}

h1 {
  font-size: 4vw;
  color: white;
  letter-spacing: 8px;
  text-transform: uppercase;
  font-family: 'Bebas Neue';
  line-height: 1;
  transform: translateX(-20px);
  transition: all ease 1.3s 1s;
  opacity: 0;
  font-weight: normal;
}

.action h1, .action h2 {
  transform: translateX(0);
  opacity: 1;
}

h2 {
  font-weight: normal;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 1.5vw;
  transform: translateX(-20px);
  transition: all ease 1.3s 1.5s;
  opacity: 0;
}

.headers {
  position: absolute;
  top: 20vh;
  left: 50%;
  padding-left: 20px;
}

.headers::before {
  width: 11px;
  height: 11px;
  background: white;
  border-radius: 50%;
  content: "";
  position: absolute;
  top: 30vh;
  left: -5px;
  transform: scale(0);
  transition: all ease-out 1s;
}

.action .headers::before {
  transform: scale(1);
  top: 15px;
}

header ul {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50vw;
  text-align: right;
  color: white;
}

header ul li {
  position: relative;
  padding: 10px 20px 10px 0;
  font-size: 16px;
}

header ul li b {
  opacity: 0;
  transform: translateX(20px);
  display: block;
}

.action header ul li b {
  opacity: 1;
  transform: translateX(0);
  font-weight: normal;
}

header ul li::after {
  width: 11px;
  height: 11px;
  background: white;
  border-radius: 50%;
  content: "";
  position: absolute;
  right: 2px;
  top: 18px;
  transform: scale(0);
}

.action header ul li::after {
  transform: scale(1);
}

header ul li.one::after, header ul li.one b {
  transition: all ease 0.8s 6.45s;
}

header ul li.two::after, header ul li.two b {
  transition: all ease 0.8s 6.6s;
}

header ul li.three::after, header ul li.three b {
  transition: all ease 0.8s 6.75s;
}


header a {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  bottom: 20px;
  background:  url('../images/down.svg') 50% 50% no-repeat;
  background-size: cover;
  z-index: 10;
  opacity: 0;
  transition: opacity ease 0.8s 8s, width ease 0.3s, height ease 0.3s;
  transform-origin: 50% 50%;
}

header a:hover {
  width: 36px;
  height: 36px;
}

.action header a {
  opacity: 1;
}

/* ----------------------------------------------------------------------------- home */

section {
  max-width: 760px;
  margin: 0 auto;
  padding: 10vh 20px;
}

section p {
  padding-bottom: 40px;
  font-size: 22px;
}

section p:first-child:first-letter {
  float: left;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

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

footer	{
	padding: 60px 60px 38.5%;
  position: relative;
  z-index: 3;
  background: url('../images/footer.jpg') 50% 100% no-repeat #0e0e0e;
  background-size: contain;
  text-align: center;
  font-size: 14px;
  color: #ccc;
  letter-spacing: 0.035em;
}

iframe {
  height: 90vh;
  width: 100%;
  padding-bottom: 60px;
  pointer-events: none;
}

footer p {
  width: 310px;
  height: 200px;
  background: url('../images/sticker.png') 0 0 no-repeat;
  background-size: contain;margin: 0 auto;
  text-indent: -9999px;
  transform: rotate(4deg);
}

/* ----------------------------------------------------------------------------- end style sheet */