/* HTML5 Template Styles for HTML5Template page */
/* Help older browsers with HTML5 layout elements */
header, nav, aside, article, footer, section, figure, figcaption {
    display: block;
   }

   @font-face {
    font-family: 'aaarghnormal';
    src: url('Aaargh-webfont.eot');
    src: url('Aaargh-webfont.eot?#iefix') format('embedded-opentype'), url('Aaargh-webfont.woff') format('woff'),
    url('Aaargh-webfont.ttf') format('truetype'), url('Aaargh-webfont.svg#CalligraffitiRegular') format('svg');
    font-weight: normal;
    font-style: normal;
   }

   /* Get rid of white border around browser window */
   body {
    background-color:black;
    background-image:url(background.jpg);
    margin:0 auto;
    /* Background image doesn't tile */
    background-repeat: no-repeat;
    
    /* Background image is fixed in the viewport so that it doesn't move when 
       the content's height is greater than the image's height */
    background-attachment: fixed;
    
    /* This is what makes the background image rescale based
       on the container's size */
    background-size: cover;
    min-width: 780px;
    max-width: 960px; 
   }

   .home_logo {
    position: absolute;
    left: 2%;
   top: 3%;
    width: 55%;
   }

   .logo{
       position: absolute;
       left: 2%;
      top: 3%;
       width: 55%;
   }

   .home_button{
       position: absolute;
       right: 0%;
       top: 4%;
       width: 30%;
   }

   .portfolio_button{
    position: absolute;
    right: 0%;
    top: 12%;
    width: 30%;
}

.home_button_lg{
    position: absolute;
    right: 0%;
    top: 4%;
    width: 40%;
    display: none;
}

 /* enlarge home button on hover*/
 #home:hover .home_button_lg,
 #home:active .home_button_lg {
    display:block;
 }

 .portfolio_button_lg{
    position: absolute;
    right: 0%;
    top: 12%;
    width: 40%;
    display: none;
}

 /* enlarge portfolio button on hover */
 #portfolio:hover .portfolio_button_lg,
 #portfolio:active .portfolio_button_lg {
    display:block;
 }

#cell_btm {
    display: none;
}

.wordface{
    position: absolute;
    left: 17.5%;
    top: 22%;
    width: 65%;
}

.wordface_home{
    position: absolute;
    left: 17.5%;
    top: 21%;
    width: 65%;
}

.name_bar{
    position: absolute;
    right: 0%;
    bottom: -110%;
    width: 115%;
}

.bar_small{
    position: absolute;
    right:0;
    top: 312%;
    width: 115%;
}

.intro{
    /* Set your own widths, % for fluid, px for fixed */
    width: 80%;
    /* Vertical margins, and auto to center */
position: absolute;
top: 110%;
right: 9%;
   z-index: 3;
 }


   p{
       font-family:aaarghnormal, sans-serif;
       font-size: 2rem;
       color: white;
   }

   #wrapper {
    background-color: white;
    border-top: 3px solid red;
    border-left: 3px solid red;
    border-right: 3px solid red;
    border-bottom: 3px solid red;
    width: 90%;
/* Vertical margins, and auto to center */
position: absolute;
top: 100%;
right: 5%;
}

.print_banner {
    width: 100%;
    position: absolute;
    top: 1%;
}

.web_banner {
    width: 100%;
    position: absolute;
    top: 61%;
}

table {
    width: 90%;
margin-top:185%;
margin-left: 5%;
margin-bottom: 3%;
}

td {
    width: 33.33%;
    vertical-align: top;
    text-align: center;
    padding: 1%;
}


.gallery div img:nth-child(1) { 
    width: 15%; 
    } 

#invitations .thumbnail {
        position: absolute;
        top: 9%;
        left: 8%;
    }

     #christmas_signs .thumbnail {
        position: absolute;
        top: 9%;
        left: 31%;
    }

    #yard_signs .thumbnail {
        position: absolute;
        top: 9%;
        left: 54%;
    }
    
    #vinnys .thumbnail {
        position: absolute;
        top: 9%;
        left: 77%;
    }

    #draft_boards .thumbnail {
        position: absolute;
        top: 18%;
        left: 8%;
    }

    #ravens_car .thumbnail {
        position: absolute;
        top: 18%;
        left: 31%;
    }

    #outward_bound .thumbnail {
        position: absolute;
        top: 18%;
        left: 54%;
    }

    #decals .thumbnail {
        position: absolute;
        top: 18%;
        left: 77%;
    }

    #chaps .thumbnail {
        position: absolute;
        top: 27%;
        left: 8%;
    }

    #lady_dianne .thumbnail {
        position: absolute;
        top: 27%;
        left: 31%;
    }

    #christmas_ticket .thumbnail {
        position: absolute;
        top: 27%;
        left: 54%;
    }

    #rush_gaming .thumbnail {
        position: absolute;
        top: 27%;
        left: 77%;
    }

      /* Second image in each smaller div */ 
  .gallery div .hidden{ 
  display: none;
    } 

     /* Hover on any smaller div */ 
 .gallery div:hover .hidden,
.gallery div:active .hidden  { 
    display: block;
    position: absolute;
top: 40%;
left: 10%;
    width: 80%; 
    }

    .website_thumbnail {
        text-align: center;
        width: 90%;
        display: block;
    }

    table a img:hover {
        opacity: .6;
        -moz-transform: rotate(720deg);
        -ms-transform: rotate(720deg);
        -o-transform: rotate(720deg);
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg);
        -moz-transition: all ease-out 1s;
        -ms-transition: all ease-out 1s;
        -o-transition: all ease-out 1s;
        -webkit-transition: all ease-out 1s;
        transition: all ease-out 1s;
    }

    table p{
        font-family:aaarghnormal, sans-serif;
        font-size: 10px;
        color: black;
        text-align: center;
        line-height: 2em;
    }

    .cell_gallery{
        display: none;
    }

    #cell_websites {
        display: none;
    }