/*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

@import url('https://fonts.googleapis.com/css?family=Cardo|Josefin+Sans:400,700');

h1, h2, h3, h4, h5, h6 {
    font-family: 'Josefin Sans', sans-serif;
    letter-spacing: .15em;
}

h1 {
    margin-top: 25vh;
}

a {
    transition: all .5s ease;
}

body {
    font-family: 'Cardo', serif;
}

.entry {
    text-align: center;
} 

.subtitle {
    font-family: 'Cardo', serif;
    font-weight: normal;
    font-size: 1.5em;
}

.social {
    margin: 0;
    padding: 0;
    list-style: none; 
}

.social li {
    display: inline-block;
    vertical-align: top;
}

.social .icon {
    border: 0;
    font: 0/0 a;
    color: transparent;
    width: 30px;
    height: 25px;
    display: block;
    background-size: 14px 14px;
    background-position: center;
    background-repeat: no-repeat;
}
.social li a {
    background-position: right center;
}
.social li a:hover {
    opacity: .75;
    transform: scale(1.2);
}

.linkedin {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTAgNTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGQ9Ik02LjAyNy0wLjAwOWMwLjgyMSwwLDEuNjA0LDAuMTY4LDIuMzQxLDAuNDkyYzAuNzQ0LDAuMzMsMS4zOSwwLjc2MywxLjk1MywxLjNjMC41NTYsMC41NDMsMC45ODksMS4xNzcsMS4zLDEuOTINCgljMC4zMDQsMC43MzcsMC40NTksMS41MiwwLjQ1OSwyLjM0OGMwLDAuODIxLTAuMTU1LDEuNTk4LTAuNDU5LDIuMzI4Yy0wLjMxMSwwLjcyNS0wLjc0NCwxLjM2NS0xLjMsMS45MDENCgljLTAuNTYzLDAuNTM3LTEuMjA5LDAuOTctMS45NTMsMS4zYy0wLjczNywwLjMzLTEuNTIsMC40OTItMi4zNDEsMC40OTJjLTAuODI4LDAtMS42MDQtMC4xNjItMi4zMzQtMC40OTINCgljLTAuNzI0LTAuMzMtMS4zNjQtMC43NjMtMS45MDEtMS4zYy0wLjUzNy0wLjUzNy0wLjk3LTEuMTc3LTEuMy0xLjkwMUMwLjE2Miw3LjY0OCwwLDYuODcyLDAsNi4wNTFjMC0wLjgyOCwwLjE2Mi0xLjYxLDAuNDkyLTIuMzQ4DQoJYzAuMzMtMC43NDQsMC43NjMtMS4zNzcsMS4zLTEuOTJjMC41MzctMC41MzcsMS4xNzctMC45NywxLjkwMS0xLjNDNC40MjQsMC4xNTksNS4yLTAuMDA5LDYuMDI3LTAuMDA5eiBNMTAuNTI5LDE1LjY1NA0KCWMwLjMzNiwwLDAuNjM0LDAuMTIzLDAuODk5LDAuMzgyYzAuMjY1LDAuMjUyLDAuNDAxLDAuNTU2LDAuNDAxLDAuOTE4djMxLjQxNGMwLDAuMzM2LTAuMTM2LDAuNjQ2LTAuNDAxLDAuOTA1DQoJYy0wLjI2NSwwLjI3MS0wLjU2MywwLjQtMC44OTksMC40SDEuNjE3Yy0wLjMzNiwwLTAuNjQxLTAuMTI5LTAuOTA2LTAuNGMtMC4yNTgtMC4yNTktMC4zOTQtMC41NjktMC4zOTQtMC45MDVWMTYuOTU0DQoJYzAtMC4zMzYsMC4xMzYtMC42NCwwLjM5NC0wLjkwNWMwLjI2NS0wLjI1OSwwLjU2OS0wLjM5NSwwLjkwNi0wLjM5NUgxMC41MjlMMTAuNTI5LDE1LjY1NHogTTM2Ljc0MywxNC44NTkNCgljNC4wMjIsMCw3LjIyOSwxLjAwOSw5LjYzNiwzLjAyN0M0OC43OTgsMTkuOTEsNTAsMjMuMDA3LDUwLDI3LjE5MXYyMS4xNzdjMCwwLjMzNi0wLjE0MiwwLjY0Ni0wLjQsMC45MDUNCgljLTAuMjU5LDAuMjcxLTAuNTY5LDAuNC0wLjkwNSwwLjRoLTkuMTU4Yy0wLjMzNiwwLTAuNjM0LTAuMTI5LTAuODc5LTAuNGMtMC4yMzMtMC4yNTktMC4zNjItMC41NjktMC4zNjItMC45MDVWMjkuMjIzDQoJYzAtMS42MDQtMC4yODQtMi44MzMtMC44NjYtMy42OGMtMC41ODItMC44NDEtMS43Ni0xLjI2OC0zLjUzMS0xLjI2OGMtMS4xMjUsMC0yLjA2OSwwLjE4OC0yLjgyOSwwLjU1Ng0KCWMtMC43NTcsMC4zNjktMS4zNTgsMC44NjctMS43OTIsMS40ODdjLTAuNDMzLDAuNjI4LTAuNzMsMS4zNzEtMC44OTgsMi4yMzhjLTAuMTc1LDAuODY2LTAuMjU5LDEuNzk3LTAuMjU5LDIuNzkzdjE3LjAxOQ0KCWMwLDAuMzM2LTAuMTMsMC42NDYtMC4zOTUsMC45MDVjLTAuMjY2LDAuMjcxLTAuNTYyLDAuNC0wLjkwNSwwLjRoLTguOTA1Yy0wLjMzNiwwLTAuNjQtMC4xMjktMC45MDUtMC40DQoJYy0wLjI2NS0wLjI1OS0wLjM5NS0wLjU2OS0wLjM5NS0wLjkwNVYxNi45NTRjMC0wLjMzNiwwLjEyOS0wLjY0LDAuMzk1LTAuOTA1YzAuMjY1LTAuMjU5LDAuNTY5LTAuMzk1LDAuOTA1LTAuMzk1aDguNjUyDQoJYzAuNjk5LDAsMS4wODcsMC4yNjUsMS4xNzEsMC44MDljMC4wOTEsMC41MzcsMC4xMywxLjA0NywwLjEzLDEuNTM5YzEuMjAyLTEuMTI1LDIuNTczLTEuOTI3LDQuMTAzLTIuNDEyDQoJQzMzLjUwOSwxNS4xMDQsMzUuMTAxLDE0Ljg1OSwzNi43NDMsMTQuODU5eiIvPg0KPC9zdmc+DQo=);
}
.dribbble {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTAgNTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDsiIGQ9Ik0yNSw0OS45NjdjLTEzLjc4NSwwLTI1LTExLjItMjUtMjQuOTY3UzExLjIxNSwwLjAzMywyNSwwLjAzMw0KCVM1MCwxMS4yMzMsNTAsMjVTMzguNzg1LDQ5Ljk2NywyNSw0OS45NjdMMjUsNDkuOTY3eiBNNDYuMDgzLDI4LjQxOGMtMC43MjktMC4yMy02LjYwOC0xLjk4MS0xMy4zMDEtMC45MTINCgljMi43OTMsNy42NjUsMy45MywxMy45MDgsNC4xNDgsMTUuMjA1QzQxLjcyMiwzOS40NzYsNDUuMTMyLDM0LjM1Miw0Ni4wODMsMjguNDE4TDQ2LjA4MywyOC40MTh6IE0zMy4zNDEsNDQuNjYzDQoJYy0wLjMxNy0xLjg3MS0xLjU1OC04LjM5Mi00LjU1Ni0xNi4xNzJjLTAuMDQ3LDAuMDE3LTAuMDk0LDAuMDMxLTAuMTQxLDAuMDQ4QzE2LjYwMSwzMi43MywxMi4yNzcsNDEuMDcyLDExLjg5Myw0MS44NTYNCgljMy42MjEsMi44MTksOC4xNzEsNC41MDIsMTMuMTA3LDQuNTAyQzI3Ljk1OCw0Ni4zNTgsMzAuNzc3LDQ1Ljc1NCwzMy4zNDEsNDQuNjYzTDMzLjM0MSw0NC42NjN6IE05LjEzNSwzOS4yOTENCgljMC40ODQtMC44MjYsNi4zNDQtMTAuNTE4LDE3LjM1OC0xNC4wNzJjMC4yNzctMC4wOSwwLjU1OS0wLjE3NCwwLjg0MS0wLjI1NGMtMC41MzYtMS4yMTEtMS4xMTktMi40MjQtMS43MzEtMy42MTkNCglDMTQuOTM5LDI0LjUzMyw0LjU5MSwyNC40LDMuNjU3LDI0LjM4MWMtMC4wMDYsMC4yMTYtMC4wMTEsMC40MzQtMC4wMTEsMC42NTJDMy42NDYsMzAuNTEsNS43MjUsMzUuNTExLDkuMTM1LDM5LjI5MUw5LjEzNSwzOS4yOTF6DQoJIE00LjA5NywyMC42NjVjMC45NTUsMC4wMTIsOS43NTIsMC4wNTEsMTkuNzQxLTIuNTk5QzIwLjMsMTEuNzg1LDE2LjQ4NCw2LjUwNCwxNS45MjEsNS43MzNDOS45NDcsOC41NDcsNS40ODEsMTQuMDQ3LDQuMDk3LDIwLjY2NQ0KCUw0LjA5NywyMC42NjV6IE0xOS45OTYsNC4zYzAuNTksMC43OSw0LjQ2OSw2LjA2NCw3Ljk2NywxMi40ODRjNy41OTQtMi44NDIsMTAuODA5LTcuMTU3LDExLjE5Mi03LjcwMw0KCUMzNS4zODUsNS43NCwzMC40MjYsMy43MDcsMjUsMy43MDdDMjMuMjc3LDMuNzA3LDIxLjYwMiwzLjkxNCwxOS45OTYsNC4zTDE5Ljk5Niw0LjN6IE00MS41MjksMTEuNTQ3DQoJYy0wLjQ1LDAuNjA4LTQuMDI4LDUuMTg5LTExLjkyNCw4LjQwOGMwLjQ5NywxLjAxNiwwLjk3MywyLjA0OSwxLjQxNiwzLjA4OWMwLjE1NywwLjM2OSwwLjMxMSwwLjczNSwwLjQ2MSwxLjEwMQ0KCWM3LjEwNS0wLjg5MiwxNC4xNjUsMC41MzgsMTQuODY5LDAuNjg3QzQ2LjMwNSwxOS43OTgsNDQuNTAzLDE1LjE3Niw0MS41MjksMTEuNTQ3TDQxLjUyOSwxMS41NDd6Ii8+DQo8L3N2Zz4NCg==);
}
.email {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTAgNTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGQ9Ik0yNC45NTgsMzQuMzM1YzAuOTkzLDAsMS45NDItMC4xNDQsMi44NDgtMC40MjFjMC45MDQtMC4yNzYsMS43NzMtMC42NDMsMi42MDQtMS4wODRjMC44My0wLjQ0MywxLjYzNy0wLjk1MywyLjQxMi0xLjUxOA0KCWMwLjc4MS0wLjU3NCwxLjUzOS0xLjE2MiwyLjI3OS0xLjc2YzIuMjY0LTEuODAxLDQuNTM5LTMuNTcyLDYuODQyLTUuMjk4YzIuMjkxLTEuNzI3LDQuNjA5LTMuNDU4LDYuOTM5LTUuMTk2DQoJYzAuMTgyLTAuMTQ0LDAuMzY1LTAuMjgyLDAuNTU5LTAuNDJjMC4xOTMtMC4xMzMsMC4zNzctMC4yOTMsMC41NTktMC40NzZ2MjQuNTUxYzAsMC44NTMtMC4zMDUsMS41ODQtMC45MDgsMi4yMDMNCgljLTAuNjA3LDAuNjA5LTEuMzM4LDAuOTE4LTIuMTkxLDAuOTE4SDMuMTE5Yy0wLjg1LDAtMS41ODMtMC4zMDktMi4xOTctMC45MThDMC4zMDcsNDQuMjk3LDAsNDMuNTY1LDAsNDIuNzEzVjE4LjE2Mg0KCWMwLjE4LDAuMTgzLDAuMzY1LDAuMzQzLDAuNTU2LDAuNDc2YzAuMTg4LDAuMTM4LDAuMzc0LDAuMjc2LDAuNTU2LDAuNDJjMi4zMzMsMS43MzgsNC42NDgsMy40Nyw2Ljk0NSw1LjE5Ng0KCWMyLjI5NiwxLjcyNyw0LjU3NCwzLjQ5OCw2LjgzNCw1LjI5OGMwLjcwNiwwLjU2NCwxLjQ0NywxLjEyOSwyLjIyNSwxLjcwNWMwLjc3OCwwLjU2NCwxLjU4MywxLjA4NCwyLjQxNiwxLjUzOQ0KCWMwLjgzLDAuNDY1LDEuNzA1LDAuODQxLDIuNjE4LDEuMTE3QzIzLjA2MywzNC4xOTEsMjMuOTk5LDM0LjMzNSwyNC45NTgsMzQuMzM1eiBNMjQuOTU4LDI4LjEyNWMtMC41NjIsMC0xLjE2Ny0wLjE2Ni0xLjgxOC0wLjQ3OQ0KCWMtMC42NS0wLjMxNC0xLjI5LTAuNjk3LTEuOTEyLTEuMTRjLTAuNjI1LTAuNDQyLTEuMjM0LTAuOTA4LTEuODMyLTEuNGMtMC41OTgtMC40ODctMS4xMjEtMC44OTEtMS41NzUtMS4yMTgNCgljLTIuMTg4LTEuNjY2LTQuMzUzLTMuMzA5LTYuNDk3LTQuOTM2Yy0yLjE0Mi0xLjYzMy00LjMyOC0zLjI4Mi02LjU1Mi00Ljk2NGMtMC40MTUtMC4zMjYtMC44OTktMC43NjQtMS40NS0xLjMxNw0KCUMyLjc3LDEyLjExOCwyLjI1NSwxMS41MSwxLjc3NiwxMC44NGMtMC40NzktMC42NjktMC44ODUtMS4zNDUtMS4yMi0yLjAzNkMwLjIyMSw4LjExNywwLjA1Myw3LjQ5MiwwLjA1Myw2LjkzMw0KCWMwLTAuNzQyLDAuMzI2LTEuMzg5LDAuOTc3LTEuOTQyYzAuNjUzLTAuNTQ4LDEuMzQ4LTAuODI1LDIuMDg5LTAuODI1SDQ2LjljMC43NDIsMCwxLjQzOSwwLjI3NywyLjA4MiwwLjgyNQ0KCWMwLjY0MSwwLjU1MywwLjk2MywxLjIwMSwwLjk2MywxLjk0MmMwLDAuNTU5LTAuMTY2LDEuMTg0LTAuNTA0LDEuODcxYy0wLjMzOCwwLjY5MS0wLjc0MiwxLjM2Ny0xLjIyMywyLjAzNg0KCWMtMC40NzcsMC42Ny0wLjk5NiwxLjI3OC0xLjU0NSwxLjgzMmMtMC41NDcsMC41NTMtMS4wMzUsMC45OTEtMS40NDksMS4zMTdjLTIuMjI1LDEuNjYtNC40MSwzLjMxLTYuNTUzLDQuOTQ4DQoJYy0yLjE0MywxLjYzOC00LjMxMSwzLjI4Ny02LjQ5Niw0Ljk1M2MtMC40NTUsMC4zMjctMC45NzUsMC43My0xLjU2MSwxLjIxOGMtMC41OTQsMC40OTItMS4yMDEsMC45NTgtMS44MzIsMS40DQoJYy0wLjYzNSwwLjQ0Mi0xLjI3NSwwLjgyNS0xLjkyNiwxLjE0Yy0wLjY1LDAuMzEyLTEuMjQ5LDAuNDc5LTEuNzkxLDAuNDc5aC0wLjA1NUgyNC45NTh6Ii8+DQo8L3N2Zz4NCg==);
}
.cases {
    display: flex;
    justify-content: space-around;
    max-width: 1200px;
    margin: 40px auto;
}

.case h3 a {
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
}

.case h3 a:hover {
    text-decoration: underline;
    opacity: .75;
}

.case h3 a:hover img {
    opacity: .75;
}

.case h3 img {
    display: block;
    margin: 1em auto;
    width: 250px;
}

.study {
    padding: 0 1em;
}

.study h1, .study h2 {
    text-transform: uppercase;
    text-align: center;
}

.studynav, .study p, .study ul, .study ol {
    max-width: 600px;
    margin: 1em auto;
}

.study ol li {
    margin: .75em 0;
}

.study h2 {
    margin-top: 2em;
}

.studynav {
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    display: flex;
    margin: 50px auto;
}

.studynav div {
    min-width: 200px;
}

.home {
    text-align: center;
}
.next {
    text-align: right;
}

.study p, .study ul, .study ol {
    font-size: 18px;
    line-height: 1.75em;
}

.study a {
    color: #0052CC;
}
.study a:hover {
    text-decoration: none;
}
.studynav a {
    color: #000;
    text-decoration: none;
    opacity: .75;
}
.studynav a:hover {
    opacity: .5;
    text-decoration: underline;
}

figure {
    margin: 40px;
    text-align: center;
}

figure img {
    width: 100%;
    height: auto;
}

.small {
    max-width: 800px;
}
.shadow {
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);
}
.float {
    float: right;
    margin-left: 1em;
    height: 250px;
}

video {
    max-width: 800px;
    margin: 2em auto;
    display: block;
    border: 1px solid #eee;
}
video.mobile {
    max-width: 375px;
}

p.caption {
    font-family: 'Josefin Sans', sans-serif;
    letter-spacing: .05em;
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * 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 receive the `clearfix` class.
 * 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;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}