/* Fallback webfont: https://fonts.googleapis.com/css?family=Montserrat */
/* vietnamese */
@font-face {
  font-family: 'p-wf-avenir';
  font-style: normal;
  font-weight: 400;
  src: local('Avenir Book'), local('Avenir Next Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459WZhyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'p-wf-avenir';
  font-style: normal;
  font-weight: 400;
  src: local('Avenir Book'), local('Avenir Next Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459WdhyyTh89ZNpQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'p-wf-avenir';
  font-style: normal;
  font-weight: 400;
  src: local('Avenir Book'), local('Avenir Next Regular'), url(https://fonts.gstatic.com/s/montserrat/v12/JTUSjIg1_i6t8kCHKm459WlhyyTh89Y.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@-ms-viewport {
  width: device-width;
}

html {
    height: 100%;
}
body {
    font-family: "p-wf-avenir", sans-serif;
    line-height: 1.5;
    color: #555; /* davy's grey */
    height: 100%;
    margin: 0;
    background: #fafafa url(../../assets/img/bg.jpg) 50% 50% fixed;
}
a {
    color: #4c99cd; /* celestial blue */
    color: #2e74a3; /* wcag acceptable contrast blue */
    text-decoration: none;
    border-bottom: 1px solid #ddd;
    -webkit-transition: 0.3s ease-in-out color;
            transition: 0.3s ease-in-out color;
}
    a:focus,
    a:hover,
    a:active {
        border: none;
    }
    a:focus,
    a:active {
        color: #c76566; /* fuzzy wuzzy */
    }
    a.brand {
        border: none;
    }

h1, h2, h3, h4, h5, h6 {
    line-height: 1.3;
    font-weight: normal;
}

@media screen and (max-width: 767px) {
    h1 {
        font-size: 1.6em;
    }
    h2 {
        font-size: 1.5em;
    }
    
}
h2 {
    font-size: 2em;
    margin-bottom: 0;
}
    h2:before {
        content: '/ ';
    }
    h2 + p {
        margin-left: 1.25em;
        margin-bottom: 2em;
        margin-top: 0.5em;
    }

h3 {
    margin-top: 2em;
}

.page {
    max-width: 650px;
    min-height: 100%;
    margin: 0 auto;
    padding: 5%;
    background: #fff;
    background: rgba(255,255,255, 0.9);
}
.page-home,
h2 {
    text-transform: lowercase;
}

p + ul {
    margin-top: -1rem;
}
ol {
    padding-left: 1.5rem;
}
li {
    margin-bottom: 0.5rem;
}

blockquote {
    margin-left: 0;
    margin-right: 0;
    padding-left: 1.5rem;
    border-left: 2px solid #eee;
}

.icon {
    margin-top: 3%;
}

.connect-icons {
    margin-top: -1em;
    margin-left: 1.25em;
}
    .connect-icons a {
        display: inline-block;
        vertical-align: middle;
        border: none;
        margin-right: 10px;
        margin-bottom: 10px;
        -webkit-transition: 0.3s ease-in-out transform;
                transition: 0.3s ease-in-out transform;
    }
        @media screen and (max-width: 425px) {
            .connect-icons a {
                width: 14%;
                margin-top: 20px;
            }
        }
        .connect-icons a:last-child {
            margin-right: 0;
        }
        .connect-icons a:hover {
            -webkit-transform: scale(1.3,1.3);
                    transform: scale(1.3,1.3);
        }
    .connect-icons svg {
        color: #4c99cd;
        fill:  #4c99cd;
        display: block;
        width:  20px;
        height: 20px;
        margin: 0 auto;
        -webkit-transition: 0.3s ease-in-out color, 0.3s ease-in-out fill;
                transition: 0.3s ease-in-out color, 0.3s ease-in-out fill;
    }
        .connect-icons a:hover svg,
        .connect-icons a:focus svg {
            color: #c76566;
            fill:  #c76566;
        }
.footnote {
    display: block;
    margin-top: 80px;
}

/* Animate page elements */
/* prefixed by http://pleeease.io/play/ */
@-webkit-keyframes fade-in { 
    from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } to { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } 
}
@keyframes fade-in { 
    from { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } to { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } 
}
.icon, .lead, .nav, .article, .footnote {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -webkit-animation: fade-in ease-in 1 0.5s;
            animation: fade-in ease-in 1 0.5s;
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    animation-transition: 0.5s ease-in-out opacity;
}
.icon {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;  
}
.lead {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;  
}
.nav, .article, .footnote {
    -webkit-animation-delay: 0.8s;
            animation-delay: 0.8s;   
}