/* 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;
    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: 5%;
   top: 3%;
    width: 86%;
   }

   .logo{
       position: absolute;
       left: 5%;
      top: 3%;
       width: 86%;
   }

   .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;
 }

 /* make full screen nav invisible */
 #non_cell_btn {
     display: none;
 }

 /*cell home button */
 .home_button_cell {
     position: absolute;
     width: 44%;
     left: 4%;
     top: 220px;
 }

  /*cell home button hover */
 .home_button_cell_hover {
    position: absolute;
    width: 44%;
    left: 4%;
    top: 220px;
    z-index: 2;
    display: none;
}

  /*cell portfolio button */
  .portfolio_button_cell {
    position: absolute;
    width: 44%;
    right: 4%;
    top: 220px;
}

  /*cell portfolio button hover */
  .portfolio_button_cell_hover {
    position: absolute;
    width: 44%;
    right: 4%;
    top: 220px;
    display: none;
}

 /* home button hover show */
 #home_cell:hover .home_button_cell_hover,
 #home_cell:active .home_button_cell_hover{
    display:block;
 }

  /* portfolio button hover show */
  #portfolio_cell:hover  .portfolio_button_cell_hover,
  #portfolio_cell:active .portfolio_button_cell_hover{
     display:block;
  }


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

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

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

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

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


   p{
       font-family:aaarghnormal, sans-serif;
       font-size: 25px;
       line-height: 2.25rem;
       color: white;
   }

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

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

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

#full_websites {
    width: 90%;
margin-top:185%;
margin-left: 5%;
margin-bottom: 3%;
display: none;
}

#cell_websites {
    width: 90%;
margin-top:525%;
margin-left: 5%;
margin-bottom: 5%;
}

td {
    width: 100%;
    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%; 
    }

    .full_size_image {
        width: 100%;
    }

    .website_thumbnail_spinround {
        text-align: center;
        width: 90%;
        display: block;
        margin-left: 5%;
    }

    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: 1.25rem;
        color: black;
        text-align: center;
        line-height: 1.5rem;
    }

    .gallery {
        display: none;
    }
    
    .cell_thumbnail {
        width: 41%;
    }

#cell_invitations .cell_thumbnail {
    position: absolute;
    top: 4%;
    left: 6%;
}

 #cell_christmas_signs .cell_thumbnail {
    position: absolute;
    top: 4%;
    right: 6%;
}

#cell_yard_signs .cell_thumbnail {
    position: absolute;
    top: 11%;
    left: 6%;
}

#cell_vinnys .cell_thumbnail {
    position: absolute;
    top: 11%;
    right: 6%;
}

#cell_draft_boards .cell_thumbnail {
    position: absolute;
    top: 18%;
    left: 6%;
}

#cell_ravens_car .cell_thumbnail {
    position: absolute;
    top: 18%;
    right: 6%;
}

#cell_outward_bound .cell_thumbnail {
    position: absolute;
    top: 25%;
    left: 6%;
}

#cell_decals .cell_thumbnail {
    position: absolute;
    top: 25%;
    right: 6%;
}

#cell_chaps .cell_thumbnail {
    position: absolute;
    top: 32%;
    left: 6%;
}

#cell_lady_dianne .cell_thumbnail {
    position: absolute;
    top: 32%;
    right: 6%;
}

#cell_christmas_ticket .cell_thumbnail {
    position: absolute;
    top: 39%;
    left: 6%;
}

#cell_rush_gaming .cell_thumbnail {
    position: absolute;
    top: 39%;
    right: 6%;
}