/* color scheme

lilac: #f9d5e5 

very light brown: #eeac99

pink: #e06377

red: #c83349

*/

/* STYLING FOR NAV BAR */

/* give the nav bar square corners, instead of the default rounded corners */

.navbar{
    border-radius: 0px;
}

/* change color of nav bar to lilac */

.navbar-default{
    background-color: #f9d5e5;
}

/* change the color of the lettering of Home, Slide Show and Misc. to red */

.navbar-default .navbar-collapse .navbar-nav > li > a{
     color: #c83349;
} 

/* change the color of the lettering of Gallery to red */

.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #c83349;
}

/* give the Home, Slide Show and Misc. tabs the color of very light brown when clicked on */

.navbar-default .navbar-nav .active a, 
.navbar-default .navbar-nav .active a:hover, 
.navbar-default .navbar-nav .active a:focus {
    background-color: #eeac99;
    color: #c83349;
}

/* give the Gallery tab the color of very light brown when clicked on */

.navbar-default .navbar-nav > .open > a:focus {
    background-color: #eeac99;
}

/* change color and size of the dropdown menu under the Gallery tab */

.dropdown-menu {
    background-color: #eeac99;
    padding: 0px;
    border: 0px;
    margin: 0px;  
} 

/* change the color of the text of the dropdown menu under the Gallery tab */

.dropdown-menu > li > a {
    color: #c83349;
}

/* make the hamburger icon have the background color of red */

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #eeac99;
}

.navbar-toggle{
    background-color: #c83349;
}

#bullet{
    
    vertical-align: text-top;
}


/* STYLING FOR HOME PAGE */

/* styling for jumbotron on Home page */

.cover-page-jumbo {
    background-color: #c83349;
    font-family: 'Permanent Marker', cursive;
    text-align: center;
    color: #f9d5e5;
    
}

/* styling for certain text in the Japanese translation of the Home page*/

#bullet {
    vertical-align: middle;
    letter-spacing: -10px;
}

#bullet1 {
    
    letter-spacing: -10px;
}

#bullet2 {
    
    letter-spacing: -8px;
}

#bullet3 {
    vertical-align: middle;
    letter-spacing: -14px;
}
@media only screen and (max-width: 660px) {
    .cover-page-jumbo h2{
        font-size: 140%;
    }
    
    .cover-page-jumbo h4{
        font-size: 90%;
    }
}

/* give the jumbrotron square corners, instead of the default rounded corners */

.container .jumbotron {
    border-radius: 0px;
}

.coverphoto {
    width: 100%;
    height: 100%;
    border: 4px solid #e06377;
}

/* resize image in jumbotron */
.coverphoto img {
    width: 100%;
    height: auto; 
}


/* STYLING FOR GALLERY PAGES */

.gallery-background {
    padding: 20px;
    background-color: #c83349;
}

@media only screen and (max-width: 991px) {
    .extra-padding {
        padding-bottom: 20px;
    }
}

.gallerySpecialFont {
    transform: translateY(-50%);
    font-family: 'Permanent Marker', cursive;
}

/* styling for modals */

.modal-content {background: #e06377;}

.btn-default {background: #c83349;
    border: #c83349;
}

.btn-default:hover {background: #eeac99;}

.modal-header {border-bottom: 1px solid #c83349;}

.modal-footer {border-top: 1px solid #c83349;}

/* change the size of the modals for images in the Gallery which are rotated when displayed in modal format */
.gallery-rotate {
        height: 620px;
        width: 600px;
}

/* rotate certain photos in the Gallery -90 degrees when they are displayed in modal format */
.gallery-rotate img {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    height: 450px;
    position: absolute;
    top: 80px;
}

.pager li > a {
    background-color: #f9d5e5;
    color: #c83349;
}


/* STYLING FOR THE SLIDESHOW PAGES */

/* give pink border to the photos in the slide show */
.item > img {
    border: 4px solid #e06377;
}

/* center all img in slideshow */
.carousel-inner img {
    margin: auto;
}

/* enlarge certain pictures in the Slideshow to take up the height and width of their container */
.BBBB {
    width: 100%;
    height: auto;
}

/* give the color of smokey white to the left and right arrows in the Slideshow */

.carousel-control > span {
    color: #f5f5f5;
}

/* make the carousel captions the color of smokey white */
.carousel-caption {
    color: #f5f5f5;
}

/* give the color of smokey white to the border of the carousel indicators */
.carousel-indicators li {
    border: 1px solid #f5f5f5;
}

/* give the color of smokey white to the active carousel indicator */
.carousel-indicators .active {
     background-color: white;
}

/* hide carousel indicators and delete the <h4> captions in screen widths below 992px */ 
@media only screen and (max-width: 991px) {
    .carousel-indicators > li {
        display: none;
    }
    .carousel-caption > h4 {
        display: none;
    }
}

/* make font-size smaller in screen widths below 575px */
@media only screen and (max-width: 575px) {
    .carousel-caption h3 {
        font-size: 75%;
    }
}


/* STYLING FOR MISCELLANEOUS PAGE */

.color1 {
    background-color: #eeac99;
    height: 110px;
    padding-top: 10px;
}

.color2 {
    background-color: #e06377;
    height: 110px;
    padding-top: 10px;
}

.noPad {margin-right: 0px;
    margin-left: 0px;
}

/* STYLING FOR THE FAMILYTREEM.HTML AND FAMILYTREET.HTML DOCS */

.family-tree-jumbo {
    background-color: #f9d5e5;
    font-family: 'Permanent Marker', cursive;
    text-align: center;
}

.family-tree-jumbo > h3 {
    color: #c83349;
} 

/* rotate the fourgenerationsM photo 90 degrees */
.fourgenerationsM img {
    width: 100%;
    height: auto;
   -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
    position: relative;
    top: 60px;
    border: solid 5px #e06377;
}

/* adjust the position of the fourgenerationsM photo and related text, depending on the screen size */
@media only screen and (max-width: 1199px) {
    .fourgenerationsM img {
        position: relative;
        top: 50px;
    }
    .customclassM {
        position: relative;
        top: 2px;
    }
}

@media only screen and (max-width: 991px) {
    .fourgenerationsM img {
        position: relative;
        top: 100px;
    }
    .customclassM {
        position: relative;
        top: 250px;
        left: 50px;
    }
}

@media only screen and (max-width: 767px) {
    .fourgenerationsM img {
        position: relative;
        top: 120px;
    }
    .customclassM {
        position: relative;
        top: 250px;
        left: 0px;
    }
}

/* adjust the positioning of the fourgenerationsT photo and related text, depending on the screen size */
@media only screen and (min-width: 992px) {
    .fourgenerationsT img {
        width: 100%;
        height: auto;
        position: relative;
        left: 50px;
        top: 20px;
        border: solid 5px #e06377;
    }
    .customclassT {
        position: relative;
        left: 50px;
    }
}

@media only screen and (min-width: 768px) {
    .fourgenerationsT img {
        width: 100%;
        height: auto;
        border: solid 5px #e06377;
    }
    .customclassT {
        position: relative;
        top: 20px;
        left: 50px;
    }
}

@media only screen and (min-width: 100px) {
    .fourgenerationsT img {
        width: 100%;
        height: auto;
        border: solid 5px #e06377;
    }
    .customclassT {
        position: relative;
        top: 20px;
    }
}

.withtext {
    text-align: center;
    border: 2px solid black;
}

.withtext1 {
    border: 3.4px solid black; 
    text-align: center;
}

.withsymbol { 
    text-align: center;
}

.specialborder {
    border: solid 3px #e06377;
}


/* STYLING FOR QUESTIONNAIRE */

#heading, #headingJ{
    background-color: #c83349;
    font-family: 'Permanent Marker', cursive;
    text-align: center;
    color: #f9d5e5;
}

#Qborder, #QborderJ{
    border-width: 10px;
    border-style: solid;
    border-color: #f9d5e5;
}

#first-row, #first-rowJ{
    height: 2.5em;
}

#sjButtonJap > .btn,
#lmButtonJap > .btn {
    font-size: 75%;
}

@media only screen and (max-width: 767px) {
    #sjButtonJap > .btn,
    #lmButtonJap > .btn {
        font-size: 75%;
    }
}

@media only screen and (max-width: 640px) {
    #sjButtonJap > .btn,
    #lmButtonJap > .btn {
        font-size: 70%;
    }
}

@media only screen and (max-width: 575px) {
    #sjButtonJap > .card_back,
    #lmButtonJap > .card_back {
        font-size: 65%;
    }
    #sjButtonJap > .card_front,
    #lmButtonJap > .card_front {
        font-size: 65%;
    }
}

.card{
  position: relative;
  width: 25%; 
  text-align: center;
}

.card_front,
.card_back{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card_front,
.card_back{
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

.card_front{
  background-color: #eeac99;
}

.card_back{
  background-color: #eeac99;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect_hover:hover .card_front{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect_hover:hover .card_back{
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}

.customBtn{
  
  border-right: 6px solid #eeac99;
  border-bottom: 6px solid #eeac99;
  border-right-style: outset;
  border-bottom-style: outset;
} 

.question{
    background-color: #eeac99;
}

#hiddenSJ-1, #hiddenSJ-2, #hiddenSJ-3, #hiddenSJ-4, #hiddenSJ-5, #hiddenSJ-6, #hiddenSJ-7, #hiddenSJ-8, #hiddenSJ-9, #hiddenSJ-10, #hiddenSJ-11, #hiddenSJ-12, #hiddenSJ-13, #hiddenSJ-14, #hiddenSJ-15, #hiddenSJ-16, #hiddenSJ-17, #hiddenSJ-18, #hiddenSJ-19, #hiddenSJ-20, #hiddenSJ-21, #hiddenSJ-22, #hiddenSJ-23, #hiddenSJ-24, #hiddenSJ-25, #hiddenLM-1, #hiddenLM-2, #hiddenLM-3, #hiddenLM-4, #hiddenLM-5, #hiddenLM-6, #hiddenLM-7, #hiddenLM-8, #hiddenLM-9, #hiddenLM-10, #hiddenLM-11, #hiddenLM-12, #hiddenLM-13, #hiddenLM-14, #hiddenLM-15, #hiddenLM-16, #hiddenLM-17, #hiddenLM-18, #hiddenLM-19, #hiddenLM-20, #hiddenLM-21, #hiddenLM-22, #hiddenLM-23, #hiddenLM-24, #hiddenLM-25, #hiddenSJJ-1, #hiddenSJJ-2, #hiddenSJJ-3, #hiddenSJJ-4, #hiddenSJJ-5, #hiddenSJJ-6, #hiddenSJJ-7, #hiddenSJJ-8, #hiddenSJJ-9, #hiddenSJJ-10, #hiddenSJJ-11, #hiddenSJJ-12, #hiddenSJJ-13, #hiddenSJJ-14, #hiddenSJJ-15, #hiddenSJJ-16, #hiddenSJJ-17, #hiddenSJJ-18, #hiddenSJJ-19, #hiddenSJJ-20, #hiddenSJJ-21, #hiddenSJJ-22, #hiddenSJJ-23, #hiddenSJJ-24, #hiddenSJJ-25, #hiddenLMJ-1, #hiddenLMJ-2,  #hiddenLMJ-3, #hiddenLMJ-4, #hiddenLMJ-5, #hiddenLMJ-6, #hiddenLMJ-7, #hiddenLMJ-8, #hiddenLMJ-9, #hiddenLMJ-10, #hiddenLMJ-11, #hiddenLMJ-12, #hiddenLMJ-13, #hiddenLMJ-14, #hiddenLMJ-15, #hiddenLMJ-16, #hiddenLMJ-17, #hiddenLMJ-18, #hiddenLMJ-19, #hiddenLMJ-20, #hiddenLMJ-21, #hiddenLMJ-22, #hiddenLMJ-23, #hiddenLMJ-24, #hiddenLMJ-25 {
    background-color: #eeac99;
}


/* STYLING FOR FLIPPABLE PHOTOS (MEMENTOS) */

.FPborder{
    border-width: 10px 10px 1px 10px;
    border-style: solid;
    border-color: #f9d5e5;
}

.FPheading{
    background-color: #c83349;
    font-family: 'Permanent Marker', cursive;
    text-align: center;
    color: #f9d5e5;
    padding-bottom: 20px;
}

.FPbackground{
    border-width: 0px 10px 10px 10px;
    border-style: solid;
    border-color: #f9d5e5; 
    background-color: #eeac99;
    padding: 0px 20px 0px 20px;
}

.FPtextHeading{
    padding: 0px 20px;
}

.pic-front{
    box-shadow: 5px 5px 5px #c83349;
    margin-bottom: 20px;
}

.pic-back{
    display:none;
    box-shadow: 5px 5px 5px #c83349;
    margin-bottom: 20px;
}

.FPtext{
    color: #c83349;
}

/* rotation of images */

#front1{
  transform: rotate(3deg);
}

#front1:hover{
  transform: rotate(0deg);
  cursor: grab;
}
    
#back1-1{
  transform: rotate(3deg);
}

#back1-1:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#back1-2{
  transform: rotate(3deg);
}

#back1-2:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#front2{
  transform: rotate(1deg);
}

#front2:hover{
  transform: rotate(0deg);
  cursor: grab;
}
    
#back2{
  transform: rotate(1deg);
}

#back2:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#front3{
  transform: rotate(-3deg);
}

#front3:hover{
  transform: rotate(0deg);
  cursor: grab;
}
    
#back3-1{
  transform: rotate(-3deg);
}

#back3-1:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#back3-2{
  transform: rotate(-3deg);
}

#back3-2:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#front4{
  transform: rotate(3deg);
}

#front4:hover{
  transform: rotate(0deg);
  cursor: grab;
}
    
#back4{
  transform: rotate(3deg);
}

#back4:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#front5{
  transform: rotate(1deg);
}

#front5:hover{
  transform: rotate(0deg);
  cursor: grab;
}
    
#back5{
  transform: rotate(1deg);
}

#back5:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#front6{
  transform: rotate(-7deg);
}

#front6:hover{
  transform: rotate(-0deg);
  cursor: grab;
}
    
#back6{
  transform: rotate(-7deg);
}

#back6:hover{
  transform: rotate(-0deg);
  cursor: grab;
}

#front7{
  transform: rotate(1deg);
}

#front7:hover{
  transform: rotate(0deg);
  cursor: grab;
}
    
#back7-1{
  transform: rotate(1deg);
}

#back7-1:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#back7-2{
  transform: rotate(1deg);
}

#back7-2:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#back7-3{
  transform: rotate(1deg);
}

#back7-3:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#front8{
  transform: rotate(-5deg);
}

#front8:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#back8{
  transform: rotate(-5deg);
}

#back8:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#front10{
  transform: rotate(2deg);
}

#front10:hover{
  transform: rotate(0deg);
  cursor: grab;
}
    
#back10-1{
  transform: rotate(2deg);
}

#back10-1:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#back10-2{
  transform: rotate(2deg);
}

#back10-2:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#back10-3{
  transform: rotate(2deg);
}

#back10-3:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#back10-4{
  transform: rotate(2deg);
}

#back10-4:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#back10-5{
  transform: rotate(2deg);
}

#back10-5:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#front11{
  transform: rotate(2deg);
}

#front11:hover{
  transform: rotate(0deg);
}

#front12{
  transform: rotate(-2deg);
}

#front12:hover{
  transform: rotate(0deg);
  cursor: grab;
}
    
#back12{
  transform: rotate(-2deg);
}

#back12:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#front13{
  transform: rotate(-2deg);
}

#front13:hover{
  transform: rotate(0deg);
  cursor: grab;
}
    
#back13{
  transform: rotate(-2deg);
}

#back13:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#front14{
  transform: rotate(3deg);
}

#front14:hover{
  transform: rotate(0deg);
  cursor: grab;
}
    
#back14{
  transform: rotate(3deg);
}

#back14:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#front15{
  transform: rotate(3deg);
}

#front15:hover{
  transform: rotate(0deg);
  cursor: grab;
}
    
#back15-1{
  transform: rotate(3deg);
}

#back15-1:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#back15-2{
  transform: rotate(3deg);
}

#back15-2:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#back15-3{
  transform: rotate(3deg);
}

#back15-3:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#front16{
  transform: rotate(1deg);
}

#front16:hover{
  transform: rotate(0deg);
  cursor: grab;
}
    
#back16-1{
  transform: rotate(1deg);
}

#back16-1:hover{
  transform: rotate(0deg);
  cursor: grab;
}

#back16-2{
  transform: rotate(1deg);
}

#back16-2:hover{
  transform: rotate(0deg);
  cursor: grab;
}


/* STYLING FOR QUOTES.HTML */


.qText1{
    color: #c83349;
    font-family: 'Permanent Marker', cursive;
    padding: 0px 50px;
    text-align: center;
}

.qText2{
    color: #c83349;
    font-family: 'Permanent Marker', cursive;
    padding: 0px 60px;
    text-align: center;
    
}

.qBackground1{
    border-width: 0px 10px 1px 10px;
    border-style: solid;
    border-color: #f9d5e5; 
    background-color: #eeac99;
    padding: 20px 20px 0px 20px
}

.qBackground2{
    border-width: 0px 10px 10px 10px;
    border-style: solid;
    border-color: #f9d5e5; 
    background-color: #eeac99;
    padding: 20px 20px 20px 20px
}

#quote1{
    text-decoration: underline;
}

.noPad {margin-right: 0px;
    margin-left: 0px;}

/* STYLING FOR MISCPHOTOS.HTML */

.SMPborder{
    border-width: 10px 10px 10px 10px;
    border-style: solid;
    border-color: #f9d5e5;
}

.SMPheading{
    background-color: #c83349;
    font-family: 'Permanent Marker', cursive;
    text-align: center;
    color: #f9d5e5;
    padding-bottom: 50px;
}

.SMPbackground{
    border-width: 0px 10px 10px 10px;
    border-style: solid;
    border-color: #f9d5e5; 
    background-color: #eeac99;
    color: #c83349;
    padding-bottom: 50px;
}

.playingCardHand {
   display: flex;
   justify-content: center;
   margin-top: 32px;
}

.playingCard {
    width: 300px;
    height: 480px;
    background-color: #f9d5e5;
    border: 1px solid #c83349;
    border-radius: 40px;
    display: block;
    font-family: 'Permanent Marker', cursive;
    padding: 16px;
    flex-direction: column;
    margin: 0 -20px;
    color: inherit;    
    text-decoration: none; 
}

.playingCard:link {      
    text-decoration: inherit;
    color: inherit;
}

/* skewing of playingCards */

#playingCard1{
    transform:rotate(-6deg) translateY(0px);
    transform-origin: bottom right;
}

#playingCard1:hover{
    transform:rotate(-6deg) translateY(-30px);
    transform-origin: bottom right;
    cursor: grab;
}

.playingCard2 {      
     transform: translateY(-30px);
}

#playingCard2:hover{
    transform: rotate(0deg) translateY(-30px);
    cursor: grab;
}

#playingCard3{
    transform:rotate(6deg) translateY(0px);
    transform-origin:bottom left;
}

#playingCard3:hover{
    transform: rotate(6deg) translateY(-30px);
    transform-origin:bottom left;
    cursor: grab;
}

@media screen and (max-width: 992px) {
  #playingCard1:hover {
    padding-bottom: 30px;
  }
  #playingCard2:hover {
    padding: 30px;
  }
  #playingCard3:hover {
    padding-top: 30px;
  }
}

.playingCard-image {
    display: block;
    flex: auto;
    margin: 40px 0;
    overflow: hidden;
    position: relative;
    transform: skew(0, -6deg); 
    width: 100%;
}

.photoModalContent {
    background-color: #f9d5e5;
}

.photoModalTitle {
    color: #c83349;
    font-family: 'Permanent Marker', cursive;
}

.SMPbtn {
    background-color: #c83349;
    color: #f9d5e5;
}  

.SMPbtn:hover {
    background-color: #eeac99;
    color: #c83349;
}

.SMPcloseBtn {
    background-color: #c83349 !important;
    color: #f9d5e5 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.SMPcloseBtn:hover {
    background-color: #eeac99 !important;
    color: #c83349 !important;
}