body {
  background: url("../img/jungle-background.png") fixed;
  color: #fff;

  font-family: 'Lato', sans-serif;
  background-position: center;
  overflow-x: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
/*  background-size: cover;
background-position: center;
  overflox-x: hidden;
  background-position: left top;
    background-size: 100%;
*/
}







.navbar {
  border-bottom: #008ed6 3px solid;
  opacity: 0.8;
}

.text-success {
  font-size: 18px;
  margin-left: 0%;
}

#myDataLightbox {
  text-align: center;
}



#cardImage {
    border: 5px solid #555;
}

.item img {
  border: 5px solid #555;
}

#logoImage {
  margin-top: -10px;
  margin-bottom: -10px;
}

#imageBlogs {
  padding: 5px;
}

#myReturnPage {
  margin-left: 45%;
  width: 10%;
}

#myBlogTextPic {
  color:#7d8285;
  background-color: #ccffcc;
  text-align: center;
}

#myVideoUpdate {
    width: 560px;
    height: 315px;
    display: block;
    margin: 0 auto;
}













/*     -------------   PAGES   -------------------     */

#namePage {
  color:#7d8285;
  background-color: #ccffcc;
  border: 5px solid #555;
}


#newsPage {
  opacity: 0.8;
  height: 888px;
}

#contactPage {

  opacity: 0.8;
  height: 888px;

}




#junglebeauty {
  font-family: 'Sofia';
  font-size: 24px;
  font-style: italic;
}

/* CSS for kings_new.php page   START*/


.kingCard {
  color: black;
  text-align: center;
  padding: 0.5rem;
  font-family: 'Roboto Slab', serif;
  background-color: #669999;
  border: 1px solid rgba(0.0.0..125);
  border-radius: 0;
}

.kingCard h3{
  font-size: 1.5rem;
}

.kingCard h5{
  font-size: 1.2rem;
}


.kingCard p{
  color: black;
  text-align: justify;
  padding-bottom: 0.8rem;
  line-height: 1.2rem;
}



/* CSS for kings_new.php page   END */


/* CSS for about.php page */
#aboutUs {
  opacity: 0.8;
  height: 888px;
}
.about-color {
  color: green;
  background: #99ff99;
  text-align: center;
}
.about-color p {
    text-aligh: justify;
}
.about-color p{
  font-size: 1.1em;
  text-align: left;
}
/* End  CSS for about.php page */

/* CSS for contact.php page */
.contact-color {
  color: green;
  background: #99ff99;
  text-align: center;
}
.contact-color p{
  font-size: 1.1em;
  text-align: left;
}
/* End  CSS for contact.php page */

/* *********  START  CSS  for landin-home page ****************** */
.landing-color {
  background: rgba(30, 130, 76, 0.9);
  text-align: center;
}
#landingLink {
  margin: 5px 5px 5px 5px;
}
#landingLink a{
font-size: 18px;
color: white;
text-decoration: underline white;
}
@media screen and (min-width: 255px) {
  #lp_img {
    width: 200px;  // assume this is the default size
  }
}
@media (min-width: 700px) {
  #lp_img {
    width: 100px;  // assume this is the default size
  }
}
@media (min-width: 783px) {
  #lp_img {
    width: 150px;  // assume this is the default size
  }
}
@media (min-width: 900px) {
  #lp_img {
    width: 200px;  // assume this is the default size
  }
}
@media (min-width: 1248px) {
  #lp_img {
    width: 300px;  // assume this is the default size
  }
}
/* *********   END   CSS  for landin-home page ****************** */

/* *********   START   CSS  for whyBreeder page ****************** */
#whyBreeder {
  margin: 5px 5px 5px 5px;
}
#whyBreeder h1, h2, h3{
  text-align: center;
}
#whyBreeder h5{
  text-align: center;
  color: #5bc0de;
}
#whyBreeder li{
  list-style:none;
}

#whyBreeder h4{
  text-align: center;
  color: #5bc0de;
}



#whyBreeder li, p{
  text-align: justify;
}


#whyBreeder a{
font-size: 18px;
color: white;
text-decoration: underline white;
}

/* *********   END   CSS  for landin-home page ****************** */










/* Spoiler for NEWS page */
.news-spoiler {
}
.news-h2-color {
  color: white;
  background: transparent url("../img/jungle1.png") no-repeat;
  background-size: cover;
  text-align: center;
}
.news-header-card {
  color: green;
  background: #ffffcc;
}
.news-header-card p{
  color: green;
  text-align: left;
}
.news-color {
  background: transparent url("../img/jungle1.png") no-repeat;
  background-size: cover;
}
/* end    Spoiler for NEWS page */

/* Spoiler for FAQ page */
.faq-spoiler p {
}
.faq-h2-color {
  color: green;
  background: #99ff99;
  text-align: center;
}
.faq-header-card {
  background: #ffffcc;
  color: green;
}
.faq-header-card p{
  color: green;
}
.faq-color {
  background: transparent url("../img/jungle1.png") no-repeat;
  background-size: cover;
/*  background: #99ff99; */
}
/* end    Spoiler for FAQ page */




/*     -------------   END    PAGES   -------------------     */








.photo-gallery {
  color:#313437;
}


.photo-gallery h2 {
  font-weight:bold;
  margin-bottom:10px;
  color:inherit;
  background-color: #ccffcc;
}




@media (max-width:767px) {
  .photo-gallery h2 {
    margin-bottom:25px;
    padding-top:25px;
    font-size:24px;
  }
}

.photo-gallery .intro {
  font-size:16px;
  max-width:500px;
  margin:0 auto 40px;
}

.photo-gallery .intro p {
  margin-bottom:0;
}

.photo-gallery .photos {
  padding-bottom:20px;
}

.photo-gallery .item {
  padding-bottom:30px;
}























/* Instagram in footer */
.fa:hover {
    opacity: 0.7;
    background: #125688;
    color: white;
}
.fa-instagram {
  background: #125688;
  color: white;
  height: 20px;
  font-size: 1.5em;
}

/* End Instagram in footer */







.card-deck-queen {
  max-width: 60%;
  margin-left: 20%;
}












/* Cards for kittens.php page */



.kitten-card {
  color: green;
  min-width: 20%;
  max-width: 100%;
  margin:0 auto;
}


.kittens-card {
  width: 10rem;
}

.image-kitten-card {

}



/* End Cards for kittens.php page */



/*  -------------Start ---getPhotoCat--------------------------------- */



body {
  margin: 0;
  font-family: Arial;
}

.row_photo_cat {
  margin: 0 auto; /* Added */
  float: none; /* Added */
}
/* The grid: Four equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.column img {
/*  opacity: 0.8; */
  cursor: pointer;
}

.column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */

#containerImage {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the expanded image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

#headerGetPhotoCat {
  color: green;
  background: #99ff99;
  text-align: center;
}













/*  -------------End ---getPhotoCat--------------------------------- */

































/* FontAwesome for working BootSnippet :> */

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');


.btn-primary:hover,
.btn-primary:focus {
    background-color: #ccffcc;
    border-color: #108d6f;
    box-shadow: none;
    outline: none;
}

.btn-primary {
    color: #fff;
    background-color: #ccffcc;
    border-color: #007b5e;
}

section {
    padding: 60px 0;
}

section .section-title {
    text-align: center;
    color: #007b5e;
    margin-bottom: 50px;
    text-transform: uppercase;
}

#team .card {
    border: none;
    background: #ccffcc;
}

.image-flip:hover .backside,
.image-flip.hover .backside {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    border-radius: .25rem;
}

.image-flip:hover .frontside,
.image-flip.hover .frontside {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.mainflip {
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
    position: relative;
}

.frontside {
    position: relative;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;
    margin-bottom: 30px;
}

.backside {
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
    box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}

.frontside,
.backside {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 1s;
    -moz-transform-style: preserve-3d;
    -o-transition: 1s;
    -o-transform-style: preserve-3d;
    -ms-transition: 1s;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
}

.frontside .card,
.backside .card {
    min-height: 312px;
}

.backside .card a {
    font-size: 18px;
    color: #007b5e !important;
}

.frontside .card,
.backside .card .card-title {
    color: #007b5e !important;
}

.frontside .card .card-body img {
    width: auto;
    height: auto;
    border-radius: 50%;
}

#imageBlogsTest {
  display: block;
  margin: 0 auto;
}




#faq-page {
  padding-bottom: 80px;
}


/*    Beginnin of newVideos  */

.newVideos {
  background: transparent url("../img/jungle1.png") no-repeat;
  background-size: cover;
}





/*    Ens of newVideos */







/*   arrow key navigation thumbnail gallery modal view   https://bootsnipp.com/snippets/P2gor                             */

.btn:focus, .btn:active, button:focus, button:active {
  outline: none !important;
  box-shadow: none !important;
}

#image-gallery .modal-footer{
  display: block;
}

.thumb{
  margin-top: 15px;
  margin-bottom: 15px;
}



#howToVisit p {
    text-indent: 30px;
}

#howToVisit li {
text-align: justify;
}

#howToVisit li strong{
text-transform: uppercase;
}

#howToVisit a {
    background-color: #ccffcc;
}












/* Footer */

.styleFooter {
    padding-bottom: 50px;
}

@media screen and (max-width: 800px) {
.mFooter img {
         max-width: 400px;
    }
    .styleFooter {
        padding-bottom: 50px;
    }
    #myReturnPage {
      width: 100px;
    }
}


.mFooter a{
  color: white;
  background: transparent;
}

.mFooter p {
  text-align: center;
}

#mediaFooter {
  font-size: 20px;

}


#mediaFooter a:link {
  text-decoration: none;
}

@media screen and (max-width: 480px) {
.mFooter img {
         max-width: 200px;
    }
    .styleFooter {
        padding-bottom: 50px;
    }
}





/* Instagram in footer */
.fa:hover {
    opacity: 0.7;
   background: #125688;
    color: white;
}
.fa-instagram {
  /* background: #125688; */
  background: transparent url("../img/jungle1.png") no-repeat;
  background-size: cover;
  color: white;
  height: 20px;
  font-size: 1.5em;
}

/* End Instagram in footer */


/* landing-color in Carousel */

.landing-color-carousel {
background: transparent;
}
.bg-dark-transp {
    opacity: 1.0;
}

/* End landing-color in Carousel  */


/* *********   BEGINNING   CSS   Pages about kittens ****************** */

#backgroundKittenH {
    background-color: #198754;
    opacity: 0.9;
    font-size: 2.0em;
    text-align: center;
}

#backgroundFooter {
       background-color: #198754;
    opacity: 0.9;
}






/* *********   END   CSS  for landin-home page ****************** */