@charset "UTF-8";

@font-face {
    font-family: 'graffiti';
    src: url('/fonts/capture_it_2-webfont.eot');
    src: url('/fonts/capture_it_2-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/capture_it_2-webfont.woff') format('woff'),
         url('/fonts/capture_it_2-webfont.ttf') format('truetype'),
         url('/fonts/capture_it_2-webfont.svg#capture_it_2regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'graffitiClean';
    src: url('/fonts/capture_it-webfont.eot');
    src: url('/fonts/capture_it-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/capture_it-webfont.woff') format('woff'),
         url('/fonts/capture_it-webfont.ttf') format('truetype'),
         url('/fonts/capture_it-webfont.svg#capture_it_2regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
    padding: 0;
    margin: 0;
}

html, body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: Arial, Verdana, sans-serif;
    /*height: 100%;*/
    width: 100%;
    background-color: transparent;
    background-image: url('../images/bricks.jpg');
}

#main-nav li {
    list-style-type: none;
}

#pageWrapper {
    width: 80%;
    min-width: 422px;
    height   : 900px;
    margin   : 0 auto;
    top      : 20px;
    position : relative;
}

.header {
    display: grid;
    grid-template-columns: 1fr 6fr 1fr;
    grid-template-rows: 70px auto;
    align-items: center;
    background-color: #f0f8ff;
    font-family: graffiti;
    padding: 6px;
    -moz-box-shadow: 3px 5px 4px;
    -webkit-box-shadow: 3px 5px 4px;
    -khtml-box-shadow: 3px 5px 4px;
    -o-box-shadow: 3px 5px 4px;
    -ms-box-shadow: 3px 5px 4px;
    box-shadow: 3px 5px 4px;
    -moz-border-radius: 15px 15px 0px 0px;
    -webkit-border-radius: 15px 15px 0px 0px;
    -khtml-border-radius: 15px 15px 0px 0px;
    -o-border-radius: 15px 15px 0px 0px;
    -ms-border-radius: 15px 15px 0px 0px;
    border-radius: 15px 15px 0px 0px;
}

.logo {
    grid-column: 1;
}

a.unstyledLink,
a.unstyledLink:hover,
a.unstyledLink:active {
    color: #000000;
}

nav {
    /* background-image: url("../images/header.png"); */
     font-family: graffitiClean;
     z-index: 999;
}

.main-nav {
    grid-column: 2 / 5;
}

.hamburger {
    grid-column: 4;
    justify-self: end;
}

.main-nav ul {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    justify-items: center;
    justify-items: center;
    align-items: center;
}

.main-nav ul a:hover {
    text-decoration: none;
}

.fa-bars {
    font-size: 1.4em;
}

.contentWrap {
    min-width: 400px;
}

.right{
	float: right;
}

.left{
	float: left;
}

.fleft {
    float: left;
}

.fright {
    float: right;
}

#valid {
    height: 20px;
}

#menuBar p {
    float: right;
    font-size: 20px;
    margin-top: 10px;
    width: 20%;
    line-height: 25px;
}

.menuItem {
    float: left;
    height: 50px;
    padding: 20px 0 0;
    width: 110px;
    border-right: 1px dotted #000000;
    font-family: graffitiClean;
}

.menuItem a {
    color: #BF5DA6 !important;
    text-decoration: none;
}

.menuItem a:hover {
    color: #31CCEF !important;
    text-decoration: underline;
}

#main {
    width: 80%;
    margin: 100px auto 0;
    display: block;
    z-index: 1;
    clear : both;
}

.pageTitle {
    font-size: 28px;
    margin: 20px 0px;
}

.pageTitle::first-letter {
    font-size: 56px;
}

section {
    float: left;
    background-color: #E7E0C8;
    float: left;
    border: 1px solid #000000;
    padding: 10px;
    margin-bottom: 20px;
    behavior: url('/PIE.htc');
    -moz-border-radius: 0px 0px 15px 15px;
    -webkit-border-radius: 0px 0px 15px 15px;
    -khtml-border-radius: 0px 0px 15px 15px;
    -o-border-radius: 0px 0px 15px 15px;
    -ms-border-radius: 0px 0px 15px 15px;
    border-radius: 0px 0px 15px 15px;
    -moz-box-shadow: 3px 5px 4px;
    -webkit-box-shadow: 3px 5px 4px;
    -khtml-box-shadow: 3px 5px 4px;
    -o-box-shadow: 3px 5px 4px;
    -ms-box-shadow: 3px 5px 4px;
    box-shadow: 3px 5px 4px;
}

section h2 {
    color       : #17803d;
    text-shadow : 1px 1px #000;
    font-weight : normal;
    margin      : 4px;
}

#signature {
    text-align: right;
}

div#contentImgSection {
    float: left;
    width: 555px;
    height: 540px;
    padding: 5px;
}

aside {
    float: left;
    margin-bottom: 10px;
    margin-left: 10px;
    padding: 20px;
    color: #FFFFFF;
    background-color: rgba(0, 0, 0, 0.5);
    behavior: url('/PIE.htc');
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    -khtml-border-radius: 15px;
    -o-border-radius: 15px;
    -ms-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: -2px -2px 4px #454545;
    -webkit-box-shadow: -2px -2px 4px #454545;
    -khtml-box-shadow: -2px -2px 4px #454545;
    -o-box-shadow: -2px -2px 4px #454545;
    -ms-box-shadow: -2px -2px 4px #454545;
    box-shadow: -2px -2px 4px #454545;
}

aside div#contentSiteBrief {
    float: left;
    width: 340px;
    height: 200px;
    font-size: 14px;
}

#siteLoc {
    color: #17803d;
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bolder;
    display: block;
}

aside div.contentImgContent {
    float: left;
    width: 340px;
    height: 300px;
    display: none;
    visibility: hidden;
}

footer {
    clear: both;
    color: #676767;
    display: block;
    font-size: 13px;
    height: 264px;
    margin: 10px auto;
    width: 100%;
    background: url("../images/fenced_in_top.png") repeat-x scroll center top;
}

footer div#footerTop {
    float: left;
    margin: 5px auto 0px auto;
    height: 30px;
    width: 100%;
    text-align: center;
    background-color: #E7E0C8;
}

footer div#footerContent {
    float: left;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
    margin: 0px auto;
    width: 100%;
    background-color: #E7E0C8;
}

.footerColumn {
    /* height: 160px; */
    padding: 0 15px;
    float: left;
}

.footerColumn ul {
    padding: 0px;
}

.footerColumn li {
    list-style: none;
    margin-bottom: 5px;
}

.footerColumn li:first-child {
    color: #000000;
    font-weight: bolder;
    margin-bottom: 10px;
    font-size: 16px;
}

.footerColumn a {
    color: #696969;
    text-decoration: none;
}

.footerColumn a:link {
    color: #696969;
    text-decoration: none;
}

.footerColumn a:visited {
    color: #FF0000;
    text-decoration: none;
}

.footerColumn a:hover {
    color: #262626;
    text-decoration: underline;
}

.footerColumn img {
    border       : 1px solid #898989;
    width        : 20px;
    margin-right : 5px;
}

.footerColumn a:hover img {
    border: 1px solid #262626;
}

footer div#footerCopy {
    float: left;
    margin: 0px auto;
    height: 30px;
    width: 100%;
    text-align: center;
    background-color: #E7E0C8;
}

footer div#footerBtm {
    float: left;
    margin: 0px auto;
    height: 30px;
    width: 100%;
    text-align: center;
    background: url("../images/fenced_in_bottom.png") repeat-x scroll center top;
}

.slide {
  float: left;
  height: 525px;
  width: 555px;
  position: relative;
  background-color: #FFFFFF;
  display: none;
  visibility: hidden;
}

.slide img {
    width: 555px;
    height: 525px;
}

.active {
    display: block !important;
    visibility: visible !important;
}

#pictures {
    float: left;
}

#previous_button {
    /*background-image: url(../images/btn_prev.png);*/
    background-color: #FFFFFF;
    color: #31CCEF;
    cursor: pointer;
    font-size: 35px;
    font-weight: bolder;
    height: 70px;
    padding: 0;
    width: 22px;
    z-index: 100;
    padding-top: 25px;
    float: left;
    margin-top: 250px;
    
}

#previous_button.over {
  /*background-image: url(../images/btn_prev_over.png);*/
  background-color: #31CCEF;
  color: #FFFFFF;
}

#previous_button.disabled {
  /*background-image: url(../images/left_disabled.png);*/
  cursor: default;
  background-color: #ABABAB;
  color: #F02321;
}

#next_button {
    /*background-image: url(../images/btn_next.png);*/
    background-color: #FFFFFF;
    color: #31CCEF;
    cursor: pointer;
    font-size: 35px;
    font-weight: bolder;
    height: 70px;
    width: 22px;
    z-index: 100;
    padding-top: 25px;
    float: left;
    margin-top: 250px;
    
}

#next_button.over {
  /*background-image: url(../images/btn_next_over.png);*/
  background-color: #31CCEF;
  color: #FFFFFF;
}

#next_button.disabled {
  /*background: url(../images/right_disabled.png);*/
  cursor: default;
  background-color: #ABABAB;
  color: #F02321;
}

#counter {
    left: 320px;
    position: relative;
    top: 5px;
    width: 75px;
    margin-left: -75px;
}

#frameNum {
    float: left;
    width: 20px;
}

#of {
    float: left;
    width: 25px;
}

#totalSlides {
    float: left;
    width: 20px;
}

@media screen and (min-width: 901px) {
    .hamburger {
        display: none;
    }

    .main-nav {
        display: inline-block;
    }

}

@media screen and (max-width: 900px) {

    .hamburger {
        display: inline-block;
    }

    .main-nav {
        grid-row: 2;
        grid-column: 1 / 6;
        background-color: #000;
        display: none;
    }

    .main-nav ul {
        grid-template-columns : 1fr;
        height                : 100%;
        align-content         : space-evenly;
        grid-row-gap          : 6px;
        text-align            : right;
    }

    .main-nav ul li {
        display: block;
        width: 100%;
        height: 100%;
    }

    .main-nav ul li a:hover {
        background-color: #232323;
    }

    nav.main-nav ul li a {
        color: #fff;
        font-size: 20px;
        display : block;
        width: 100%;
        height: 100%;
        line-height: 32px;
    }

    div#contentImgSection {
        width: 86%;
    }

    .slide {
        width: 100%;
    }
    .slide img {
        width: 100%;
    }
}

@media screen and (max-width: 500px) {
    nav.main-nav ul li a {
        font-size: 14px;
    }
}