/********************************
*        EMBEDDED FONTS         *
********************************/

@font-face {
	font-family: 'Austin';
	src: url('/fonts/Austin-LightItalic.eot');
	src: url('/fonts/Austin-LightItalic.eot?#iefix') format('embedded-opentype'),
		url('/fonts/Austin-LightItalic.woff') format('woff'),
		url('/fonts/Austin-LightItalic.ttf') format('truetype');
	font-weight: 300;
	font-style: italic;
}

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

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

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

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

/********************************
*        BASIC ELEMENTS         *
********************************/

html
{
    margin: 0px;
    padding: 0px;
    position: relative;
    -webkit-font-smoothing: antialiased;
}

body
{
    position: relative;
    top: 0px;
    margin: 0px;
    padding: 0px;
    opacity: 1;
    transition: opacity .4s .5s;
    width: 100vw;
    height: 100vh;
    font-family: Austin, helvetica, arial;
    color: #8a8a8c;
    font-size: 14pt;
    cursor: default;
}

.overflow-hidden
{
	overflow: hidden;
}

.sans-font
{
    font-family: 'Graphik';
    font-weight: 300;
    font-size: 9pt;
    letter-spacing: 2px;
}

body.loading
{

}

div
{
    
}

p
{
    margin: 0px;
    padding: 0px;
}

h1, h2, h3, h4, h5, h6
{
    margin: 0px;
    padding: 0px;
}

h1
{
    
}

h2
{
}

h3
{
    
}

h4
{
    
}

h5
{
    
}

h6
{
    
}

::-webkit-scrollbar { 
    display: none;
}

/*
basic bezier curve:
cubic-bezier(0.8, 0.0, 0.1, 0.99)
*/

/********************************
*         BASIC CLASSES         *
********************************/

.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");/* Firefox 3.5+ */
  filter: gray;/* IE6-9 */
  -webkit-filter: grayscale(100%);/* Chrome 19+ & Safari 6+ */
}

.grayscale.no-filter {
    filter: none;
    -webkit-filter: grayscale(0%);
}

.no-decoration
{
    text-decoration: none;
    color: inherit;
}

.raised-char
{
    bottom: 1px;
    position: relative;
}

.bold
{
    font-weight: bold;
}

.italic
{
    font-style: italic;
}

.text-center
{
    text-align: center;
}

.primary-color
{
    color: #5ec3c9;
}

.primary-background
{
    background-color: #5ec3c9;
}

.primary-border
{
    border: 1px solid #5ec3c9;
}

.dark-color
{
    color: #4d4d4d;
}

.dark-background
{
    background-color: #4d4d4d;
}

.dark-border
{
    border: 1px solid #4d4d4d;
}

.white-color
{
    color: #FFF;
}

.white-background
{
    background-color: #fff;
}

.white-border
{
    border: 1px solid #fff;
}

/*
    overwrite for every fadable object?
*/

.fadable
{
	/*transition: opacity .5s cubic-bezier(0.8, 0.0, 0.1, 0.99);*/
}

.fadable.faded, .loaded #landing-copy-container h1 span.faded, .loaded #landing-line-container.faded, .project.active.faded
{
    /*opacity: 0;*/
}

#menu-button-container, .menu-item, .menu-item-volume, #menu-pane:not(.menu-active) + #wrapper .project-linkable, #menu-pane:not(.menu-active) + #wrapper #login-submit-container, #menu-pane:not(.menu-active) + #wrapper #logo-container
{
    cursor: pointer;
}

.large-font
{
	font-size: 26pt;
	line-height: 34pt;
}

/********************************
*        GENERAL STYLES         *
********************************/

.spacer
{
    height: 2em;
    display: block;
    width: 1px;
}

.spacer.quarter
{
    height: .5em;
}

.spacer.half
{
    height: 1em;
}

.spacer.double
{
    height: 4em;
}

.spacer.triple
{
    height: 6em;
}

.line-height-large
{
  line-height: 3.5em;
}

.line-height-medium
{
  line-height: 2.5em;
}

.line-height-small
{
  line-height: 1.5em;
}

/* FLEX BOX */

.flex-box
{
    display: flex;
}

.flex-box.align-start
{
    align-items: flex-start;
}

.flex-box.align-center, .flex-box.center
{
    align-items: center;
}

.flex-box.align-end
{
    align-items:flex-end;
}

.justify-start
{
    justify-content: flex-start;
}

.justify-end
{
    justify-content: flex-end;
}

.flex-box.justify-center, .flex-box.center
{
    justify-content: center;
}

.flex-box.justify-around
{
    justify-content: space-around;
}

.flex-box.justify-between
{
    justify-content: space-between;
}

.flex-box.column
{
    flex-flow: column;
}

.flex-box.row
{
    flex-flow: row;
}

.flex-box.wrap
{
  flex-wrap: wrap;
}

.flex-box.nowrap
{
  flex-wrap: nowrap;
}

.flex-box.full-width
{
    flex: 1 1 100%;
}

.flex-box.half-width
{
    flex: 1 1 50%;
}

.flex-box.third-width
{
    flex: 1 1 33%;
}

.flex-box.quarter-width
{
    flex: 0 0 25%;
}

.display-none
{
    display: none;
}

/********************************
*        ANIMATED LINES         *
********************************/

.scroll-line-container
{
    overflow: hidden;
    transform: translate(0,0);
    transition: transform .5s cubic-bezier(0.8, 0.0, 0.1, 0.99);
}

.scroll-line-container.vertical
{
    width: 1px;
    height: 82px;
    max-height: 100%;
}

.scroll-line-container.horizontal
{
    width: 114px;
    height: 1px;
}

.scroll-line
{
    transform: translate(0,0);
    transition: transform .5s cubic-bezier(0.8, 0.0, 0.1, 0.99);
    stroke: rgb(138, 138, 140);
    stroke-width: 3px;
    opacity: .5;
}

.scroll-line.vertical
{
    width:1px;
    height:auto;
    max-height: 100%;
}

.scroll-line.horizontal
{
    width: auto;
    height: 2px;
}

/********************************
*          KEYFRAMES            *
********************************/

@keyframes scrollLineVerticalContainer
{
    0%, 48%, 100% { transform: translate(0,0); }
    24% { transform: translate(0,50%); }
}

@keyframes scrollLineVertical
{
    0%, 48%, 100% { transform: translate(0,0); }
    24% { transform: translate(0,75%); }
}

/********************************
*          BASIC STRUCTURE      *
********************************/

/*

    HEADER

*/

#logo-container
{
    opacity: 0;
    position: fixed;
    top: 0px;
    left: calc((100vw - 168px)/2);
    transition: transform .7s cubic-bezier(0.8, 0.0, 0.1, 0.99), opacity .5s .3s;
    z-index: 900;
}

.index-page #logo-container
{

transform: translate(0,calc(25vh + 47px));
}

.loaded.index-page #logo-container
{
    transform: translate(0,calc((50vh - 13px) - 154px));
}

body:not(.index-page) #logo-container
{
    transform: translate(0,52px);
    transition-delay: 0s;
}

body:not(.index-page) .logo
{
    transition-delay: 0s;
}

.loaded #logo-container
{
    opacity: 1;
    transform: translate(0,52px);
}

.loaded #logo-container.active, body.ajax-load:not(.index-page) #logo-container
{
    transform: translate(0,52px);
}

#logo
{width: 168px;height: auto;}

#logo_small
{
    width: 120px;height: auto;
    display: none;
}

.loaded.index-page #logo-container.move-to-top, #logo-container.move-to-top, .loaded:not(.index-page) #logo-container.move-to-top
{
	transform: translate(0,52px);
	opacity: 1;
}

#logo-container.move-to-top .logo
{
	opacity: 1;
}

.landing-tag-container, #landing-line-container, #landing-copy-container h1, .logo, .volume-tag-container
{
     opacity: 0;
     transform: translate(0,20px);
}


.copy-break-1 {
}

.copy-break-2
{
	display: block;
}

#landing-copy-container h1
{
    transition: all 2s .5s cubic-bezier(0.16, 0.37, 0, 0.99);
    display: inline-block;
}
 

 .index-page #landing-copy-container span, #not-found-container #landing-copy-container h1 span, #not-found-container #landing-copy-container h1 a
{
	display: block;
}

 #landing-copy-container h1 span:first-child
 {
     transition-delay: .4s;
 }

 #landing-line-container, .landing-tag-container, .logo, .volume-tag-container
 {
 	transition: all 1s 1.4s cubic-bezier(0.8, 0.0, 0.1, 0.99);
}

.volume-tag-container
 {
 	transition: all 1s cubic-bezier(0.8, 0.0, 0.1, 0.99);
}

.loaded .landing-tag-container.active
{
    transition: all .7s cubic-bezier(0.8, 0.0, 0.1, 0.99);
}



.loaded #landing-copy-container h1, .loaded #landing-line-container, .loaded .landing-tag-container, .loaded:not(.ajax-load) .logo, .ajax-load:not(.index-page) .logo, .volume-tag-container.active
{
    opacity: 1;
    transform: translate(0,0);
}

.ajax-load #logo-container:not(.move-to-top) .logo
{
	transition-delay: 0s;
	opacity: 0;
}

.loaded #logo-container.active .logo
{
	opacity: 1;
	transition-delay: 0s;
}

body.ajax-load:not(.index-page) #logo-container:not(.move-to-top)
{
    transition: 0s;
    transform: translate(0,52px);
    opacity:  1;
}

body.ajax-load:not(.index-page) .logo
{
    transition: 0s;
    transform: translate(0,0);
}

#scroll-nav
{
	position: fixed;
	right: 32px;
	height: 300px;
	top: calc((100vh - 300px)/2);
	width: 2px;
	opacity:  0;
	transition: opacity .5s cubic-bezier(0.8, 0.0, 0.1, 0.99);
	z-index: 100;
}

div#scroll-nav {}

#scroll-nav.active
{
	opacity: 1;
}

#scroll-nav > svg
{
	width: 2px;
	height:36px;
	margin: 2px 0px;
	padding: 0px 8px;
}

.scroll-nav-bar
{
    transition: all .35s cubic-bezier(0.15, 0.76, 0.1, 0.99);
    stroke: rgb(138, 138, 140);
    stroke-width: 1px;
    position: relative;
    opacity: .25;
}

.scroll-nav-bar.active
{
	opacity: 1;
}

#index-top-banner
{
    position: fixed;
    left:0px;
    top:0px;
    width:100vw;
    height: 180px;
    z-index: 20;
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.55) 76%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(50%, rgba(255,255,255,1)), color-stop(76%, rgba(255,255,255,0.55)), color-stop(100%, rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.55) 76%, rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.55) 76%, rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.55) 76%, rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0.55) 76%, rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 );
}

/* 

    MENU 

*/

#menu-pane
{
    width: 310px;
    height: calc(100vh - 80px);
    position: fixed;
    transform: translate(-395px,0);
    top: 0px;
    left: 0px;
    margin: -40px 0px;
    padding: 40px 0px;
    transition: all .5s cubic-bezier(0.8, 0.0, 0.1, 0.99);
    background: #fff;
    box-shadow: 25px 0px 75px 0px rgba(236,236,238,0);
    z-index: 1000;
}

#menu-pane.menu-active
{
    transform: translate(-10px,0);
    box-shadow: 25px 0px 75px 0px rgba(236,236,238,1);
    transition: all .75s cubic-bezier(0.89, 0.02, 0.55, 1.21);
    transition: all .5s cubic-bezier(0.8, 0.0, 0.1, 0.99);
}

#menu-pane-content
{
	width: calc(100% - 85px);
	height: calc(100% - 80px);
	padding: 40px 0px 40px 80px;
	-webkit-overflow-scrolling: touch;
}

#menu-pane.menu-active + #wrapper, #menu-pane.menu-active + #wrapper a
{
    cursor: default;
}

#menu-button-container
{
    position: fixed;
    top: calc(50vh - 28px);
    right: -137px;
    transform: translate(0,0);
    transition: all .5s cubic-bezier(0.8, 0.0, 0.1, 0.99);
    padding: 8px;
    z-index: 1001;
}

#menu-button
{
    width: 18px;
    height: 36px;
    transition: all .4s cubic-bezier(0.8, 0.0, 0.1, 0.99);
    position: relative;
    left: 0px;
}

.menu-button-line
{
	transition: transform .35s cubic-bezier(0.15, 0.76, 0.1, 0.99);
	stroke: rgb(138, 138, 140);
	stroke-width: 1px;
	position: relative;
}

.menu-button-line:first-child
{
    transform: translate(3px,0);
}

.menu-button-line:last-child
{
    transform: translate(12px,0);
}

html:not(.mobile-version) #menu-button-container:hover .menu-button-line:first-child, .menu-active #menu-button-container .menu-button-line:first-child
{
	transform: translate(0,0);
}

html:not(.mobile-version) #menu-button-container:hover .menu-button-line:last-child, .menu-active #menu-button-container .menu-button-line:last-child
{
	transform: translate(15px,0);
}

#menu-pane.menu-active #menu-button-container
{
    transform: translate(-152px,0);
}

#menu-spacer
{
    flex: 0 0 58px;
}

#menu-container, #social-buttons-container
{
	opacity: 0;
	transform: translate(-5px,0);
	transition: all .5s cubic-bezier(0.8, 0.0, 0.1, 0.99) .15s;
	width: calc(100% - 66px);
}

#menu-pane.menu-active #menu-container, #menu-pane.menu-active #social-buttons-container
{
	opacity: 1;
	transform: translate(0,0);
}

#menu
{
    flex: 5 1;
}

#menu-pane ul
{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    max-height: 100%;
    width: 100%;
}

#menu-pane li
{
    list-style-type: none;
    position: relative;
}

#menu-pane li a
{
	display: inline-block;
	padding: 8px 0px;
}

#menu-pane .menu-item-dash
{
    transform: translate(-30px, 0);
    transition: all .35s cubic-bezier(0.96, 0.34, 0.24, 0.32);
    opacity: 0;
    position: absolute;
    height:100%;
    left:0px;
    padding: 8px 0px;
     
}

#menu-pane .menu-item a
{
    transform: translate(0, 0);
    transition: all .45s cubic-bezier(0.8, 0.0, 0.1, 0.99);
    display: inline-block;
    padding: 8px 0px 8px 5px;
}

#menu-pane .menu-item.active-item .menu-item-dash, #menu-pane .menu-item:hover .menu-item-dash
{
    transform: translate(0,0);
    opacity: 1;
    /* font-weight: bold; */
}


#menu-pane .menu-item.active-item a, #menu-pane .menu-item:hover a
{
    transform: translate(10px,0);
    /* font-weight: bold; */
}

.menu-item-header
{

}

#menu-item-projects, .menu-item.menu-item-volume
{
	margin-bottom: 0px;
}

#menu-item-about
{

}

#menu-item-contact
{

}

.menu-item
{margin: 32px 0px;}

.menu-item-project
{margin: 0px;padding: 4px 0px;font-size: 13.5pt;}

#menu-pane .projects-submenu-container
{
    max-height: 0px;
    overflow: hidden;
    margin-left: -20px;
    padding-left: 20px;
    height: auto;
    transition: all .5s cubic-bezier(0.95, 0.01, 0.39, 0.97);
}

.projects-submenu li:first-child
{
	padding-top: 24px;
}

#menu-pane .submenu-active + .projects-submenu-container
{
/*     max-height: 600px; */
}

#social-buttons-container
{
    flex: 0 0 58px;
}

#social-buttons-label
{
    font-weight: normal;
    margin-bottom: 8px;
    font-size: inherit;
}

#social-buttons
{
    display: -webkit-flex;
    display: flex;
    width: 150px;
    height: 30px;
}

.social-button
{
    width: 20px;
    height: 20px;
    padding: 0px;
    margin: 0px;
    margin-right: 16px;
}

.social-button:hover
{
    
}

#social-button-facebook
{
    background: url('/images/marks/facebook.png') no-repeat center center;
    background-size: contain;
}

#social-button-twitter
{
    background: url('/images/marks/twitter.png') no-repeat center center;
    background-size: contain;
}

#social-button-email
{
    background: url('/images/marks/email.png') no-repeat center center;
    background-size: contain;
}

#social-button-instagram
{
    /* background: url('/images/marks/instagram.png') no-repeat center center; */
    /* background-size: contain; */
}

#login-links
{position: absolute;top: 20px;left: 75px;display: none;}

#project-uploader-button
{margin-bottom: 10px;display: inline-block;}

#logout-button
{display: inline-block;}

/*
        Container Element
*/

#wrapper
{
    opacity: 1;
    transition: opacity .5s ease-in-out;
    position: relative;
    z-index: 500;
}

#menu-pane.menu-active + #wrapper
{
    opacity: .3;
}

.container
{
    min-height: 100vh;
}

.container.old
{
    
}

.scroll-section, .scroll-section .project
{
}

/********************************
*            INDEX              *
********************************/

#index-container
{min-height: 100vh;}

#landing
{height: 100vh;transition: height .5s cubic-bezier(0.8, 0.0, 0.1, 0.99);}

.index-page #landing
{
	margin-bottom: 0px;
}

#landing-spacer
{
    flex-basis: 30%;
}

#landing-copy-container
{flex-basis: 40%;}

#landing-copy-container h1
{
    font-size: 38pt;
    line-height: 48pt;
    font-weight: normal;
}

#landing-copy-container.not-found-copy h1
{
	/* font-size: 14pt; */
	line-height: 18pt;
}

.contact-page #landing-copy-container h1
{
	font-size: 30pt;
	line-height: 36pt;
}

.project-not-found h1 span
{
	display: block;
}

#landing-line-container
{
    flex-basis: 10%;
}

#landing-line-container.active
{
	opacity: 0;
	transition: all .5s 0s cubic-bezier(0.8, 0.0, 0.1, 0.99);
}

.scroll-line.vertical
{
    animation: scrollLineVertical 3.5s cubic-bezier(0.8, 0.0, 0.1, 0.99) 2s 30;
}

.scroll-line-container.vertical
{
    animation: scrollLineVerticalContainer 3.5s cubic-bezier(0.8, 0.0, 0.1, 0.99) 2s 30;
}

#landing-line-container.active .scroll-line.vertical, #landing-line-container.active .scroll-line-container.vertical
{
    
}

#landing .landing-tag-container
{
    flex-basis: 20%;
    height: auto;
}

.landing-tag-container, .volume-tag-container
{
    opacity: 0;
    transform: translate(0,60px);
    height: 180px;
    width: 180px;
    }

.volume-tag-container
{
	margin: 0px auto;
}

    .landing-tag-container.replaced
    {
        transform: translate(0, -60px);
        opacity: 0;
    }
    
.landing-tag-container > span
{
    transition: all .7s cubic-bezier(0.8, 0.0, 0.1, 0.99);
    position:absolute;
    height: 13px;
    left: 0px;
    top: calc(50% - 6px);
}

.landing-tag-container.active > span
{
}

.landing-tag-container > span:first-child, .landing-tag-container.active > span:last-child
{
    transform: translate(0,0);
    opacity: 1;
}

.landing-tag-container > span:last-child, .landing-tag-container.active > span:first-child
{
    opacity: 0;
}

.landing-tag-container > span:last-child
{
    transform: translate(0,60px);
}

.landing-tag-container.active > span:first-child
{
    transform: translate(0,-60px);
    transition-delay: .1s;
}

.landing-tag
{position: absolute;width: 180px;transition: opacity .25s ease-in-out;}

#portfolio
{opacity: 0;transition: opacity .5s;}

.loaded #portfolio
{
	opacity: 1;
}

.project-entry-container
{height: 50vh;}

.project-entry-container:first-child
{
	margin-top: -5vh;
}

.project
{width: 70%;opacity: 0;transition: all 1s cubic-bezier(0.8, 0.0, 0.1, 0.99);transform: translate(0,70px);position: relative;}

.project.active
{
    opacity: 1;
    transform: translate(0,0);
}

.project-logo-container
{
    
}

.project-logo
{max-width: 220px;}

#alex-long-project-logo
{
    width: 176px;
}

#the-store-project-logo
{
    width: 190px;
}

#by-nest-project-logo
{
    width: 180px;
}

#portfolio .scroll-line.horizontal
{

}

#portfolio .scroll-line-container.horizontal
{
    
}

.project-line
{
    flex-basis: 26%;
}

.project-line.active .scroll-line.horizontal, .project-line.active .scroll-line-container.horizontal
{
    transform: translate(50%,0);
}

.project-info-container
{
    overflow: hidden;
    /* height: 111px; */
}

.project-info
{transform: translate(0,32px);transition: transform .5s cubic-bezier(0.8, 0.0, 0.1, 0.99);}

.project-info.active
{
	transition: all .7s cubic-bezier(0.8, 0.0, 0.1, 0.99);
}

#menu-pane:not(.menu-active) + #wrapper #content-wrapper .project-info:hover, #menu-pane + #wrapper #content-wrapper .project-info.active
{
    transform: translate(0,3px);
}

.project-info-container, .project-logo-container
{flex-basis: 37%;}

.project-name
{font-weight: normal;font-size: 25pt;text-align: center;}

.project-desc
{margin-top: 5px;font-size: 13pt;}

.project-view-cta
{font-size: 8pt;padding-bottom: 4px;margin-top: 23px;margin-bottom: 3px;border-bottom: 1.5px solid #8a8a8c;/* transform: translate(0,20px); */opacity: 0;transition: all .5s ease-in;}

#menu-pane:not(.menu-active) + #wrapper #content-wrapper .project-info:hover .project-view-cta, #menu-pane + #wrapper  #content-wrapper .project-info.active .project-view-cta
{
    opacity: 1;
}
.project-tag-container
{
	position: fixed;
	height: 20px;
	width: 400px;
	text-align: center;
	top: calc(90vh - 10px);
	left: calc((100vw - 400px)/2);
	transform: translate(0,60px);
	transition: all .7s cubic-bezier(0.8, 0.0, 0.1, 0.99);
	opacity: 0;
	}

.project-tag-container.active
{
	transform: translate(0,0);
	opacity: 1;
}

.project-tag
{

}

/********************************
*           PROJECTS            *
********************************/

#project-container
{
    
}

.project-section
{height: 100vh;max-height: 1024px;/* margin: 10vh 0px; */}

.project-section:first-child
{
	margin-top: 0px;
	padding-top: 0px;
}

.project-section.last-section
{
	margin-bottom: -15vh;
	/* height: 85vh; */
}

.project-section.last-section.small-height
{
	height: 20vh;
	margin-bottom: 3vh;
	margin-top: 3vh;
}

.project-site-link
{
	font-size: 19pt;
}

.section-1
{

}

.element-header-container
{
    
}

.project-section > .element-image-container
{
	max-width: calc(80% - 40px);
}

.element-image-container
{
	height: 70%;
	width: auto;
	/* overflow: hidden; */
	margin: 0px auto;
	background-position: center center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.last-section .element-image-container
{
	/* height: 82.35%; */
}

.left-side .element-image-container
{
	margin: 0px 20px 0px 0px;
	width: calc(80% - 20px);
	justify-content: flex-end;
}

.right-side .element-image-container
{
	margin: 0px 0px 0px 20px;
	width: calc(80% - 20px);
	justify-content: flex-start;
}

.element-image
{
    max-width: 100%;
    max-height: 100%;
    opacity: 0;
    transition: all .8s cubic-bezier(0.5, 0, 0.4, 1), opacity .8s ease-in;
    transform: translate(0, 120px);
}

.left-side .element-image, .right-side .element-image
{
	max-width: calc(100% - 20px);
	max-height: calc(100% - 27px);
}

.element-image.active, .element-image-container span.active, .element-content-container.active span, .element-content-container.active a
{
    opacity: 1;
    transform: translate(0,0);
}

.element-content-container
{}

.element-content-container span, .element-content-container a
{
    display: block;
    flex-basis: 100%;
    opacity: 0;
    transition: all 1.5s cubic-bezier(0.8, 0.0, 0.1, 0.99), opacity 1s cubic-bezier(0.74, 0.15, 0.78, 0.26);
    transform: translate(0, 90px);
}

.element-content-container span:nth-child(2)
{
	/* transition-delay: .15s; */
}

.element-content-container span:nth-child(3)
{
	/* transition-delay: .3s; */
}

.element-content-container span:nth-child(4)
{
/* 	transition-delay: .45s; */
}

.element-content-container span:nth-child(5)
{
/* 	transition-delay: .6s; */
}

.element-content-container span:nth-child(6)
{
/* 	transition-delay: .75s; */
}

.element-content-container span:nth-child(7)
{
/* 	transition-delay: .9s; */
}

.small-height
{height: 20vh;margin: 6vh 0px;}

.medium-height
{
    
}

.large-height
{
    
}

.project-spacer
{
	
}

.project-cta-container
{

}

.project-line-container
{

}

.project-line-container .scroll-line-container.vertical
{
	height: 50%;
}

.fifty-fifty-section
{display: flex;flex-flow: row nowrap;margin: -14px 0px;}

.center-section
{

}

.project-section-side
{flex-basis: 50%;max-width: 50%;height: 100%;}

.left-side
{
}

.right-side
{
	justify-content: flex-start;
}

.cover-section .element-image-container, .cover-section .element-content-container, .cover-section .element-header-container
{
    transform: translate(0, 60px);
    transition: all 2s cubic-bezier(0.16, 0.37, 0, 0.99);
    opacity: 0;
}

.cover-section .element-header-container, .cover-section .project-line-container, .cover-section .project-cta-container
{
	transform: translate(0, 60px);
    transition: all 1.75s cubic-bezier(0.16, 0.37, 0, 0.99);
    opacity: 0;
}

.loaded .cover-section .element-image-container, .loaded .cover-section .element-content-container, .loaded .cover-section .element-header-container, .loaded .cover-section .project-line-container, .loaded .cover-section .project-cta-container
{
    opacity: 1;
    transform: translate(0,0);
}

.cover-section
{

}

.cover-section .element-image-container
{
	transition-delay: .2s;
}

.cover-section .element-image
{
	
}

.cover-section .element-content-container
{font-size: 10pt;font-weight: 200;line-height: 14pt;flex-basis: 30%;max-width: 460px;display:flex;align-items: center;transition-delay: .4s;letter-spacing: 0px;}

.cover-section .element-content-container.italic
{
	/* margin-top: 56px; */
	flex-basis: 10%;
	display:flex;
	align-items: center;
	font-size: 12.5pt;
	margin-bottom: 5%;
	transition-delay: .3s;
}

.cover-section .element-content-container span
{

}

.cover-section .project-section-side
{

}

.cover-section .project-spacer:first-child
{flex-basis: 15%;}

.cover-section .project-spacer:last-child
{flex-basis: 10%;}

.cover-section .project-line-container
{
	flex-basis: 25%;
	margin: 5% 0px;
	transition-delay: 1.25s;
}

.cover-section .project-line-container .scroll-line-container.vertical, .cover-section .project-line-container .scroll-line.vertical
{
    
}

.cover-section .element-header-container
{
    /* margin-bottom: 56px; */
    /* letter-spacing: 0px; */
    font-size: 25pt;
    font-weight: 400;
    flex-basis: 10%;
    display:flex;
    align-items: center;
    transition-delay: 1.25s;
}

.cover-section .left-side
{flex-flow: column nowrap;align-items: flex-start;justify-content: flex-end;max-width: calc(33% - 8px);margin: 15% calc(7% + 8px) 15% 10%;height: 70%;}

.cover-section .right-side
{

}

.cover-section .project-cta-container
{
	flex-basis: auto;
	display:flex;
	align-items: center;
	transition-delay: 1.25s;
}

.project-section-next
{
	height: 30vh;
	z-index: 10;
	padding: 0px;
	margin: 0px;
	/* margin-top: -15vh; */
	/* margin-bottom: 10vh; */
	/* padding-bottom: 15vh; */
	/* padding-top: 10vh; */
	/* margin-bottom: 0px; */
}

#next-section-line-separator
{
	padding: 0px 8px;
	width:  90px;
	max-width: 7vw;
}

.next-project-button
{
	height: 24px;
	overflow: hidden;
	margin-bottom: 12px;
}

.next-project-button > span
{
    padding: 12px 0px 4px 0px;
    margin: 0px 12px;
    cursor: pointer;
    transform: translate(0,0);
    transition: transform .75s cubic-bezier(0.8, 0.0, 0.1, 0.99);
    display: inline-block;
    border-bottom:2px solid #8a8a8c;
}

.next-project-button:hover > span
{
    transform: translate(0,-8px);
}

.project-section-next.active .next-project-button > span
{
/* 	transform: translate(0,-8px); */
}

/*
 *    CUSTOM PROJECT CLASSES
 */

#project-monomin-section-cover .element-image-container
{
    background-position-x: 0%;
}

/********************************
*            ABOUT              *
********************************/

.about-page #footer
{
	display: none;
}

#about-copy, #about-contact .italic, #about-contact a, #about-image-container
{
	opacity: 0;
	transition: all 2s cubic-bezier(0.16, 0.37, 0, 0.99);
	transform: translate(0, 60px);
}

#about-header
{
	opacity: 0;
	transition: all 1.75s cubic-bezier(0.16, 0.37, 0, 0.99);
	transform: translate(0, 30px);
}

#about-section
{
	height: 100vh;
}

.about-side
{
	flex-basis: 50%;
	max-width: 50%;
	height: 100%;
}

#about-left-side
{
	flex-flow: column nowrap;
	/* align-items: flex-start; */
	justify-content: center;
	max-width: calc(33% - 8px);
	margin: 15vh calc(7% + 8px) 15vh 10%;
	height: 70vh;
}

#about-right-side
{
    
}

#about-header
{
    font-size: 25pt;
    font-weight: 400;
    display:flex;
    align-items: center;
    transition-delay: 1.25s;
}

#about-copy
{font-size: 10pt;font-weight: 200;line-height: 14pt;flex-basis: 45%;max-width: 460px;display:flex;align-items: center;transition-delay: .3s;letter-spacing: 0px;}

#about-contact
{
	
}

#about-contact .italic
{font-size: 13.5pt;margin-bottom: 10px;transition-delay: .1s;display: block;}

#about-contact a
{
	display: inline-block;
	font-size: 8.5pt;
}

#about-image-container
{
	margin: 72px 0px 0px 20px;
	width: calc(80% - 20px);
	justify-content: flex-start;
	transition-delay: .5s;
}

#about-image
{max-width: 100%;max-height: 70vh;}

.loaded #about-header, .loaded #about-copy, .loaded #about-contact .italic, .loaded #about-contact a, .loaded #about-image-container
{
	opacity: 1;
    transform: translate(0,0);
}

/********************************
*           CONTACT             *
********************************/

#contact-container #landing-copy-container
{
    flex-basis: auto;
}

#contact-container #landing-copy-container h1 span:first-child
{
    transition-delay: 0s;
}

#contact-container #landing-copy-container h1 span
{
    transition-delay: .1s;
}



#contact-container #landing-spacer
{
    flex: 1 0 30%;
}


#contact-container #footer
{
	height: auto;
	flex: 1 0 30%;
	margin: 0px;
	padding: 0px;
}

#contact-container #footer-message, #contact-container #footer-email, #contact-container #footer-number, #contact-container #footer-separator, #contact-container #social-label, #contact-container #social-handle
{
}

/********************************
*            FOOTER             *
********************************/

#footer
{position: relative;width: 100vw;height: 40vh;padding-top: 20vh;padding-bottom: 30vh;}

.project-page #footer
{
	padding: 0px;
	margin: 0px;
	height: 56px;
	padding-bottom: 15vh;
}

.project-not-found #footer
{
	display: none;
}

.ajax-load #footer
{
    opacity: 0;
}

#footer .sans-font
{
    font-size: 9pt;
    letter-spacing: 1.5px;
    word-spacing: 6px;
}

#footer-message
{

}

#footer #copyright
{
    position: absolute;
    bottom: 32px;
    width: 200px;
    left: calc((100vw - 200px)/2);
    text-align: center;
    word-spacing: 0px;
}

#footer-contact-info
{margin: 16px 0px;}

.project-page #footer-contact-info
{
	margin-top: 0px;
}

#footer-email
{

}

#footer-separator
{margin: 0px 16px;font-weight: 900;}

#footer-number
{

}

#footer-social
{

}

#social-label
{margin-right: 16px;}

#social-handle
{

}

#footer-message, #footer-email, #footer-number, #footer-separator, #social-label, #social-handle
{
    opacity: 0;
    display: inline-block;
    transform: translate(0,30px);
    transition: all 1s cubic-bezier(0.18, 0.57, 0.11, 0.86);
}

#footer.active #footer-message, #footer.active #footer-email, #footer.active #footer-number, #footer.active #footer-separator, #footer.active #social-label, #footer.active #social-handle
{
    transform: translate(0,0);
    opacity: 1;
}

.ajax-load #footer-message, .ajax-load #footer-email, .ajax-load #footer-number, .ajax-load #footer-separator, .ajax-load #social-label, .ajax-load #social-handle
{
    transition: all 0s;
}

#footer.active #footer-message
{

}

#footer.active #footer-email
{

    transition-delay: .3s;
}

#footer.active #footer-separator
{

    transition-delay: .35s;
}

#footer.active #footer-number
{

    transition-delay: .42s;
}

#footer.active #social-label
{

    transition-delay: .5s;
}

#footer.active #social-handle
{

    transition-delay: .55s;
}

.project-page #footer-message
{
	display: none;
}


/* LOGIN PAGE */

#login-block
{
    width: 100vw;
    height: 100vh;
    left: 0px;
    top: 0px;
}

#login-header-container
{margin-bottom: 48px;}

#login-header
{
    font-weight: 200;
}

#login-header-container img
{
    height: 50px;
    width: auto;
    margin-right: 16px;
    position: relative;
    top: -3px;
    
    -webkit-animation: markSpin 10s 20;
    animation: markSpin 10s 20;
    transform-origin: 46.91% 45.89%;
}

#login-form
{
    
}

#login-form > div
{
    margin: 16px;
}

#login-form > div > *
{
}

#login-label-container
{
    width: 100px;
    text-align: right;
}

#login-input-container
{
    
}

#login-form label
{
    /* padding: 8px; */
    margin: 8px;
    height: 33px;
    line-height: 33px;
    font-size: 1.25em;
}

#login-form input
{
    padding: 8px;
    margin: 8px;
    width: 250px;
    background-color: #eee;
    border:none;
    font-size: 12pt;
    color: #8a8a8c;
}

/* don't display individual error messages on login page */
#login-form input + .error-message
{
    display: none;
}

#login-input-container > .error > input
{
  /* background-color: #a08888; */
}

#login-submit-container
{
    width: 80px;
    text-align: left;
    border-left: 2px solid rgba(166,166,168,.3);
    padding: 64px 0px 64px 32px;
    font-size: .85em;
}

#login-message-container
{
    position:absolute;
    width: 40%;
    left: 30%;
    text-align: center;
    top: 70%;
}

/********************************
*        MEDIA QUERIES          *
********************************/

@media only screen and (max-width: 1439px)
{
    .project-line.active .scroll-line.horizontal, .project-line.active .scroll-line-container.horizontal
    {
    	transform: translate(35%,0);
    }
}

@media only screen and (max-width: 1279px)
{
    .project-line.active .scroll-line.horizontal, .project-line.active .scroll-line-container.horizontal
    {
    	transform: translate(25%,0);
    }
}

@media only screen and (max-width: 999px)
{
    .project-logo-container {
        display: none;
    }

    .project-line {
        display: none;
    }

    .project-info.flex-box {
        align-items: center;
        transform: translate(0,0);
    }

    .project-view-cta {
        opacity: 1;
        border-bottom-color: transparent;
    }

    .project-info.active .project-view-cta
    {
        border-bottom-color: #8a8a8c;
    }
    
    .project-desc {
        font-size: 15pt;
        margin: 16px 0px;
        text-align: center;
    }

    .project-info-container {
        flex-basis: 100%;
    }
    
    #about-copy {
        flex-basis: 57%;
    }

    #about-image-container {
        margin: 0px 0px 0px 20px;
    }
    
    #about-left-side
    {
        min-height: 600px;
    }
}

@media only screen and (max-width: 799px)
{
	.project-section:not(:first-child)
	{
		max-height: 80vw;
	}
	
    .project-section.project-section-next
    {
    	max-height: none;
    }

}

@media only screen and (max-width: 699px)
{
    #about-left-side, #about-right-side {
        max-width: 100%;
        height: auto;
        display: block;
    }

    #about-section {
        flex-flow: column nowrap;
        justify-content: flex-start;
    }

    #about-left-side {
        order: 2;
        margin: 0px 15vw;
        width: 70vw;
        min-height: auto;
    }

    #about-image-container {
        margin: 0px;
        width: 100%;
        display: block;
    }

    #about-right-side {
        margin: 127px 15vw 0px 15vw;
        width: 70vw;
    }

    #about-header {}

    #about-header {
        margin: 60px 0px;
    }

    #about-contact {
        margin: 60px 0px 60px;
    }

    #about-image {
    }
    
    .project-section.fifty-fifty-section, .project-section:first-child {
        height: auto;
        display: block;
        max-height: none;
    }

	.project-section:first-child 
	{
		padding-bottom: 10vh;
	}

    .cover-section .project-line-container .scroll-line-container.vertical, .cover-section .project-line-container .scroll-line.vertical
    {
    	
    }

	.scroll-line-container.vertical
	{
		/*height: 50px;*/
	}

	.cover-section .left-side
	{
		max-width: 70%;
	}

    .cover-section .right-side {
        max-width: 100%;
        flex-basis: 100%;
        width: 100%;
        margin: 10vh auto 0px auto;
        /* height: 100vh; */
        min-height: auto;
        max-height: none;
        justify-content: center;
    }

    .cover-section .right-side .element-image-container
    {
        justify-content: center;
        margin: 0px;
    }

	.project-section-side
	{
		height: auto;
		min-height: auto;
		max-height: none;
		width: 100%;
		max-width: none;
		justify-content: center;
	}
	
    /*.right-side .element-image-container, .left-side .element-image-container {
        margin: 0px;
    }

    .project-section-side {
        max-width: 100%;
        flex-basis: 100%;
    }

    .fifty-fifty-section {
        display: block;
    }

    .element-image-container {
        height: auto;
        display: block;
    }*/

    .project-section:not(:first-child):not(.project-section-next) {
        height: auto;
        max-height: none;
    }

    .project-section.small-height
    {
        height: 40vh;
        height: auto;
        margin: 10vh 0px;
    }

    .project-section > .element-image-container {
        max-width: calc(80% - 10px);
    }

    .left-side .element-image, .right-side .element-image {
        max-width: none;
        width: auto;
        height: 80vh;
        max-height: 550px;
    }

    .right-side .element-image-container, .left-side .element-image-container {
        margin: 10vh auto;
        width: 100%;
        max-height:none;
        justify-content: center;
    }

    .element-image-container
    {
    	height: auto;
    	margin: 10vh 0px;
    }
}

@media only screen and (max-width: 699px), only screen and (max-height: 500px)
{
	.cover-section .left-side
    {
		height: 100vh;
		margin: 0px 15%;
		justify-content: space-between;
    }

    .cover-section .project-spacer:first-child
    {
    	flex: 0 0 15%;
    }

    .cover-section .element-header-container
    {
    	flex: 0 1 auto;
 	}

    .cover-section .element-content-container
    {
    	flex: 0 1 auto;
 	}

    .cover-section .element-content-container.italic
    {
    	margin-bottom: 0px;
    	flex: 0 1 auto;
 	}

    .cover-section .project-line-container
    {
    	flex: 0 1 10%;
    }

    .project-line-container .scroll-line-container.vertical
    {height: 100%;}

    .project-line-container .scroll-line.vertical
    {
    	
    }
	
    .cover-section .project-cta-container
    {
    	flex: 0 1 auto;
    }

    .cover-section .project-spacer:last-child
    {
    	flex: 0 0 5%;
    }
}

@media only screen and (max-height: 414px)
{
	.cover-section .project-line-container
	{
		display: none;
	}

	#menu-spacer
	{
		display: none;
	}

	#menu-item-projects
	{
		margin-bottom: 8px;
	}

	.menu-item
	{margin: 16px 0px;}

	.menu-item-project
	{margin: 5px 0px;font-size: 11.5pt;}

	*
	{

	}
}

@media only screen and (max-height: 350px)
{

	#menu-item-projects
	{
		margin-bottom: 4px;
	}

	.menu-item
	{margin: 8px 0px;}

	.menu-item-project
	{margin: 0px 0px;font-size: 11.5pt;}


	#menu-pane-content
	{
		padding: 20px 0px 20px 85px;
	}

	.cover-section .project-cta-container
	{
		display: none;
	}

	.cover-section .project-spacer:last-child
	{
		display: block;
	}

	*
	{

	}
}

@media only screen and (max-height: 599px) and (min-width: 1000px)
{
    #about-section {
        min-height: 600px;
    }

    #about-left-side, #about-right-side {
        min-height: 600px;
        margin: 10vh calc(7% + 8px) 10vh 10%;
    }

    #about-image-container {
        min-height: 400px;
        margin: 0px 0px 0px 20px;
    }

    #about-image
    {
        max-height:none;
    }
}

@media only screen and (max-height: 599px) and (min-width: 700px) and (max-width: 999px)
{
    #about-section {
        min-height: 600px;
    }

    #about-left-side, #about-right-side {
        min-height: 600px;
        margin: 10vh calc(7% + 8px) 10vh 10%;
    }

    #about-image-container {
        min-height: 400px;
        width: 100%;
        margin: 0px 0px 0px 20px;
    }

    #about-image
    {
        max-height:none;
    }
}

/*@media only screen and (min-height: 414px) and (max-height: 460px)
{
	.cover-section .left-side
	{
	}

	.cover-section .project-spacer:first-child
	{
		
	}

	.cover-section .element-content-container
	{
		
	}

	.cover-section .scroll-line-container.vertical
	{
		
	}
}*/

@media only screen and (max-height: 413px)
{
    .project-section:first-child
    {
    }

    .cover-section .left-side {
    }

    .cover-section .project-spacer:first-child
    {
    }

    .cover-section .element-content-container.italic
    {
    }

    .cover-section .element-header-container
    {
    }

    .cover-section .project-cta-container
    {
    }

    .loaded #logo-container.active, body.ajax-load:not(.index-page) #logo-container
    {
    	transform: translate(0, 26px);
    }
}

@media only screen and (max-height: 767px)
{
    #landing-line-container .scroll-line.vertical, #landing-line-container .scroll-line-container.vertical, .cover-section .project-line-container .scroll-line-container.vertical, .cover-section .project-line-container .scroll-line.vertical
    {
        
    }
    
    .scroll-line-container.vertical
    {
        /*height: 54px;*/
    }
}

@media only screen and (max-height: 750px)
{
	*
	{

	}

	#menu-pane-content
	{
		display:block;
		overflow-y: scroll;
		overflow-x: visible;
	}
}

@media only screen and (max-width: 599px)
{
    .copy-break-2 {
        display: inline;
    }

    .copy-break-1 {
        display: block;
    }
    
    .large-font {
        font-size: 21pt;
        line-height: 29pt;
    }
}

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

	}

	#menu-button
	{
		height: 30px;
	}

    #landing-copy-container h1 {
        font-size: 30pt;
        line-height: 38pt;
    }
    
    .project-desc {
        font-size: 12pt;
    }
    
    .project-name {
        font-size: 22pt;
    }

    .project-view-cta {
        font-size: 7.5pt;
    }

    #logo-container {
        left: calc((100vw - 160px)/2);
    }

    #menu-button-container {
        right: -125px;
    }

    #menu-pane.menu-active {
        width: calc(100vw + 20px);
    }
    
	.menu-button-line:first-child
	{
		transform: translate(4px,0);
	}

	.menu-button-line:last-child
	{
		transform: translate(11px,0);
	}
    
    html:not(.mobile-version) #menu-button-container:hover .menu-button-line:first-child, .menu-active #menu-button-container .menu-button-line:first-child
    {
            transform: translate(4px,0);
    }

    html:not(.mobile-version) #menu-button-container:hover .menu-button-line:last-child, .menu-active #menu-button-container .menu-button-line:last-child
    {
            transform: translate(11px,0);
    }

    #menu-pane.menu-active #menu-button-container .menu-button-line:first-child
    {
            transform: translate(2px,0);
    }

    #menu-pane.menu-active #menu-button-container .menu-button-line:last-child
    {
            transform: translate(13px,0);
    }

    #menu-pane.menu-active #menu-button-container
    {
        transform: translate(-152px,0);
    }
    
    #landing-line-container .scroll-line.vertical, #landing-line-container .scroll-line-container.vertical, .cover-section .project-line-container .scroll-line-container.vertical, .cover-section .project-line-container .scroll-line.vertical
    {
        
    }
    
    .scroll-line-container.vertical
    {
        /*height: 60px;*/
    }
    
    .large-font {
        font-size: 18pt;
        line-height: 28pt;
    }

    .project-section:not(:first-child) {
        height: 60vh;
    }
    
    .next-project-button > span > span {
        display:  none;
    }

    .right-side .element-image-container, .left-side .element-image-container
    {

    }

    .left-side .element-image, .right-side .element-image
    {
    	max-height: none;
    	height: auto;
    	max-width: 80vw;
    	width: 80vw;
    }
}

@media only screen and (max-width: 414px), only screen and (max-height: 414px)
{
    #logo-container
    {left: calc((100vw - 120px)/2);}

    #logo
    {
    	display: none;
    }
    #logo_small
    {
        display: block;
    }

    #landing-copy-container h1, .contact-page #landing-copy-container h1 {
        font-size: 24pt;
        line-height: 28pt;
    }
    
    #footer-separator {
        margin: 0px 8px;
    }

    #footer .sans-font {
        font-size: 8pt;
        letter-spacing: 1px;
    }

    #footer-message, #social-label {
        font-size: 13pt;
    }
}

@media only screen and (max-width: 414px)
{    
    .large-font {
        font-size: 16pt;
        line-height: 22pt;
    }

    .project-section:not(:first-child) {
        height: 50vh;
    }

    .project-section.small-height
    {
        height: 20vh;
    }

    #menu-item-projects
    {
    	margin-top:0px;
    }
}

@media only screen and (max-width: 349px)
{
    #footer-contact-info > a {
        display: block;
        text-align: center;
        line-height: 16pt;
    }

    #footer-separator {
        display: none;
    }
    
    
    
    #landing-line-container .scroll-line.vertical, #landing-line-container .scroll-line-container.vertical
    {
        
    }
    
    .scroll-line-container.vertical
    {
        /*height: 50px;*/
    }
}

@media only screen and (max-width: 320px)
{
    #landing-copy-container h1 {
        font-size: 20pt;
        line-height: 28pt;
    }

    .landing-tag-container span {
        font-size: 8pt;
    }
}