.Paragraph {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: medium;
  font-style: normal;
  line-height: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  color: #FFFFFF;
}
.facebook {
    background: #3b5998;
    color: white;
}

h1 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: xx-large;
  font-style: italic;
  line-height: normal;
  font-weight: bold;
  font-variant: normal;
  color: #CC0000;
  position: relative;
  visibility: visible;
  text-align: left;
  letter-spacing: normal;
  vertical-align: text-top;
  word-spacing: normal;
}
h2 {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: x-large;
  font-style: italic;
  font-weight: bold;
  font-variant: normal;
  text-align: left;
  color: #FFCC33;
}

h3 {
  font-size: large;
  font-style: italic;
  font-weight: bold;
  color: #FFCC33;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-variant: normal;
}

.divTable {

}


.divTableRow {
    display: flex;
    max-width: 100%;
}

.rightCell {
    border: solid;
    border-color: #CC0000;
    flex: 1 0 auto;
 }

.leftCell {
    border: solid;
    border-color: #CC0000;
    min-width: 1000px;
    flex: 1 0 auto;
    font-size: medium;

}

.homePageMobileButton {
    width : 30vw;
    height : 30vw;
    margin: 2vw;
}

.homeButton:hover {
    background-image: url('buttons/home_over.png');
    height: 50px;
    width: 116px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
}

.mobileButton {
    width: 15vw;
    height: 15vw;
    margin: 1vw;
}

.homeButton {
    background-image: url('buttons/home.png');
    height: 50px;
    width: 116px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
}


.homeButtonMobile:hover {
    background-image: url('buttons/home_mobile_over.png');
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.homeButtonMobile {
    background-image: url('buttons/home_mobile.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.homeButtonMobileHomePage {
    background-image: url('buttons/home_mobile_over.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.biographyButton:hover {
    background-image: url('buttons/biography_over.png');
    height: 50px;
    width: 116px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
}

.biographyButton {
    background-image: url('buttons/biography.png');
    height: 50px;
    width: 116px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
}

.biographyButtonMobile:hover {
    background-image: url('buttons/biography_mobile_over.png');
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.biographyButtonMobileBiographyPage {
    background-image: url('buttons/biography_mobile_over.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.biographyButtonMobile {
    background-image: url('buttons/biography_mobile.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.historyButton:hover {
    background-image: url('buttons/wing_chun_history_over.png');
    height: 50px;
    width: 116px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
}

.historyButton {
    background-image: url('buttons/wing_chun_history.png');
    height: 50px;
    width: 116px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
}

.historyButtonMobile:hover {
    background-image: url('buttons/history_mobile_over.png');
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.historyButtonMobileHistoryPage {
    background-image: url('buttons/history_mobile_over.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.historyButtonMobile {
    background-image: url('buttons/history_mobile.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.classical-wing-chunButton:hover {
    background-image: url('buttons/classical_wing_chun_over.png');
    height: 50px;
    width: 116px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
}

.classical-wing-chunButton {
    background-image: url('buttons/classical_wing_chun.png');
    height: 50px;
    width: 116px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
}

.classical-wing-chunButtonMobile:hover {
    background-image: url('buttons/classical_wing_chun_mobile_over.png');
    cursor: pointer;
    background-repeat: no-repeat;
    width : 100%;
    height : 100%;
}

.classical-wing-chunButtonMobileClassicalPage {
    background-image: url('buttons/classical_wing_chun_mobile_over.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.classical-wing-chunButtonMobile {
    background-image: url('buttons/classical_wing_chun_mobile.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.academyButton:hover {
    background-image: url('buttons/academy_over.png');
    height: 50px;
    width: 116px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
}

.academyButton {
    background-image: url('buttons/academy.png');
    height: 50px;
    width: 116px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
}

.academyButtonMobile:hover {
    background-image: url('buttons/academy_mobile_over.png');
    cursor: pointer;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.academyButtonMobileAcademyPage {
    background-image: url('buttons/academy_mobile_over.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.academyButtonMobile {
    background-image: url('buttons/academy_mobile.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.schoolsButton:hover {
    background-image: url('buttons/schools_over.png');
    height: 50px;
    width: 116px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
}

.schoolsButton {
    background-image: url('buttons/schools.png');
    height: 50px;
    width: 116px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
}

.schoolsButtonMobile:hover {
    background-image: url('buttons/schools_mobile_over.png');
    display: inline-block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.schoolsButtonMobileSchoolsPage {
    background-image: url('buttons/schools_mobile_over.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.schoolsButtonMobile {
    background-image: url('buttons/schools_mobile.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.books-videoButton:hover {
    background-image: url('buttons/books_video_over.png');
    height: 50px;
    width: 116px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
}

.books-videoButton {
    background-image: url('buttons/books_video.png');
    height: 50px;
    width: 116px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
}

.books-videoButtonMobile:hover {
    background-image: url('buttons/books_dvd_mobile_over.png');
    display: inline-block;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.books-videoButtonMobileBooksPage {
    background-image: url('buttons/books_dvd_mobile_over.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.books-videoButtonMobile {
    background-image: url('buttons/books_dvd_mobile.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.published-articlesButton:hover {
    background-image: url('buttons/published_articles_over.png');
    height: 50px;
    width: 116px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
}

.published-articlesButton {
    background-image: url('buttons/published_articles.png');
    height: 50px;
    width: 116px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
}

.published-articlesButtonMobile:hover {
    background-image: url('buttons/published_articles_mobile_over.png');
    cursor: pointer;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.published-articlesButtonMobilePublishedPage{
    background-image: url('buttons/published_articles_mobile_over.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.published-articlesButtonMobile {
    background-image: url('buttons/published_articles_mobile.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.online-articlesButton:hover {
    background-image: url('buttons/online_articles_over.png');
    height: 50px;
    width: 116px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
}

.online-articlesButton {
    background-image: url('buttons/online_articles.png');
    height: 50px;
    width: 116px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
}

.online-articlesButtonMobileOnlinePage {
    background-image: url('buttons/online_articles_mobile_over.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.online-articlesButtonMobile:hover {
    background-image: url('buttons/online_articles_mobile_over.png');
    cursor: pointer;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.online-articlesButtonMobile {
    background-image: url('buttons/online_articles_mobile.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.photo-galleryButton:hover {
    background-image: url('buttons/photo_gallery_over.png');
    height: 50px;
    width: 116px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
}


.photo-galleryButton {
    background-image: url('buttons/photo_gallery.png');
    height: 50px;
    width: 116px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
}


.photo-galleryButtonMobile:hover {
    background-image: url('buttons/photo_gallery_mobile_over.png');
    cursor: pointer;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.photo-galleryButtonMobilePhotosPage {
    background-image: url('buttons/photo_gallery_mobile_over.png');
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    width : 100%;
    height : 100%;
}

.photo-galleryButtonMobile {
     background-image: url('buttons/photo_gallery_mobile.png');
     display: inline-block;
     background-repeat: no-repeat;
     background-size: contain;
    width : 100%;
    height : 100%;
 }





.site-header
{
    height: auto;
    background: #000000;
    width: 110vw;
    text-align: left;
    color: #FFFFFF;
}

.site-footer{
    height: 75px;
    background: #000000;
    width: 100%;
    text-align: center;
    color: #FFFFFF;
}

.main-content{
    background: #000000;
    width: 70vw;
    text-align: left;
    color: #FFFFFF;
}

.navigation{
    background: #000000;
    width: 15vw;
    text-align: left;
    color: #FFFFFF;
}

ul {
     list-style-type: none;
 }

.ulWithPoints {
    list-style-type: circle;
}

.previousPage {
    font-size: xx-large;
    color: #CC0000;
    text-decoration: none;
    font-weight: bold;
}

.previousPage:hover {
    font-size: xx-large;
    text-decoration: underline;
    color: #FF9933;
    font-weight: bold;
}

.footer-rule {
    width: 80%;
}

body {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;

    font-weight: bold;
    text-align: center;

    background: #000000;
}

@media all and (max-device-width: 500px) {
    .navigation {
        order: 1;
        width: 25%;
    }
    .main-content    { order: 2; }
    .site-footer  { order: 3; }
    .menu {
        display: none !important;
    }
    .mobileMenu {
        display: block !important;
    }
    .flashMenu {
        display: none;
    }
    .site-header-mobile {
        display: block; !important;
    }

    .book {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

        -webkit-flex-flow: column wrap;
        flex-flow: column wrap;
    }

    .centerFigures {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

        -webkit-flex-flow: column wrap;
        flex-flow: column wrap;
        justify-content: space-around;
        align-items: center;
    }

    .mobileMenuGrid {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
        justify-content: space-around;
    }
}

@media all and (min-device-width: 500px) {
    .navigation {
        order: 1;
        width: 15%;
    }
    .main-content    { order: 2; }
    .site-footer  { order: 3; }
    .menu {
        display: block !important;
    }
    .mobileMenu {
        display: none !important;
    }

    .site-header-mobile {
        display: none;
    }
    .flashMenu {
        width: 50%;
        margin: 0 auto 0 auto;
    }

    .book {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

        -webkit-flex-flow: row nowrap;
        flex-flow: row nowrap;

    }

    .centerFigures {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

        -webkit-flex-flow: row nowrap;
        flex-flow: row nowrap;
        justify-content: space-around;
    }

    .mobileMenuGrid {
        display: none;
    }
}

.centerImage {
    display: block;
    margin: auto;
    max-width: 100%;
    height: auto;
}

.centerFigure {
    text-align: center;
}

.centerFigures img {
    display: inline-block;
    width: 100%;
    height: auto;
    margin-bottom: 8px;
    flex: 0 0;
}

figcaption {
    text-align: center;
}


.video-iframe {

}

.video-iframe iframe,
.video-iframe object,
.video-iframe embed {
    display: block;
    margin: auto;
    max-width: 100%;
}


.schoolText:hover {
    color: orange;
    text-decoration: underline;
}

.schoolText {
    color: #FFCC00;
    text-decoration: none;
}

.linkText:hover {
    color: orange;
    text-decoration: underline;
}

.linkText {
    color: red;
    text-decoration: none;
}

.quote {
    text-align: center;
    font-weight: bold;
    font-size: larger;
    font-style: italic;
}

.materialSource {
    font-style: italic;
    color: #FFCC00;
    font-size: medium;
}

ol {
    text-align: left;
}


.bookImage {
    min-width: 300px;
    min-height: 400px;
    height: auto;
    display: block;
}

.bookDescription {
    margin-left: 2%;
    min-width: 50%;
    flex: 1 0;
}

.importantparagraph {
    font-weight: bold;
}

.imageGrid {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: space-around;
}


.imageGridFigure {
    display: inline-block;
    max-width: 70vw;
    height: auto;
}

.imageGridFigure img {
    width: 100%;
}

.imageGridCaption {
    caption-side: bottom ;
    width: 100%;
}


.mainImage {
    width: 50%;
    height: auto;
}

.celebration {
    color: red;
    font-size: xx-large;
    font-style: italic;
    text-align: center;
}

.alternativeMenu{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    justify-content: space-around
}

.header-image {
}

.header-image img {
    max-width: 100%; !important
    height: auto; !important
}