#construction {
    color:#000;
    width: 70%;
    margin:0 auto;
    font-family:'Lato',arial, sans-serif;
    text-align:center;
    font-size:3em;
    padding-bottom:20px;
}
#container {
    width:100%;
    overflow:hidden;
}
body {
    margin:0 auto;
    padding:0;
}
h1 {
	display:inline;
	font-family:'Lato';
	padding-top:10px;
}
h2, h3 {
    font-family:'Lato';
}
div#top {
 width:85%;
 border-top:2px solid #000;
 border-bottom:2px solid #000;
 clear:both;
 margin:0 auto;
 text-align: center;
}
div#top li {
    display:inline;
    list-style-type:none;
    float:left;
    margin:17px 0;
}
div#top a {
    color:#000;
    text-decoration:none;
    margin-right:40px;
    font-family:'Lato',arial,sans-serif;
    padding: 8px 5px;
}
div#top ul {
    margin: 0 auto;
    display:inline-block;
    padding:0;
}
div#top ul li a.active {
    background:#000;
    color:#fff;
    text-decoration:none;
}
div#top {
	overflow:hidden;
}
li {
    list-style-type:none;
}
div#display {
    width:80%;
    margin:0 auto;
    display:block;
}

div#display li {
    display:inline;
    margin-bottom:10px;
    float:left;
    width:49%;
    box-sizing: border-box; 
    margin-right:2%;
    opacity:0;
    -ms-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -webit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
#container #display ul li.tada {
    opacity:1;
    -webkit-transform: rotate(0deg) translateY(0px);
    transform:  rotate(0deg) translateY(0px);
}
div#display li:nth-child(2n+2) {
    margin-right:0;
}
div#display ul li a {
    padding-right:0px;
    width:100%;

}
div#display ul {
    padding:10px 0;
    float:left;
    width:100%;
     -moz-perspective: 1200px;
     -ms-perspective: 1200px;
 -webkit-perspective: 1200px;
 perspective: 1200px;
}
div#display ul li a img {
    width:100%;

-ms-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
 -webit-transition: height 1s ease-in-out;
 transition: height 1s ease-in-out;
}
div#copy {
    display:block;
 font-family:'Lato', arial, sans-serif;
 width: 85%;
 margin:0 auto;
 padding-bottom: 40px;
 text-align:center;
 border-top:2px solid black;
 clear:both;
 position: relative;
 z-index: 5;
 background: #fff;
}
div#display img {
    border: 2px solid black;
}
div#display img:hover {
    border:2px solid red;
}
div#display p {
    font-family:'Lato', arial, sans-serif;
    letter-spacing:.1em;
}
a:hover {
    color:red;
}

div.home {
    text-align:center;
    
}
div.home li a img  {
	width:48.75%;
}
div.home h1 {
    margin-top:8px;
    margin-bottom:0;
    padding:0 0 10px;
    display:block;
    width:100%;
    border-bottom:2px solid #000;
}
div.home ul {
    margin-top:8px;
    margin-bottom:0;
}
html {
    overflow-y:scroll;
}
h1.two {
    margin-top:0;
    padding:0 0 10px;
    display:block;
    width:100%;
    border-bottom:2px solid #000;
}

div#display img.contact {
    border:none;
}
#display #resume ul {
    padding: 0;
}
#resume ul li {
    list-style-type:circle;
}
#display #resume li {
    display:block;
}
#resume h2, #resume h3, #resume li {
    font-family:'Lato', arial, helvetica;
}
html {
	overflow-y:scroll;
}
a{
    text-decoration:none;
}
a:hover {
    color: red;
}
canvas#cavId {
    background: #40fff0;
    overflow:hidden;
    margin:0;
    padding:0;
    border:10px solid black;
}

canvas#cavId2 {
    background: #15325f;
    overflow:hidden;
    margin:0;
    padding:0;
    border:10px solid red;
}
div#decoBabe {
    height:540px;
    overflow:hidden;
}
header.entry-header {
    margin-top:10px;
        text-align:center;
}
h1.entry-title {
    font-family:'Lato';
    font-size: 2em;

}
h2.halloween {
	margin-top:100px;
		transition: text-shadow 35s;
-moz-transition: text-shadow 35s; /* Firefox 4 */
-webkit-transition: text-shadow 35s; /* Safari and Chrome */
-o-transition: text-shadow 35s; /* Opera */
text-shadow:0px 0px red;
font-size:60px;
font-family:'DoubleFeature';
color:#fff;
position:relative;
bottom:1000px;
z-index:30;
left:40px;
}
h2.halloween:hover {
	text-shadow:0px 1px red,0px 2px red, 0px 3px red, 0px 4px red, 0px 5px red, 0px 6px red, 0px 7px red, 0px 8px red, 0px 9px red, 0px 10px red, 0px 11px red, 0px 12px red, 0px 13px red, 0px 14px red, 0px 15px red, 0px 16px red, 0px 17px red, 0px 18px red, 0px 19px red, 0px 20px red, 0px 21px red, 0px 22px red, 0px 23px red, 0px 24px red, 0px 25px red, 0px 26px red, 0px 27px red, 0px 28px red, 0px 29px red, 0px 30px red, 0px 31px red, 0px 32px red, 0px 33px red, 0px 34px red, 0px 35px red, 0px 36px red, 0px 37px red, 0px 38px red, 0px 39px red, 0px 40px red, 0px 41px red, 0px 42px red, 0px 43px red, 0px 44px red, 0px 45px red, 0px 46px red, 0px 47px red, 0px 48px red, 0px 49px red, 0px 50px red, 0px 51px red,0px 52px red, 0px 53px red, 0px 54px red, 0px 55px red, 0px 56px red, 0px 57px red, 0px 58px red, 0px 59px red, 0px 60px red, 0px 61px red, 0px 62px red, 0px 63px red, 0px 64px red, 0px 65px red, 0px 66px red, 0px 67px red, 0px 68px red, 0px 69px red, 0px 70px red, 0px 71px red, 0px 72px red, 0px 73px red, 0px 74px red, 0px 75px red, 0px 76px red, 0px 77px red, 0px 78px red, 0px 79px red, 0px 80px red, 0px 81px red, 0px 82px red, 0px 83px red, 0px 84px red, 0px 85px red, 0px 86px red, 0px 87px red, 0px 88px red, 0px 89px red, 0px 90px red, 0px 91px red, 0px 92px red, 0px 93px red, 0px 94px red, 0px 95px red, 0px 96px red, 0px 97px red, 0px 98px red, 0px 99px red, 0px 100px red, 0px 101px red,0px 102px red, 0px 103px red, 0px 104px red, 0px 105px red, 0px 106px red, 0px 107px red, 0px 108px red, 0px 109px red, 0px 110px red, 0px 111px red, 0px 112px red, 0px 113px red, 0px 114px red, 0px 115px red, 0px 116px red, 0px 117px red, 0px 118px red, 0px 119px red, 0px 120px red, 0px 121px red, 0px 122px red, 0px 123px red, 0px 124px red, 0px 125px red, 0px 126px red, 0px 127px red, 0px 128px red, 0px 129px red, 0px 130px red, 0px 131px red, 0px 132px red, 0px 133px red, 0px 134px red, 0px 135px red, 0px 36px red, 0px 37px red, 0px 38px red, 0px 39px red, 0px 40px red, 0px 41px red, 0px 142px red, 0px 143px red, 0px 144px red, 0px 145px red, 0px 146px red, 0px 147px red, 0px 148px red, 0px 149px red, 0px 150px red, 0px 151px red,0px 152px red, 0px 153px red, 0px 154px red, 0px 155px red, 0px 156px red, 0px 157px red, 0px 158px red, 0px 159px red, 0px 160px red, 0px 161px red, 0px 162px red, 0px 163px red, 0px 164px red, 0px 165px red, 0px 166px red, 0px 167px red, 0px 168px red, 0px 169px red, 0px 170px red, 0px 171px red, 0px 172px red, 0px 173px red, 0px 174px red, 0px 175px red, 0px 176px red, 0px 177px red, 0px 178px red, 0px 179px red, 0px 180px red, 0px 181px red, 0px 182px red, 0px 183px red, 0px 184px red, 0px 185px red, 0px 186px red, 0px 187px red, 0px 188px red, 0px 189px red, 0px 190px red, 0px 191px red, 0px 192px red, 0px 193px red, 0px 194px red, 0px 195px red, 0px 196px red, 0px 197px red, 0px 198px red, 0px 199px red;
}
@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot');
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf') format('truetype'),
        url('fonts/icomoon.woff') format('woff'),
        url('fonts/icomoon.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
.close, .next, .prev {
    /* prefer icon font where available, but fall back to system fonts so arrows render
       correctly even if the icon font files are missing */
    font-family: 'icomoon', 'Lato', Arial, sans-serif;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    cursor: pointer;
    display:none;
    z-index: 4;
}
.prev:before {
    font-size: 2em;
    /* use a standard Unicode left arrow instead of a missing icon-glyph */
    content: "\2190"; /* ← */
    position: absolute;
    top: -35px;
}
.next:before {
    font-size: 2em;
    /* use a standard Unicode right arrow instead of a missing icon-glyph */
    content: "\2192"; /* → */
    position: absolute;
    top: -35px;
}
.close:before {
    /* use a simple multiplication/cross glyph so close is visible without icon font */
    content: "\00D7"; /* × */
}
.close {
    top:35px;
    right:10px;
    color: black;
    width: 30px;
    height: 30px;
    font-size: 30px;
    border-radius: 50%; 
}
.prev {
    top: 400px;
    left:10px;
}
.next {
    top: 400px;
    right: 10px;
}

/* hide the textual label visually (accessible via aria-label) and show the arrow via :before */
.prev, .next {
    text-indent: -9999px;
    overflow: hidden;
    display: inline-block; /* ensures width/height apply */
    width: 48px;
    height: 48px;
}
.prev:before, .next:before { color: #000; }
div#halloween {
    height:750px;
}
#resume p {
    margin-top:0;
}
#resume ul {
    margin-top:0;
}
#display ul li:nth-child(2n+1) {
    -moz-transform: rotateY(-80deg) translateY(150px) translateZ(200px);
    -webkit-transform: rotateY(-80deg) translateY(150px) translateZ(200px);
    transform: rotateY(-80deg) translateY(150px) translateZ(200px);
}
#display ul li:nth-child(2n+2) {
    -moz-transform: rotateY(80deg) translateY(150px) translateZ(200px);
    -webkit-transform: rotateY(80deg) translateY(150px) translateZ(200px);
    transform: rotateY(80deg) translateY(150px) translateZ(200px);
}
#display ul li a img {
    -moz-transition:all 1s ease-in;
    -webkit-transition:all 1s ease-in;
    transition:all 1s ease-in;
}
#display ul li a img.tada {
    -moz-transform: translateY(0deg);
    -webkit-transform: translateY(0deg);
    transform: translateY(0deg);
}
#display .showcase {

}
#display #resume ul li {
    color: black;
    opacity:1;
    -webkit-transform: none;
    transform: none;
}
#display .detailImg {
    clear: both;
    margin: 0 auto 20px;
    max-width: 100%;
}
#stories {
    width:100%;
    overflow:hidden;
    margin: 0 auto;
}

div#construction, div#top, div#copy {
    -ms-animation: fadeIn 1s ease-in;
    -moz-animation: fadeIn 1s ease-in;
    -webkit-animation: fadeIn 1s ease-in;
    animation: fadeIn 1s ease-in;
}
@-ms-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}
div.detail {
    padding: 5px 80px;
    opacity:0;
    position: absolute;
    top: 0;
    -ms-transform: translateY(800px);
    -moz-transform: translateY(800px);
    -webkit-transform: translateY(800px);
    transform: translateY(800px);
    -ms-transition: 1.5s all ease-in-out;
    -moz-transition: 1.5s all ease-in-out;
    -webkit-transition: 1.5s all ease-in-out;
    transition: 1.5s all ease-in-out;
    z-index: 1;
}

div.detail.showcase {
    background: white;
    opacity:1;
    -ms-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    z-index: 2;
    width:85%;
    max-height: 80vh;
    overflow-y: auto;
}
div.detail h2 {
    color: red;
    font-size: 2em;
}
#display .cover {
    position: relative;
    z-index:1;
}
div.detail img:hover {
    border: 1px solid #000;
}
div.detail p {
    font-size: 1.25em;
}
div#display div.detail ul li {
    color:black;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
    font-family: 'Lato';
    font-size: 1.3em;
}
div.detail a {
    background-color: #08c;
    color:white;
    border-radius: 10px;
    display: block;
    font-size: 1.3em;
    font-family: 'Lato';
    padding: 10px 15px;
    margin: 0 auto 7px;
    text-transform: uppercase;
    width: 200px;
}
div.detail a.archived {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    text-decoration: line-through;
}
div.detail date {

    clear: both;
    float: left;
    font-family:'Lato';
    width:100%;
}
div#display #details {
    position:relative;
}
#display.contact h1 {
    margin-top: 0;
    float:left;
    width:100%;
}
#display.contact ul li {
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
}
#display.contact ul {
    margin-top:0;
}
@media all and (max-device-width: 47.936em) and (max-width: 47.936em) {
    #container {
        margin:0 auto;
        box-sizing: border-box;
        width:90%;
    }
    #construction {
        width:100%;
    }
    div#display {
        width:100%;
    }
    #display ul li {
        width:100%;
        margin:0;
        box-sizing:border-box;
        margin-bottom:20px;
    }
    div#top {
        width:100%;
        display:block;
    }
    div#top ul {
        margin: 15px auto 0;
        width:490px;
    }
    div#display ul li a img {
        width:99%;
    }
}
@media all and (max-width: 50em) {
    div#display ul.cover li {
        width:100%;
    }
    #construction {
        width:85%;
    }
    #construction img {
        margin-bottom: 0 !important;
    }
    div#top a {
        margin-right: 10px;
    }
    h1 {
        font-size: 1.5em;
        font-size: 11vw;
        margin-top: 20px;
    }
}