/* 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.woff2') format('woff2'),
         url('Aaargh-webfont.woff') format('woff'),
         url('Aaargh-webfont.ttf') format('truetype'),
         url('Aaargh-webfont.svg#aaarghnormal') 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;
   }

   .home_logo {
    position: absolute;
    left: 40%;
   top: 5%;
    width: 35%;
   }

   .logo{
       position: absolute;
       right: 25%;
      top: 5%;
       width: 500px;
   }

   .home_button{
       position: absolute;
       right: 0%;
       top: 5%;
       width: 20%;
   }

   .portfolio_button{
    position: absolute;
    right: 0%;
    top: 15%;
    width: 20%;
}

.home_button_lg{
    position: absolute;
    right: 0%;
    top: 5%;
    width: 24%;
    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: 15%;
    width: 24%;
    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: fixed;
    left: 1%;
    bottom: 1px;
    width: 39%;
}

.wordface_home{
    position: fixed;
    left: 2%;
    bottom: 0;
    width: 39%;
}

.name_bar{
    position: absolute;
    right: 0%;
    top: 1200px;
    width: 72%;
}

.bar_small{
    position: absolute;
    right: 0%;
    bottom: -190%;
    width: 75%;
    z-index: 3;
}

.intro {
    /* Set your own widths, % for fluid, px for fixed */
    width: 55%;
    /* Vertical margins, and auto to center */
   position: absolute;
margin-top: 20%;
right: 2%;
 }

   p{
       font-family:aaarghnormal, sans-serif;
       font-size: 30px;
       color: white;
   }

   #wrapper {
    background-color: rgba(255,255,255,.75);
    border-top: 3px solid red;
    border-left: 3px solid red;
    border-right: 3px solid red;
    width: 54%;
    position: absolute;
    top: 220px;
    right: 2%;
    z-index: 2;
}

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

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

table {
    width: 90%;
margin-top:950px;
margin-left: 5%;
margin-bottom: 170px;
}

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


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

#invitations .thumbnail {
        position: absolute;
        top: 150px;
        left: 4%;
    }

     #christmas_signs .thumbnail {
        position: absolute;
        top: 150px;
        left: 20%;
    }

    #yard_signs .thumbnail {
        position: absolute;
        top: 150px;
        left: 36%;
    }
    
    #vinnys .thumbnail {
        position: absolute;
        top: 150px;
        left: 52%;
    }

    #draft_boards .thumbnail {
        position: absolute;
        top: 150px;
        left: 68%;
    }

    #ravens_car .thumbnail {
        position: absolute;
        top: 150px;
        left: 84%;
    }

    #outward_bound .thumbnail {
        position: absolute;
        top: 275px;
        left: 4%;
    }

    #decals .thumbnail {
        position: absolute;
        top: 275px;
        left: 20%;
    }

    #chaps .thumbnail {
        position: absolute;
        top: 275px;
        left: 36%;
    }

    #lady_dianne .thumbnail {
        position: absolute;
        top: 275px;
        left: 52%;
    }

    #christmas_ticket .thumbnail {
        position: absolute;
        top: 275px;
        left: 68%;
    }

    #rush_gaming .thumbnail {
        position: absolute;
        top: 275px;
        left: 84%;
    }

      /* 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: 400px;
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: 1rem;
        color: black;
        text-align: center;
        line-height: 2em;
    }

    .cell_gallery{
        display: none;
    }

    #cell_websites {
        display: none;
    }