*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.fa.fa-facebook-square:hover {  
      animation: fa-spin 2s infinite linear;
}
 .fa.fa-google-plus-square:hover {  
      animation: fa-spin 2s infinite linear;
}
.fa.fa-refresh {
     transition: transform 0.5s ease 0s;
}
		.topnav {
  overflow: hidden;
  background-color: #70040f;
  margin: 0;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

	.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 1px 14px;
  text-decoration: none;
  font-size: 15px;
}

.topnav a:hover {
  background-color: #fcfd72;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;}

.topnav .nav-link.active{
  	background-color: #9400d3;
  	color: #ffffff;
  	border:3px solid #9400d3;
  }
 
  .nav-tabs nav-link{
  	background-color: white;
  	color: #9400d3;
  }

 .tab-content .list-group-item {
 	background-color: #77febc;
 }
 .tab-pane{
 	width: 100%;
 	height: 300px;
   overflow-y: scroll; 
}
.item{
           	margin-top: 15px;
            transition: .5s ease-in-out;
           }
           .item:hover{
            filter: brightness(80%);
           }


.mydivouter{
  position:relative;
  background: #f90;
    width: 200px;
    height: 120px;
    margin: 0 auto;
}
.mydivoverlap{
    position: relative;
    z-index: 1;
}
.mybuttonoverlap{
  position: absolute;
    z-index: 2;
    top: 44px;
    display: none;
    left: 59px; 
}
.mydivouter:hover .mybuttonoverlap{ 
  display:block;
}
 .carousel-wrap {
    width: 1000px;
    margin: auto;
    position: relative;
  }
  .owl-carousel .owl-nav{
    overflow: hidden;
    height: 0px;
  }

  .owl-theme .owl-dots .owl-dot.active span, 
  .owl-theme .owl-dots .owl-dot:hover span {
      background: #2caae1;
  }


  .owl-carousel .item {
      text-align: center;
  }
  .owl-carousel .nav-btn{
      height: 47px;
      position: absolute;
      width: 26px;
      cursor: pointer;
      top: 100px !important;
  }

  .owl-carousel .owl-prev.disabled,
  .owl-carousel .owl-next.disabled{
    pointer-events: none;
    opacity: 0.2;
  }

  .owl-carousel .prev-slide{
      background: url(nav-icon.png) no-repeat scroll 0 0;
      left: -33px;
  }
  .owl-carousel .next-slide{
      background: url(nav-icon.png) no-repeat scroll -24px 0px;
      right: -33px;
  }
  .owl-carousel .prev-slide:hover{
     background-position: 0px -53px;
  }
  .owl-carousel .next-slide:hover{
    background-position: -24px -53px;
  }

  span.img-text {
    text-decoration: none;
    outline: none;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    cursor: pointer;
    width: 100%;
    font-size: 23px;
    display: block;
    text-transform: capitalize;
  }
  span.img-text:hover {
    color: #2caae1;
  }
/*.wrapper{
  position: relative;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wrapper a{
  display: block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  font-family: sans-serif;
  text-decoration: none;
  color: #333;
  border: 2px solid #333;
  letter-spacing: 2px;
  text-align: center;
  position: relative;
  transition: all .35s;  
}
.wrapper a-span{
  position: relative;
 
  }

.wrapper a:after{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #ff003b;
  transition: all .35s;
  color: white;
 
}

.wrapper a:hover{
  color: #fff;

}

.wrapper a:hover:after{
  width: 100%;
}*/

.button {
  display: none;
}

.wrapp card:hover{
  opacity: 0.3;
}

.wrapp:hover .middle {
  opacity: 1;
}

img:hover + .button {
  display: inline-block;
}

.wrapp:hover .button {

  display: inline-block;
}


.wrapp .button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
 
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}


/*a {
  text-decoration:none;
  color: #ffffff;
   z-index: 5;

}


 a:hover {
        color: #2d8653;
        border-bottom: 1px solid #ffffff;
      }*/

.carousel-item img{
width: 100%;
height: 70vh;  }
.nav-item{
	margin-right: 4;
margin:6;
color: white;
}

.about_img{
	min-width: 100%;
	max-height: 280px;
}
.center{
	 opacity: 0.3;
}



/*


@media (min-width: 576px) { ... }

*/

/*// Medium devices (tablets, 768px and up)*/



/*
@media (min-width: 768px) { ... }

/* // Large devices (desktops, 992px and up) */

/*
@media (min-width: 992px) { ... }

/* // X-Large devices (large desktops, 1200px and up)
*/
/*
@media (min-width: 1200px) { ... }

/* // XX-Large devices (larger desktops, 1400px and up)
*/


/*
@media (min-width: 1400px) { ... }






/*--------------------------------------------------------------
# pop up
--------------------------------------------------------------*/




.img-replace {
  /* replace text with an image */
  display: inline-block;
 /*  overflow: hidden;   */
  text-indent: 100%; 
  color: transparent;
  white-space: nowrap;
}
.bts-popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
/*  background-color: rgba(0, 0, 0, 0.5);   */
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
  transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
.bts-popup.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 0.3s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.3s 0s, visibility 0s 0s;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

.bts-popup-container {
  position: relative;
  width: 90%;
  max-width: 350px;
  margin: 4em auto;
  background: #f36f21;
  border-radius: none; 
  text-align: center;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-40px);
  -moz-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  -o-transform: translateY(-40px);
  transform: translateY(-40px);
  /* Force Hardware Acceleration in WebKit */
  -webkit-backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.bts-popup-container img {
  padding: 0 0 0 0;
}
.bts-popup-container p {
	color: white;
  padding: 10px 40px;
}
.bts-popup-container .bts-popup-button {
  padding: 5px 25px;
  border: 2px solid white;
	display: inline-block;
  margin-bottom: 10px;
}

.bts-popup-container a {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
}






.bts-popup-container .bts-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 25px;
  height: 25px;
}
.bts-popup-container .bts-popup-close::before, .bts-popup-container .bts-popup-close::after {
  content: '';
  position: absolute;
  top: 12px;
  width: 16px;
  height: 3px;
  background-color: white;
}
.bts-popup-container .bts-popup-close::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  left: 8px;
}
.bts-popup-container .bts-popup-close::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  right: 6px;
  top: 13px;
}
.is-visible .bts-popup-container {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
@media only screen and (min-width: 1170px) {
  .bts-popup-container {
    margin: 8em auto;
  }
}