html,
body,
.view {
  height: 100%;
}

#intro-title {
  font-size: 4vw !important;
  margin-top: 20px !important;
}

#our-plan-title {
  font-size: 4vw !important;
}

.mobile-only {
  display: none !important;
}

.header-text {
  font-size: 4vw !important;
}

/*.ministry-view {
  height: 230px !important;
  width: 500px !important;
} */

body {
  overflow-x:hidden;  
}

@media (max-width: 740px) {
  body {
    overflow-x:hidden !important;  
  }

  h1 {
    font-size: 30px;
  }

  h2 {
    font-size: 24px;
  }

  h3 {
    font-size: 20px;
  }

  h4 {
    font-size: 18px;
  }

  h5 {
    font-size: 14px;
  }

  p {
    font-size:14px;
  }

  li {
    font-size:14px;
  }

  #intro-title {
    font-size: 6vw !important;
  }

  #intro-verse {
    font-size: 10px !important;
  }

  .header-text {
    font-size: 8vw !important;
  }

  #our-plan-title {
    font-size: 8vw !important;
  }

  .no-mobile {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }

  #join-1-title, #join-2-title {
    display: none !important;
  }

  .join-view {
    height: 375px;
  } 

  #join-1-details, #join-2-details {
    display: flex !important;
    justify-content: center !important;
  }

  .join-details-title {
    font-size: 28px !important;
  } 

  .col-form-label {
    text-align: left !important;
  }
  
  #missionary-container {
    display: none !important;
  }

  #our-plan {
    min-height: 700px !important;
  }

  .mission-carousel {
    margin-top: 80px !important;
  }

  .ch-photo {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }

  .ministry-view {
    height: 230px !important;
    width: 375px !important;
  }

  .history-photo {
    max-width: 350px !important;
  }

  .history-col {
    margin-left: 10px !important;
    margin-right: 10px !important;
    text-align: left !important;
  }

  .school-photo {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    max-width: 350px !important;
  }
}

.nav-link{
    color: #053B7A !important;
    font-weight: 400;
}

.nav-link:hover {
    font-weight: 900;
}

.top-nav-collapse {
  background-color: #FFFFFF !important;
} 

.navbar:not(.top-nav-collapse) {
  background: transparent !important;
}

.navbar:not(.top-nav-collapse):hover {
  background: white !important;
}

.navbar.navbar:not(.top-nav-collapse) #give-link{
  background: transparent !important;
  border: none;
  color: #053B7A !important;
}

.nav-item .dropdown-menu:hover {
    color: #053B7A !important;
}

.nav-item .dropdown-menu a {
  color: #053B7A !important;
}

.nav-item .dropdown-menu a.dropdown-item:hover, .nav-link .dropdown-menu a.dropdown-item:focus {
    color: #053B7A !important;
    background-color:white !important;
    font-weight: 900;
}

.nav-item:hover {
    color: #053B7A !important;
}

@media (min-width: 992px) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

#give-link {
  background:#3B81A9 !important; 
  width:100px; 
  border-radius:10px; 
  border:1px solid #fff;
  color: white !important;
}

#give-link:hover{
  background: #6CA4BC !important;
}

.navbar-toggler {
    border-color: #053B7A;
    color: #053B7A;
}

@media (max-width: 991px) {
  .navbar:not(.top-nav-collapse) {
    background: white !important;
  }
  .navbar-toggler {
      border-color: #053B7A;
      color: #053B7A;
  }
}

.card-img-top {
  max-width: 100% !important;
  flex-shrink: 0 !important;
}

h1 {
  letter-spacing: 5px;
}

h5 {
  letter-spacing: 1px;
}

.hr-light {
  border-top: 3px solid #fff;
  width: 200px;
}

.hr-dark {
  border-top: 1px solid rgb(160, 160, 160);
  width: 300px;
}

.oswald-font {
  font-family: 'Belleza', sans-serif;
}


/* original green of second color scheme #39998E */

.btn-outline-white:hover {
  background-color: #DA674A !important;
  border-color: #DA674A !important;
}

.btn-color-1 {
  background-color: #053B7A;
  color: white;
}

.btn-color-1:hover, .btn-color-1:focus, .btn-color-1:active, .btn-color-1.active {
  background-color: #3B81A9;
  color: white;
}

.btn-color-2 {
  background-color: #3B81A9;
  color: white;
}

.btn-color-2:hover {
  background-color: #6CA4BC;
  color: white !important;
}

.btn-color-3 {
  background-color:#FFAA67;
  color: white;
}

.btn-color-3:hover {
  background-color: #DA674A;
  color: white;
}

.btn-color-4 {
  background-color:#aa653c;
  color: white;
}

.btn-color-4:hover {
  background-color: #FFAA67;
  color: white;
}

.btn.color-1-outline {
  background: transparent;
  color: #1E486C;
  border: 2px solid #1E486C;
  font-weight: bold;
}

.btn-color-1-outline:hover {
  color: white;
  background-color: #2B4D59;
}

.btn-color-2-outline {
  color: #2fc9b7 !important; 
  background: transparent; 
  border: 3px solid #2fc9b7;
  font-weight: bold;
}

.btn-color-2-outline:hover {
  color: white !important;
  background: #2fc9b7;
}

.btn-color-3-outline {
  color: #FFAA67; 
  background: transparent; 
  border: 3px solid #FFAA67;
  font-weight: bold;
}

.btn-color-3-outline:hover {
  color: white;
  background: #FFAA67;
}

.text-color-1{
  color:#053B7A;
}

.text-color-2{
  color:#3B81A9;
}

.text-color-3{
  color:#FFAA67;
}

.text-color-4{
  color: #aa653c;
}

.text-color-5 {
  color: #e0cd98;
}

.color-1{
  color: #2B4D59;
}

.back-color-1 {
  background: #1E486C !important;
}

.back-color-2 {
  background: #2fc9b7 !important;
}

.back-color-3 {
  background: #FFAA67;
}

.back-color-4 {
  background: #DA674A;
}

.nav-location {
  background: transparent;
  color: rgb(104, 103, 103) !important;
}

.nav-location-current {
  background: transparent;
  color:  rgb(167, 162, 162) !important;
}

.nav-location a {
  background: transparent;
  color: rgb(104, 103, 103) !important;
}

.carousel-control-next-icon:after {
  content: '>';
  font-size: 30px;
  color: white;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 32px;
  color: white;
} 

.carousel-control-next-icon, .carousel-control-prev-icon {
  display: inline-block;
  background: #0A4f70 no-repeat center center;
  background-size: 100% 100%;
  height: 50px !important;
  width: 50px !important;
}

.carousel-thumbnails .carousel-indicators {
  padding: 0 15px; 
  width: 80%; 
  position: static; 
  right: 0; 
  bottom: 0; 
  margin-right: auto;
  margin-left: auto;
  overflow-x: scroll;
  justify-content: start;
}

.carousel-indicators li {
  padding: 0px;
  margin-left: 1px;
  margin-right: 1px;
  opacity:1;
}

.carousel-indicators .active img{
  opacity: 0.25;
}

.carousel-indicators .active .missionary-title {
  display: none;
}

.carousel-indicators .active .missionary-active {
  display: flex !important;
}

.carousel .carousel-indicators li img {
  height: 300px;
  width: 300px;
}

.carousel-caption {
  width: 40%;
  left: 30%;
}

.footer {
  background: #FFFFFF;
  color: white;
}

.footer a {
    color: #053B7A;
}

.footer a p:hover {
    color: #3B81A9;
    font-weight: 900;
}

.go-link {
    color: #053B7A !important;
}

.go-link:hover {
    color: #3B81A9;
    font-weight: 900;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  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.flipped .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:rgb(247, 249, 250);
  border-radius: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Style the back side */
.flip-card-back {
  background-color: rgb(255, 255, 255);
  color: rgb(90, 88, 88);
  transform: rotateY(180deg);
  border-radius: 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

hr.hr-color-4 {
  /*border-top: 2px solid #DA674A;*/
  height: 30px;
  border-style: solid;
  border-color: #6CA4BC;
  border-width: 1px 0 0 0;
  border-radius: 20px;
}

hr.hr-color-4:before {
  display: block;
  content: "";
  height: 30px;
  margin-top: -31px;
  border-style: solid;
  border-color: #6CA4BC;
  border-width: 0 0 1px 0;
  border-radius: 20px;
}

a.ministry-link:hover {
  opacity: 0.7;
}

a.staff-card:hover {
  opacity: 0.7;
}

a.country-link:hover{
  opacity: 0.7;
}

.pic-row {
  display: flex;
}

.pic-column {
  flex: 50%;
  padding: 5px;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.faith-text {
  font-size: 16px;
}