/* === CUSTOM RESPONSIVE STYLES FOR GPdI Elohim === */
@media only screen and (max-width: 768px) {
    /* General Text */
    body {
      font-size: 16px;
      line-height: 22px;
      min-width: 100% !important;
    }
  
    h1 {
      font-size: 48px;
      line-height: 48px;
      padding: 20px 0;
    }
  
    h2 {
      font-size: 32px;
      line-height: 40px;
      padding-top: 40px;
      margin-bottom: 40px;
    }
  
    /* Layout Containers */
    .container_12 {
      width: 100% !important;
      padding: 0 15px;
    }
  
    .grid_1, .grid_2, .grid_3, .grid_4, .grid_5,
    .grid_6, .grid_7, .grid_8, .grid_9, .grid_10,
    .grid_11, .grid_12 {
      width: 100% !important;
      float: none !important;
      margin: 0 0 20px 0 !important;
    }
  
    .prefix_1, .prefix_2, .prefix_3, .prefix_4, .prefix_5,
    .prefix_6, .prefix_7, .prefix_8, .prefix_9, .prefix_10, .prefix_11,
    .suffix_1, .suffix_2, .suffix_3, .suffix_4, .suffix_5,
    .suffix_6, .suffix_7, .suffix_8, .suffix_9, .suffix_10, .suffix_11 {
      padding: 0 !important;
    }
  
    .push_1, .push_2, .push_3, .push_4, .push_5,
    .push_6, .push_7, .push_8, .push_9, .push_10, .push_11,
    .pull_1, .pull_2, .pull_3, .pull_4, .pull_5,
    .pull_6, .pull_7, .pull_8, .pull_9, .pull_10, .pull_11 {
      left: 0 !important;
    }
  
    /* Navigation */
    .sf-menu {
      display: none;
    }
  
    .navigation {
      text-align: center;
    }
  
    .navigation::before {
      content: '☰';
      font-size: 36px;
      display: block;
      cursor: pointer;
      color: white;
    }
  
    /* Header Sticky */
    #stuck_container {
      position: relative !important;
      box-shadow: none;
    }
  
    .pseudoStickyBlock {
      height: 0 !important;
    }
  
    /* Images */
    .img_inner.fleft,
    .img_inner.img_fright {
      float: none !important;
      margin: 0 auto 20px;
      display: block;
    }
  
    /* Footer */
    #footer h1 {
      font-size: 32px;
    }
  
    /* Table */
    .jadwal-ibadah {
      width: 100%;
      font-size: 14px;
    }
  
    /* Slider Camera */
    .camera_wrap,
    .camera_target,
    .camera_overlayer,
    .camera_target_content,
    .cameraCont,
    .cameraContents,
    .cameraSlide,
    .cameraContent {
      width: 100% !important;
      height: auto !important;
      position: relative !important;
    }
  
    .camera_caption,
    .caption {
      position: relative !important;
      top: auto !important;
      margin-top: 0 !important;
      padding: 20px;
      font-size: 18px;
    }
  
    .caption h2 {
      font-size: 24px;
      line-height: 32px;
    }
  
    .caption .btn {
      margin-top: 20px;
      font-size: 16px;
    }
  
    .slide_wrapper .camera_prev,
    .slide_wrapper .camera_next {
      width: 40px;
      height: 40px;
      left: 10px;
      right: 10px;
      top: auto !important;
      bottom: 10px;
      opacity: 0.7;
    }
  
    .slide_wrapper .camera_prev {
      left: 10px;
    }
  
    .slide_wrapper .camera_next {
      right: 10px;
    }
  
    .camera_thumbs_cont ul li > img {
      max-width: 60px;
      height: auto;
    }
  }

  /* font-awesome.css */
  @media only screen and (max-width: 768px) {
    #footer .socials .fa {
      width: 40px;
      height: 40px;
      font-size: 20px;
      line-height: 42px;
      margin-bottom: 10px;
    }
  
    #footer .socials .fa + .fa {
      margin-left: 10px;
    }
  }

  @media only screen and (max-width: 768px) {
    #owl {
      padding-bottom: 60px;
      margin: 0;
    }
  
    #owl .item {
      padding: 10px;
    }
  
    #owl .banner p {
      padding: 20px 20px 0;
      font-size: 16px;
      line-height: 24px;
    }
  
    #owl .owl-prev,
    #owl .owl-next {
      bottom: 10px;
      width: 40px;
      height: 40px;
      margin-left: -50px;
      background-size: contain;
    }
  
    #owl .owl-next {
      margin-left: 10px;
    }
  
    .owl_link {
      font-size: 22px;
      line-height: 36px;
      margin-bottom: 20px;
    }
  }
  
  @media only screen and (max-width: 767px) {
    .select-menu {
      display: block !important;
      width: 100%;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      background-color: #f6eed2;
      color: #000;
      margin-bottom: 10px;
    }
  
    .sf-menu {
      display: none !important;
    }
  }

  @media only screen and (max-width: 767px) {
    .sf-menu {
      display: none !important;
    }
  
    .select-menu {
      display: block !important;
      width: 100%;
      padding: 12px;
      font-size: 16px;
      background: #f6eed2;
      color: #000;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-top: 10px;
    }
  }