/* OI v0.1.0 
 * Copyright (c) 2016  
 */
/***************/
/**** Intro ****/
/***************/
#intro { height: 600px; height: calc(100vh - 60px - 45px); }
#intro h1 .superheading { margin-bottom: .375em; }

#intro-actions { display: none; }

/*******************/
/**** Logo Grid ****/
/*******************/
.logo-grid:before, .logo-grid:after { content: " "; display: table; }
.logo-grid:after { clear: both; }
.logo-grid .logo-container { float: left; position: relative; width: 50%; }
.logo-grid .logo-container .logo { height: 0; padding-bottom: 50%; background-position: center center; background-repeat: no-repeat; background-size: 100%; }

/*********************/
/**** Story block ****/
/*********************/
.story-block { position: relative; }
.story-block:before, .story-block:after { content: " "; display: table; }
.story-block:after { clear: both; }
.story-block .story-image { margin: 0 auto; margin-bottom: 40px; width: 240px; }
.story-block .story-image img { display: block; width: 100%; height: auto; margin-bottom: 20px; }
.story-block .story-content { position: relative; left: 0; width: 100%; height: 100%; top: 0; }
@media (min-width: 480px) { /* phone */ .logo-grid .logo-container { padding: 20px; } }
@media (min-width: 680px) { /* big phone, small tablet */ #intro .content-overlay { padding-bottom: 150px; } #intro-actions { display: block; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; background-color: #222; background-color: rgba(0, 0, 0, 0.5); }
  #intro-actions .action { display: inline-block; padding: 20px 10px; vertical-align: middle; } .story-block .story-image { margin: 0; width: 25%; } .story-block .story-content { position: absolute; width: 70%; left: 30%; } }
@media (min-width: 768px) { /* tablet */ }
@media (min-width: 960px) { /* netbook */ #intro { height: calc(100vh - 95px); } #intro h1 { font-size: 3em; } .story-block .story-image { width: 33.33%; } .story-block .story-content { width: 60%; left: 40%; } }
@media (min-width: 1080px) { /* small desktop */ }
@media (min-width: 1260px) { /* desktop */ }
@media (min-width: 800px) { .logo-grid .logo-container { width: 25%; padding: 0; } }