/******************************************************************************/
/* 0-1049																	  */
/******************************************************************************/

@media only screen and (min-width: 0px) and (max-width: 1069px) {
}

/******************************************************************************/
/* 0-959																	  */
/******************************************************************************/

@media only screen and (min-width: 0px) and (max-width: 979px) {
  /******************************************************************************/
  /* Base																		  */
  /******************************************************************************/

  *,
  body,
  input,
  select,
  textarea,
  .fancybox-title.fancybox-title-inside-wrap {
    font-size: 14px;
  }

  /******************************************************************************/
  /* Post																		  */
  /******************************************************************************/

  /**************************************************************************/
  /*	Post / Comments list												  */
  /**************************************************************************/

  .template-post
    .template-post-comment-list
    > ul
    > li
    ul.template-post-comment-list-children,
  .template-post
    .template-post-comment-list
    > ul
    > li
    ul.template-post-comment-list-children
    li {
    margin-left: 0px;
  }

  /******************************************************************************/
  /* Component																  */
  /******************************************************************************/

  /**************************************************************************/
  /* Component / Counter box												  */
  /**************************************************************************/

  .template-component-counter-box
    ul
    > li
    > .template-component-counter-box-counter {
    width: 150px;
    height: 150px;
    line-height: 150px;
  }

  /**************************************************************************/
  /* Component / Feature													  */
  /**************************************************************************/

  /**************************************************************/
  /* Component / Feature / Icon								  */
  /**************************************************************/

  /**********************************************************/
  /* Component / Feature / Icon / Size					  */
  /**********************************************************/

  .template-component-feature.template-component-feature-size-large
    ul
    > li
    > .template-icon-feature {
    width: 150px;
    height: 150px;
  }

  /**********************************************************/
  /* Component / Feature / Header	/ Position				  */
  /**********************************************************/

  .template-component-feature.template-component-feature-size-large.template-component-feature-position-right
    ul
    > li
    > h5 {
    margin-right: 170px;
  }

  .template-component-feature.template-component-feature-size-large.template-component-feature-position-left
    ul
    > li
    > h5 {
    margin-left: 170px;
  }

  /**********************************************************/
  /* Component / Feature / Text / Position				  */
  /**********************************************************/

  .template-component-feature.template-component-feature-size-large.template-component-feature-position-right
    ul
    > li
    > p {
    margin-right: 170px;
  }

  .template-component-feature.template-component-feature-size-large.template-component-feature-position-left
    ul
    > li
    > p {
    margin-left: 170px;
  }
}

/******************************************************************************/
/* 0-767																	  */
/******************************************************************************/

@media only screen and (min-width: 0px) and (max-width: 787px) {
  /******************************************************************************/
  /* Template layout															  */
  /******************************************************************************/

  .template-content-layout .template-content-layout-column-left,
  .template-content-layout .template-content-layout-column-right {
    clear: both;
    float: none;
  }

  .template-content-layout .template-content-layout-column-left {
    margin-bottom: 60px;
  }

  /******************************************************************************/
  /* Headers																	  */
  /******************************************************************************/

  h3,
  h3 a,
  .template-component-testimonial ul > li > p,
  .template-component-twitter-user-timeline ul > li > p {
    font-size: 28px;
  }

  h4,
  h4 a {
    font-size: 24px;
  }

  h5,
  h5 a {
    font-size: 20px;
  }

  h6,
  h6 a,
  .template-component-counter-list
    > ul
    > li
    > .template-component-counter-list-label,
  .template-component-counter-list
    > ul
    > li
    > .template-component-counter-list-counter {
    font-size: 16px;
  }

  /******************************************************************************/
  /* Template																	  */
  /******************************************************************************/

  /**************************************************************************/
  /* Template	/ Header													  */
  /**************************************************************************/

  .template-header {
  }

  .template-header .template-main {
    display: block;
  }

  /**********************************************************************/
  /* Template / Header / Top											  */
  /**********************************************************************/

  .template-header .template-header-top .template-header-top-logo,
  .template-header .template-header-top .template-header-top-menu {
    width: 100%;
    display: block;
  }

  .template-header .template-header-top .template-header-top-logo {
    float: none;
    text-align: center;
  }

  .template-header .template-header-top .template-header-top-logo a {
  }

  .template-header .template-header-top .template-header-top-logo a img {
    max-width: 150px;
    margin-left: auto;
    margin-right: auto;
  }

  .template-header .template-header-top .template-header-top-menu {
    margin-bottom: 20px;
  }

  /******************************************************************************/
  /* Form																		  */
  /******************************************************************************/

  .template-form-line.template-form-line-submit,
  .template-form-line.template-form-line-submit > div,
  .template-form-line.template-form-line-submit input[type="submit"] {
    width: 100%;
    display: block;
  }

  /******************************************************************************/
  /* Component																  */
  /******************************************************************************/

  .template-component-header-subheader {
    text-align: center;
  }

  .subheader-why-gracious {
    margin: 0;
  }

  .text-slide {
    font-size: 14px;
    top: 10px;
  }

  .template-component-testimonial .template-pagination {
    bottom: 0;
  }

  #programme .card {
    flex: 0 0 calc(100% - 10px);
  }

  #programme .header h4,
  #programme .title h4 {
    font-size: 16px;
  }

  #programme .description p,
  #programme .footer {
    font-size: 12px;
  }

  #programme .read-more {
    font-size: 12px;
  }

  .template-component-social-icon {
    margin-top: 20px;
  }

  ul.template-widget-list {
    text-align: center;
  }

  ul.template-widget-list > li > h6 > span + span {
    margin: 10px auto;
    width: 200px;
  }

  .widget-playstore {
    float: none;
    margin-right: 0px !important;
  }

  .widget-apple {
    float: none;
  }

  .tp-splitted {
    font-size: 20px;
  }

  .tp-bullets {
    display: none;
  }

  #rev_slider_1_2_wrapper .tp-leftarrow,
  #rev_slider_1_2_wrapper .tp-rightarrow {
    width: 25px !important;
    height: 25px !important;
  }

  #rev_slider_1_2_wrapper .tp-leftarrow {
    top: 75% !important;
    left: 10px !important;
  }

  #rev_slider_1_2_wrapper .tp-rightarrow {
    top: 88% !important;
    left: 100px !important;
  }

  #rev_slider_1_2_wrapper .tp-leftarrow,
  .template-component-nivo-slider .nivo-directionNav a.nivo-nextNav,
  .template-component-flex-slider .flex-direction-nav li a.flex-next {
    background-size: cover;
  }

  #rev_slider_1_2_wrapper .tp-rightarrow,
  .template-component-nivo-slider .nivo-directionNav a.nivo-nextNav,
  .template-component-flex-slider .flex-direction-nav li a.flex-next {
    background-size: cover;
  }

  /**************************************************************************/
  /* Component / Menu														  */
  /**************************************************************************/

  /**********************************************************************/
  /* Component / Menu / Default										  */
  /**********************************************************************/

  .template-component-menu-default {
    display: none;
  }

  /**********************************************************************/
  /* Component / Menu / Responsive									  */
  /**********************************************************************/

  .template-component-menu-responsive {
    display: block;
  }
}

/******************************************************************************/
/* 768-1049																	  */
/******************************************************************************/

@media only screen and (min-width: 768px) and (max-width: 1069px) {
}

/******************************************************************************/
/* 960-1049																	  */
/******************************************************************************/

@media only screen and (min-width: 960px) and (max-width: 1069px) {
  /******************************************************************************/
  /* Default																	  */
  /******************************************************************************/

  .template-main,
  .template-component-menu-default ul.sf-menu .sf-mega {
    width: 930px;
  }

  /******************************************************************************/
  /*	Template layout															  */
  /******************************************************************************/

  .template-content-layout.template-content-layout-sidebar-left
    .template-content-layout-column-left,
  .template-content-layout.template-content-layout-sidebar-right
    .template-content-layout-column-right {
    width: 290px;
  }

  .template-content-layout.template-content-layout-sidebar-left
    .template-content-layout-column-right,
  .template-content-layout.template-content-layout-sidebar-right
    .template-content-layout-column-left {
    width: 610px;
  }

  /******************************************************************************/
  /*	Component																  */
  /******************************************************************************/

  /**************************************************************************/
  /* Component / Menu														  */
  /**************************************************************************/

  /**********************************************************************/
  /* Component / Menu / Default										  */
  /**********************************************************************/

  .template-component-menu-default ul.sf-menu > li > a {
    min-width: 100px;
  }
}

/******************************************************************************/
/* 768-959																	  */
/******************************************************************************/

@media only screen and (min-width: 768px) and (max-width: 979px) {
  /******************************************************************************/
  /* Default																	  */
  /******************************************************************************/

  .template-main,
  .template-component-menu-default ul.sf-menu .sf-mega {
    width: 750px;
  }

  /******************************************************************************/
  /*	Template layout															  */
  /******************************************************************************/

  .template-content-layout.template-content-layout-sidebar-left
    .template-content-layout-column-left,
  .template-content-layout.template-content-layout-sidebar-right
    .template-content-layout-column-right {
    width: 230px;
  }

  .template-content-layout.template-content-layout-sidebar-left
    .template-content-layout-column-right,
  .template-content-layout.template-content-layout-sidebar-right
    .template-content-layout-column-left {
    width: 490px;
  }

  /******************************************************************************/
  /* Widget																	  */
  /******************************************************************************/

  /**************************************************************************/
  /* Widget / Most commented - Style 2									  */
  /* Widget / Recent post - Style 2										  */
  /* Widget / Recent comments - Style 3									  */
  /**************************************************************************/

  .template-footer
    .template-footer-top
    .template-widget-most-commented.template-widget-most-commented-style-1
    > ul
    > li
    > a,
  .template-footer
    .template-footer-top
    .template-widget-recent-post.template-widget-recent-post-style-1
    > ul
    > li
    > a,
  .template-footer
    .template-footer-top
    .template-widget-recent-comment.template-widget-recent-comment-style-1
    > ul
    > li
    > a {
    display: none;
  }

  .template-footer
    .template-footer-top
    .template-widget-most-commented.template-widget-most-commented-style-1
    > ul
    > li
    > h6,
  .template-footer
    .template-footer-top
    .template-widget-most-commented.template-widget-most-commented-style-1
    > ul
    > li
    > span,
  .template-footer
    .template-footer-top
    .template-widget-recent-post.template-widget-recent-post-style-1
    > ul
    > li
    > h6,
  .template-footer
    .template-footer-top
    .template-widget-recent-post.template-widget-recent-post-style-1
    > ul
    > li
    > span,
  .template-footer
    .template-footer-top
    .template-widget-recent-comment.template-widget-recent-comment-style-1
    > ul
    > li
    > h6,
  .template-footer
    .template-footer-top
    .template-widget-recent-comment.template-widget-recent-comment-style-1
    > ul
    > li
    > span {
    margin-left: 0px;
  }

  #rev_slider_1_2_wrapper .tp-leftarrow {
    top: 75% !important;
    left: 10px !important;
  }

  #rev_slider_1_2_wrapper .tp-rightarrow {
    top: 88% !important;
    left: 100px !important;
  }

  /******************************************************************************/
  /*	Component																  */
  /******************************************************************************/

  /**************************************************************************/
  /* Component / Menu														  */
  /**************************************************************************/

  /**********************************************************************/
  /* Component / Menu / Default										  */
  /**********************************************************************/

  .template-component-menu-default ul.sf-menu > li > a {
    min-width: 75px;
    padding-left: 5px;
    padding-right: 5px;
  }
}

/******************************************************************************/
/* 479-767																	  */
/******************************************************************************/

@media only screen and (min-width: 480px) and (max-width: 787px) {
  /******************************************************************************/
  /* Headers																	  */
  /******************************************************************************/

  h2,
  h2 a,
  .template-component-counter-box
    ul
    > li
    > .template-component-counter-box-counter,
  .template-component-pricing-plan
    > ul
    > li
    .template-component-pricing-plan-price
    > span:first-child {
    font-size: 48px;
  }

  /******************************************************************************/
  /* Default																	  */
  /******************************************************************************/

  .template-main,
  .template-component-menu-default ul.sf-menu .sf-mega {
    width: 460px;
  }

  /******************************************************************************/
  /*	Template layout															  */
  /******************************************************************************/

  .template-content-layout.template-content-layout-sidebar-left
    .template-content-layout-column-left,
  .template-content-layout.template-content-layout-sidebar-left
    .template-content-layout-column-right,
  .template-content-layout.template-content-layout-sidebar-right
    .template-content-layout-column-left,
  .template-content-layout.template-content-layout-sidebar-right
    .template-content-layout-column-right {
    width: 460px;
  }
}

/******************************************************************************/
/* 0-479																	  */
/******************************************************************************/

@media only screen and (min-width: 0px) and (max-width: 499px) {
  /******************************************************************************/
  /* Headers																	  */
  /******************************************************************************/

  h1,
  h1 a {
    font-size: 48px;
  }

  h2,
  h2 a,
  .template-component-counter-box
    ul
    > li
    > .template-component-counter-box-counter,
  .template-component-pricing-plan
    > ul
    > li
    .template-component-pricing-plan-price
    > span:first-child {
    font-size: 40px;
  }

  /******************************************************************************/
  /* Default																	  */
  /******************************************************************************/

  .template-main,
  .template-component-menu-default ul.sf-menu .sf-mega {
    width: 300px;
  }

  /******************************************************************************/
  /*	Template layout															  */
  /******************************************************************************/

  .template-content-layout.template-content-layout-sidebar-left
    .template-content-layout-column-left,
  .template-content-layout.template-content-layout-sidebar-left
    .template-content-layout-column-right,
  .template-content-layout.template-content-layout-sidebar-right
    .template-content-layout-column-left,
  .template-content-layout.template-content-layout-sidebar-right
    .template-content-layout-column-right {
    width: 300px;
  }

  /******************************************************************************/
  /* Post																		  */
  /******************************************************************************/

  /**************************************************************************/
  /*	Post / Comments list												  */
  /**************************************************************************/

  .template-post .template-post-comment-list > ul > li .template-comment-meta,
  .template-post
    .template-post-comment-list
    > ul
    > li
    .template-comment-content {
    margin-left: 0px;
  }

  /**********************************************************************/
  /*	Post / Comments list / Comment									  */
  /**********************************************************************

			/******************************************************************/
  /*	Post / Comments list / Comment / Avatar						  */
  /******************************************************************/

  .template-post
    .template-post-comment-list
    > ul
    > li
    .template-comment-avatar {
    display: none;
  }

  /******************************************************************/
  /*	Post / Comments list / Comment / Content					  */
  /******************************************************************/

  .template-post
    .template-post-comment-list
    > ul
    > li
    .template-comment-content {
    margin-top: 10px;
  }
}

/******************************************************************************/
/* responsive slider film roll															  */
/******************************************************************************/

@media only screen and (min-width: 2399px) {
  .film_roll_prev {
    left: 13.5% !important;
  }
}

/* CSS untuk tampilan mobile */
@media only screen and (max-width: 768px) {
  .text-img-desc {
    top: auto !important; /* Menghapus posisi absolute */
    left: auto !important; /* Menghapus posisi absolute */
    bottom: 20px; /* Menyesuaikan posisi deskripsi teks */
    text-align: center; /* Membuat teks berada di tengah */
    width: 100%; /* Menyesuaikan lebar */
    transform: none; /* Menghapus transformasi */
    font-size: 24px; /* Menyesuaikan ukuran font */
  }

  /* CSS untuk tombol film_roll_prev */
  .film_roll_prev {
    width: 30px !important;
    height: 30px !important;
    left: 20px !important; /* Posisikan tombol ke sisi kiri */
    top: 50% !important; /* Sesuaikan posisi vertikal */
  }

  /* CSS untuk tombol film_roll_next */
  .film_roll_next {
    width: 30px !important;
    height: 30px !important;
    right: 20px !important; /* Posisikan tombol ke sisi kanan */
    left: unset !important;
    top: 50% !important; /* Sesuaikan posisi vertikal */
  }

  div.film_roll_child.active img.img-roll {
    transform: none !important; /* Menghapus transformasi pada gambar */
  }

  div.film_roll_child img.img-roll {
    transform: none !important; /* Menghapus transformasi pada gambar */
  }

  .film_roll_child {
    width: 100%;
  }
}

@media only screen and (min-width: 769px) and (max-width: 1024px) {
  /* CSS untuk tombol film_roll_prev */
  .film_roll_prev {
    width: 30px !important;
    height: 30px !important;
    left: 13.5% !important;
  }

  /* CSS untuk tombol film_roll_next */
  .film_roll_next {
    width: 30px !important;
    height: 30px !important;
    left: 17% !important;
  }
}