body {
    margin: 0;
    padding: 0;
    background-color: #1c1d1f;
    background: url("../assets/bkg.jpg") no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
    background-size: cover;
    color: #fff;
}




/* Border */

#top, #bottom, #left, #right {
    background: #202124;
    position: fixed;
    }
    #left, #right {
        top: 0; bottom: 0;
        width: 20px;
        }
        #left { left: 0; }
        #right { right: 0; }

    #top, #bottom {
        left: 0; right: 0;
        height: 20px;
        }
        #top { top: 0; }
        #bottom { bottom: 0; }




/* Logo */

.logo {
    width: 184px;
    height: 30px;
    margin-top: 7.5vw;
}




/* Main Content */

.container {
    width: 80%;
    margin: 0 auto;
}

.intro {
    margin-top: 6.5vw;
}



/* Detail Info */

ul {
    list-style-type: none;
    margin-top: 5vw;
    padding: 0;
    display: flex;
}

li {
    flex: 0 0 0 0;
    width: 33.333%;
    border-left: 1px solid #333436;
    padding-left: 8rem;

}

li:first-child {
   border-left: none;
   padding-left: 0;
}

li p {
    max-width: 80%;
}


/* Typography */

h1 {
    font-family: "CaslonGraphique","Georgia",serif;
    font-size: 4.75vw;
    margin-top: 1.2rem;
    font-weight: normal;
    letter-spacing: -.75px;
}

h3, h5 {
    font-family: "NBInternational","HelveticaNeue",sans-serif;
    text-transform: uppercase;
}


h3 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

h5 {
    font-size: 1.3rem;
    color: #818182;
    letter-spacing: .2rem;
    margin-bottom: 0;
    padding-bottom: 0;
}

p {
    font-size: 1.4rem;
    color: #818182;
    font-family: "NBInternationalMono","HelveticaNeue",sans-serif;
    line-height: 2.3rem;
    margin-top: 0;
}

html {
    font-size: 62.5%;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
}

.details a {
    font-size: 1.4rem;
    font-family: "NBInternationalMono","HelveticaNeue",sans-serif;
    letter-spacing: .05rem;
    color: #fff;
    text-decoration: none;
}


@media only screen and (min-width: 1024px) and (max-width: 1439px)  {

/* Headline */

.intro {
    margin-top: 15vw;
}

}



@media only screen and (min-width: 768px) and (max-width: 1023px)  {

/* Headline */

.intro {
    margin-top: 18vw;
}

h1 {
    font-size: 7vw;
    margin-top: 2.5rem;
}

/* Stack Detail Blocks */

ul {
    list-style-type: none;
    margin-top: 17vw;
    padding: 0;
    display: block;
 }

li {
    flex: none;
    width: 100%;
    border-top: 1px solid #333436;
    padding-top: 8rem;
    border-left: none;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 8rem;
}

li:first-child {
   border-top: none;
   padding-top: 0;
}

li:last-child {
   padding-bottom: 16rem;
}

li p {
    max-width: none;
}

}


@media only screen and (max-width: 767px) {

/* Border */

#top, #bottom, #left, #right {
    background: #202124;
    position: fixed;
    }
    #left, #right {
        top: 0; bottom: 0;
        width: 15px;
        }
        #left { left: 0; }
        #right { right: 0; }

    #top, #bottom {
        left: 0; right: 0;
        height: 15px;
        }
        #top { top: 0; }
        #bottom { bottom: 0; }


/* Main Content */

.container {
    width: 70%;
    margin: 0 auto;
}


/* Logo */

.logo {
    width: 150px;
    height: 24px;
    margin-top: 20vw;
}



/* Stack Detail Blocks */

ul {
    list-style-type: none;
    margin-top: 25vw;
    padding: 0;
    display: block;
 }

li {
    flex: none;
    width: 100%;
    border-top: 1px solid #333436;
    padding-top: 8rem;
    border-left: none;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 8rem;
}

li:first-child {
   border-top: none;
   padding-top: 0;
}

li:last-child {
   padding-bottom: 16rem;
}

li p {
    max-width: none;
}




/* Headline */

.intro {
    margin-top: 30vw;
}

h1 {
    font-size: 8vw;
    margin-top: 2.5rem;
}

}




/* @font face */

@font-face {
    font-family: 'CaslonGraphique';
    src: url('../fonts/caslongraphiqueef-webfont.eot');
    src: url('../fonts/caslongraphiqueef-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/caslongraphiqueef-webfont.woff2') format('woff2'),
         url('../fonts/caslongraphiqueef-webfont.woff') format('woff'),
         url('../fonts/caslongraphiqueef-webfont.ttf') format('truetype'),
         url('../fonts/caslongraphiqueef-webfont.svg#caslongraphiqueefregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'NBInternational';
    src: url('../fonts/nbinternationalpro-bold-webfont.eot');
    src: url('../fonts/nbinternationalpro-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/nbinternationalpro-bold-webfont.woff2') format('woff2'),
         url('../fonts/nbinternationalpro-bold-webfont.woff') format('woff'),
         url('../fonts/nbinternationalpro-bold-webfont.ttf') format('truetype'),
         url('../fonts/nbinternationalpro-bold-webfont.svg#nb_international_boldbold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'NBInternationalMono';
    src: url('../fonts/nbinternationalpro-monospaced-webfont.eot');
    src: url('../fonts/nbinternationalpro-monospaced-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/nbinternationalpro-monospaced-webfont.woff2') format('woff2'),
         url('../fonts/nbinternationalpro-monospaced-webfont.woff') format('woff'),
         url('../fonts/nbinternationalpro-monospaced-webfont.ttf') format('truetype'),
         url('../fonts/nbinternationalpro-monospaced-webfont.svg#nb_international_prmonospaced') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Button Animation */

.details a,
.details a:before {
    transition: all 320ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.details a:hover {
    transform: translateX(6px);
}
.details a:hover:before {
    margin-right: 22px;
    transform: scaleX(1.4);
    transform-origin: left center;
}



/* Content Animation */

#header, .intro, ul {
    animation: fadeIn;

    animation-duration: 300ms;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

#header {
    animation-delay: 100ms;
}

.intro {
    animation-delay: 200ms;
}

ul {
    animation-delay: 300ms;
}


@keyframes fadeIn {
    0% {
		opacity: 0;
        transform: translateY(40px);
	}
	100% {
		opacity: 1;
        transform: translateY(0);
	}
}

/* Button Hashes */

.eyebrow::before, ul li a::before {
    content: "";
    position: relative;

    display: inline-block;
    width: 22px;
    height: 1px;
    background: #FFF;

    margin-right: 10px;
    vertical-align: middle;
}

.eyebrow::before {
    background: #818182;
}